We Keep Coding

`vite build` is throwing `Could not resolve "../internals/window" from "../internals/window?commonjs-external"`

I have recently migrated from CRA to Vite. Everything went smooth, yet the build script is throwing an error.
Seems to be a RollupError
Could not resolve "../internals/window" from "../internals/window?commonjs-external"
When I remove the define object from my config, the build succeeds yet the dev server stops working
I am using the vite 4
here is my config
import { defineConfig } from "vite";
import react from "#vitejs/plugin-react";
import viteTsconfigPaths from "vite-tsconfig-paths";
import svgrPlugin from "vite-plugin-svgr";
// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
return {
plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
preview: {
port: 3000,
},
build: {
outDir: "build",
rollupOptions: {
external: ["jss-plugin-window"],
},
},
define: {
global: "window"
},
server: {
open: true,
port: 3000,
},
envPrefix: "REACT_APP_",
};
});

I use the following the bypass the issue, got the solution from here: https://dev.to/lico/issues-that-i-encountered-and-how-to-deal-with-them-while-migrating-from-cra-to-vite-51pg
define: {
...(process.env.NODE_ENV === 'development' ? {global: 'window'} : {})
}

How to resolve the Cypress error "No Specs Found"

In my Cypress testing suite, I'm getting the following issue and I'm not understanding how to fix it. I understood is a path issue but cannot figure out what should be the right path. The issue is only with my smoke test but the rest of my scopes is working fine.
I'm not sure what is wrong here, probably I configured the paths wrong but whatever I do seems not working.
The spec files are existing and there are configured as follows in a smoke.json file
{
"specPattern": [
"authentication/log-in.cy.js",
"candidate/study-sign-up.cy.js",
"candidate/click-all-tabs.cy.js"
]
}
The folder structure is as follows
Details on the CY configuration
const { defineConfig } = require('cypress');
module.exports = defineConfig({
e2e: {
chromeWebSecurity: false,
viewportWidth: 1280,
viewportHeight: 800,
screenshotsFolder: 'artifacts',
video: false,
reporter: 'junit',
reporterOptions: {
mochaFile: 'results/test-results-[hash].xml',
},
retries: 1,
defaultCommandTimeout: 60000,
setupNodeEvents(on, config) {
return require('./cypress/plugins/index.js')(on, config);
},
},
});

storeUrl and password are not required .env issue

I have an issue using gatsby-source-shopify , i have inside the .env file :
GATSBY_STOREFRONT_ACCESS_TOKEN = xxxxx
GATSBY_SHOPIFY_STORE_URL= xxxxxx.myshopify.com/
SHOPIFY_SHOP_PASSWORD= xxx
gatsby-config.js:
require("dotenv").config()
module.exports = {
siteMetadata: {
siteTitle: "xxxx",
siteTitleDefault: "xxxx",
siteUrl: "xxxxxxx.myshopify.com/",
hrefLang: "en",
},
flags: {
FAST_DEV: true,
},
plugins: [
{ resolve: "gatsby-source-shopify",
options: {
password: process.env.SHOPIFY_APP_PASSWORD,
storeUrl: process.env.GATSBY_MYSHOPIFY_URL,
// salesChannel: process.env.SHOPIFY_APP_ID, // Optional but recommended
},
},
]
eventually when i run gatsby develop i get this issue :
Invalid plugin options for "gatsby-source-shopify":
"storeUrl" is required
"password" is required
not finished load plugins - 0.807s
it's like .env is not working properly

Check your variable names, the names in the .env and the names in the code don't actually match. You could update the code to:
{ resolve: "gatsby-source-shopify",
options: {
password: process.env.SHOPIFY_SHOP_PASSWORD,
storeUrl: process.env.GATSBY_SHOPIFY_STORE_URL,
// salesChannel: process.env.SHOPIFY_APP_ID, // Optional but recommended
},
}

next build fails on the server

I have a working website on my machine. Next can run it in the development mode and also build in the production one. But the problem is that on the server's machine it raises an error:
> Build error occurred
TypeError: Cannot destructure property 'serverRuntimeConfig' of 'next_config__WEBPACK_IMPORTED_MODULE_1___default(...)(...)' as it is undefined.
at Object.aorh (/home/MyInspire-ph.ru-v4/.next/server/pages/
Package version is the same, and it does work on my machine. How can I fix it?
Here's my config file
const path = require('path');
const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
module.exports = phase => {
return {
trailingSlash: true,
images: {
domain: ['localhost'],
},
publicRuntimeConfig: {
dev: phase === PHASE_DEVELOPMENT_SERVER,
},
serverRuntimeConfig: {
rootDir: __dirname.replace(/\\/g, '/'),
telegram: {
token: 'sometoken',
usersFile: 'somefile',
},
},
webpack: config => {
config.resolve.alias['#sass'] = path.resolve(__dirname, 'sass');
return config;
},
};
};

preload script not loaded in packaged app

I've made a small Electron app which needs to load a preload js file.
When I start the app with electron ., it finds the file, but when the app is packaged, it doesn't.
The call is made here:
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: false,
nativeWindowOpen: true,
webSecurity: false,
preload: path.join(__dirname, 'preload.js')
}
})
My simplified package.json:
"name": "app",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron .",
"build": "electron-packager . --platform=win32 --arch=x64 --overwrite"
}
"devDependencies": {
"electron": "^1.8.4",
"electron-packager": "^12.0.1",
}
My project structure:
- node_modules
- main.js
- preload.js
- package.json
I've checked the result of the path.join and in both cases, the path is correct, and the file is there.

For peoples using Electron Forge webpack typescript boilerplate :
Add the preload key in package.json file:
{
"config": {
"forge": {
"plugins": [
[
"#electron-forge/plugin-webpack",
{
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"html": "./src/index.html",
"js": "./src/renderer.tsx",
"name": "main_window",
"preload": {
"js": "./src/preload.ts"
}
}
]
}
}
]
]
}
}
}
Preload script can be a typescript file.
Add MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY constant as value for preload:
// Tell typescript about this magic constant
declare const MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY: any;
// [...]
const mainWindow = new BrowserWindow({
height: 1000,
width: 1500,
webPreferences: {
preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
}
});
In preload.ts write :
import {
contextBridge,
ipcRenderer
} from 'electron';
contextBridge.exposeInMainWorld(
'electron',
{
doThing: () => ipcRenderer.send('do-a-thing')
}
)
Add index.d.ts file, write :
declare global {
interface Window {
electron: {
doThing(): void;
}
}
}
Start your app, in your dev console you can type electron and view it is defined.
BONUS: getting the typing right for the contextBridge exposed API:
Why a separated fie ? Not sure if needed, but I prefer not having to import an interface from a file that contain main process code (like preload.ts) in renderer process.
// exposed-main-api.model.ts
export interface ExposedMainAPI {
doThat(data: string): Promise<number>;
}
// index.d.ts
declare global {
interface Window {
electron: ExposedMainAPI
}
}
// preload.ts
import {
contextBridge,
ipcRenderer
} from 'electron';
const exposedAPI: ExposedAPI = {
// You are free to omit parameters typing and return type if you feel so.
// TS know the function type thanks to exposedAPI typing.
doThat: (data) => ipcRenderer.invoke('do-that-and-return-promise', data)
};
// note: this assume you have a `ipcMain.handle('do-thing-and-return-promise', ...)`
// somewhere that return a number.
contextBridge.exposeInMainWorld('electron', exposedAPI);
Credits:
#deadcoder0904 that gave us the solution in an comment to a previous answer, here is the github issue he link : https://github.com/electron-userland/electron-forge/issues/1590
index.d.ts typing and small example usage of contextBridge: https://github.com/electron/electron/issues/9920#issuecomment-743803249
See also:
Explanations about security and also an example of using IPC: https://github.com/electron/electron/issues/9920#issuecomment-575839738

Preload script needs to be specified as an absolute path. Thus it will differ from the time you're running it in development versus running it packaged as an asar file.
const getSourceDirectory = () => isDev()
? path.join(process.cwd(), 'build', 'src') // or wherever your local build is compiled
: path.join(process.resourcesPath, 'app', 'src'); // asar location
const preload = path.resolve(getSourceDirectory(), 'preload.js');