We Keep Coding

Updating Electron issue: Uncaught ReferenceError: global is not defined

I'm working on an Electron app with ReactJS + Bootstrap and Typescript, and as I tried to update my Electron version (11.5.0) to the current one (15.2.0) I stumbled upon this error message in the developer tools' console:
Ignore the warning since it was there before I updated Electron to a more recent version, the problem is that the app is completely blank and unusable. I tried googling and searching here in SO for the message but most posts and answers were related to Angular and a "polyfills.ts" file.
I also tried updating to a lower version (12.2.2) but it broke as well.
├── #types/electron-devtools-installer#2.2.0
├── electron-builder#22.13.1
├── electron-devtools-installer#3.2.0
├── electron-fetch#1.7.4
├── electron-rebuild#3.2.3
├── electron#12.2.2
This is my package.json:
{
"name": "asdfasdf",
"version": "1.0.0",
"main": "./dist/main.js",
"preload": "./dist/preload.js",
"scripts": {
"dev": "concurrently --success first \"npm run dev:electron\" \"npm run dev:react\" -k",
"dev:electron": "NODE_ENV=development webpack --config webpack.electron.config.babel.js --mode development && electron .",
"dev:react": "NODE_ENV=development webpack serve --config webpack.react.config.babel.js --mode development",
"build:electron": "NODE_ENV=production webpack --config webpack.electron.config.babel.js --mode production",
"build:react": "NODE_ENV=production webpack --config webpack.react.config.babel.js --mode production",
"build": "npm run build:electron && npm run build:react",
"rebuild": "electron-rebuild -f -w serialport",
"pack": "electron-builder --dir",
"dist": "electron-builder",
"lint": "eslint .",
"format": "prettier --write \"**/*.+(js|jsx|json|yml|yaml|css|md|vue)\""
},
"keywords": [],
"license": "MIT",
"build": {
"files": [
"dist/",
"node_modules/",
"package.json"
],
"productName": "asdfasdf",
"appId": "com.example.app",
"directories": {
"output": "dist"
}
},
"browser": {
"[module-name]": false
},
"devDependencies": {
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"#babel/preset-typescript": "^7.15.0",
"#babel/register": "^7.15.3",
"#types/electron-devtools-installer": "^2.2.0",
"#types/firmata": "^0.19.3",
"#types/node": "^16.11.6",
"#types/plotly.js": "^1.54.16",
"#types/react-plotly.js": "^2.2.4",
"#types/react-router-dom": "^5.3.2",
"#types/regenerator-runtime": "^0.13.0",
"dpdm": "^3.8.0",
"electron": "^11.5.0",
"electron-builder": "^22.13.1",
"electron-devtools-installer": "^3.1.1",
"electron-rebuild": "^3.2.3",
"eslint": "^8.1.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"husky": "^7.0.4",
"ify-loader": "^1.1.0",
"lint-staged": "^11.2.6",
"prettier": "^2.4.1",
"react-router-dom": "^5.3.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.4.0"
},
"dependencies": {
"#babel/core": "^7.15.8",
"#serialport/bindings": "^9.2.4",
"#types/johnny-five": "^1.3.1",
"#types/react": "^17.0.33",
"#types/react-dom": "^17.0.10",
"axios": "^0.24.0",
"babel-loader": "^8.2.3",
"bindings": "^1.5.0",
"bootstrap": "^5.1.3",
"concurrently": "^6.3.0",
"core-js": "^3.19.0",
"css-loader": "^6.5.0",
"electron-fetch": "^1.7.4",
"firmata": "^2.3.0",
"ini": "^2.0.0",
"johnny-five": "^2.1.0",
"jquery": "^3.5.1",
"node-gyp": "^8.3.0",
"nodebots-interchange": "^2.1.3",
"plotly.js": "^2.5.1",
"react": "^17.0.1",
"react-bootstrap": "^2.0.0",
"react-dom": "^17.0.1",
"react-google-login": "^5.2.2",
"react-icons": "^4.3.1",
"react-plotly.js": "^2.5.1",
"serialport": "^9.2.4",
"style-loader": "^3.3.1"
},
"husky": {
"hooks": {
"pre-commit": "npm run lint && npm run format"
}
},
"lint-staged": {
"*.+(js|jsx)": "eslint --fix",
"*.+(json|css|md)": "prettier --write"
}
}
I also have these two Webpack config files:
webpack.electron.config.babel.js
import { resolve as _resolve } from "path";
export const resolve = {
extensions: [".tsx", ".ts", ".js"],
};
export const devtool = "source-map";
export const entry = {
main: {
import: "./electron/main.ts",
dependOn: "preload",
},
preload: "./electron/preload.ts",
};
export const output = {
path: _resolve(__dirname, "dist"),
filename: "[name].js",
};
export const target = "electron-main";
export const module = {
rules: [
{
test: /\.(js|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
};
And webpack.react.config.babel.js:
import { resolve as _resolve } from "path";
import HtmlWebpackPlugin from "html-webpack-plugin";
export const resolve = {
extensions: [".tsx", ".ts", ".js"],
mainFields: ["main", "module", "browser"],
};
export const entry = "./src/App.tsx";
export const target = "electron-renderer";
export const devtool = "source-map";
export const module = {
rules: [
{
test: /\.(js|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|jp(e*)g|svg|gif)$/,
use: [
{
loader: "file-loader",
options: {
name: "images/[hash]-[name].[ext]",
},
},
],
},
],
};
export const devServer = {
historyApiFallback: true,
compress: true,
hot: true,
port: 4000,
devMiddleware: {
publicPath: "/",
}
};
export const output = {
path: _resolve(__dirname, "dist"),
filename: "js/[name].js",
};
export const plugins = [new HtmlWebpackPlugin()];
I'm using the latest LTS version of Node (16.13.0) if that's of any help.
The code that's breaking is from a file which I didn't manually generate so I doubt it's of any use but here's jsonp chunk loading (global is undefined):
global["webpackHotUpdatebiomech"] = (chunkId, moreModules, runtime) => {
for(var moduleId in moreModules) {
if(__webpack_require__.o(moreModules, moduleId)) {
currentUpdate[moduleId] = moreModules[moduleId];
if(currentUpdatedModulesList) currentUpdatedModulesList.push(moduleId);
}
}
if(runtime) currentUpdateRuntime.push(runtime);
if(waitingUpdateResolves[chunkId]) {
waitingUpdateResolves[chunkId]();
waitingUpdateResolves[chunkId] = undefined;
}
};

Adding <script>var global = global || window;</script> to your index.html file will resolve the issue. I tried to remove it and am getting the same error you are.

Don't use context isolation ( I agree with the Electron team's rationale for contextIsolation: true, IF you EVER plan to load 3rd party websites or even your own website that has 3rd party javascript running, as they could access your IPC calls ). However if you treat the app as a secure app and never load third party websites or scripts, then it's fine to turn off.
If you still want to go ahead, modify the next.config.js:
if (!isServer) {
config.target = 'electron-renderer';
config.node = {
__dirname: true,
};
}
config.output.globalObject = 'this';

All the npm packages get uninstalled when installing a new package, react js application

I am using a typescript-based start kit for my reactjs application. But, the problem is, everytime that I install a new npm package, all other previous packages (apparently) get uninstalled since I get an error of "failed to load module ..." and I have to install them again. I really appreciate any help. Here is my webpack config:
const {resolve} = require('path');
const {CheckerPlugin} = require('awesome-typescript-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
},
context: resolve(__dirname, '../../src'),
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader', 'source-map-loader'],
exclude: /node_modules/,
},
{
test: /\.tsx?$/,
use: ['babel-loader', 'awesome-typescript-loader'],
},
{
test: /\.css$/,
use: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, {
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['autoprefixer']
}
}
}],
},
{
test: /\.(scss|sass)$/,
loaders: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
'sass-loader',
],
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=img/[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
],
},
],
},
devServer: {
historyApiFallback: true,
},
plugins: [
new CheckerPlugin(),
new HtmlWebpackPlugin({template: 'index.html.ejs',}),
],
externals: {
'react': 'React',
'react-dom': 'ReactDOM',
},
performance: {
hints: false,
},
};
and here is the config for development mode:
const merge = require('webpack-merge');
const webpack = require('webpack');
const commonConfig = require('./common');
module.exports = merge(commonConfig, {
mode: 'development',
entry: [
'react-hot-loader/patch', // activate HMR for React
'webpack-dev-server/client?http://localhost:8080',// bundle the client for webpack-dev-server and connect to the provided endpoint
'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
'./index.tsx' // the entry point of our app
],
devServer: {
hot: true, // enable HMR on the server
},
devtool: 'cheap-module-eval-source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(), // enable HMR globally
],
});
and package.json file:
"name": "react-webpack-typescript-starter",
"version": "0.1.0",
"description": "Starter kit for React, Webpack (with Hot Module Replacement), Typescript and Babel.",
"keywords": [
"react",
"webpack",
"typescript",
"babel",
"sass",
"hmr",
"starter",
"boilerplate"
],
"author": "Viktor Persson",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/vikpe/react-webpack-typescript-starter.git"
},
"bugs": {
"url": "https://github.com/vikpe/react-webpack-typescript-starter/issues"
},
"homepage": "https://github.com/vikpe/react-webpack-typescript-starter",
"scripts": {
"build": "yarn run build:css clean-dist && webpack -p --config=configs/webpack/prod.js",
"clean-dist": "rimraf dist/*",
"lint": "eslint './src/**/*.{js,ts,tsx}' --quiet",
"start": "yarn run start-dev ",
"start-dev": "webpack-dev-server --config=configs/webpack/dev.js",
"start-prod": "yarn run build && node express.js",
"test": "jest --coverage --watchAll --config=configs/jest.json",
"build:css": "postcss src/styles/tailwind.css -o src/styles/global.css",
"watch:css": "postcss src/styles/tailwind.css -o src/styles/global.css"
},
"devDependencies": {
"#babel/cli": "^7.10.5",
"#babel/core": "^7.10.5",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"#types/jest": "^26.0.5",
"#types/node": "^14.11.10",
"#types/react": "^16.9.43",
"#types/react-dom": "^16.9.8",
"#typescript-eslint/eslint-plugin": "^3.6.1",
"#typescript-eslint/parser": "^3.6.1",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.1.0",
"css-loader": "^3.6.0",
"eslint": "^7.5.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.20.3",
"express": "^4.17.1",
"file-loader": "^6.0.0",
"html-webpack-plugin": "^4.3.0",
"image-webpack-loader": "^6.0.0",
"jest": "^26.1.0",
"node-sass": "^4.14.1",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-hot-loader": "^4.12.21",
"rimraf": "^3.0.2",
"sass-loader": "^9.0.2",
"style-loader": "^1.2.1",
"typescript": "^3.9.7",
"uglifyjs-webpack-plugin": "^2.2.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.2.2"
},
"dependencies": {
"#nivo/line": "^0.63.1",
"#welldone-software/why-did-you-render": "^5.0.0-rc.1",
"autoprefixer": "^10.0.1",
"axios": "^0.20.0",
"postcss": "^8.1.1",
"postcss-cli": "^8.0.0",
"postcss-loader": "^4.0.3",
"purgecss": "^3.0.0",
"react-date-range": "^1.1.3",
"react-datepicker": "^3.3.0",
"react-hook-form": "^6.9.4",
"react-router-dom": "^5.2.0",
"react-select": "^3.1.0",
"react-toastify": "^6.0.9",
"styled-components": "^5.2.0",
"tailwindcss": "^1.8.11"
}
}

Webpack production mode does not minify js file

I created react app with by initializing webpack with npm init -y and then modified scripts and webpack config file manually. My file's contents are as below:
package.json
{
"name": "arw.ecahangirov",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch ./frontend/src/index.js --output ./frontend/static/frontend/main.js",
"build": "webpack --mode production ./frontend/src/index.js --output ./static/frontend/main.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.5.5",
"#babel/preset-env": "^7.5.5",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"css-loader": "^3.2.0",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"uglifyjs-webpack-plugin": "^2.2.0",
"weak-key": "^1.0.1",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
},
"dependencies": {
"axios": "^0.19.0",
"materialize-css": "^1.0.0-rc.2",
"moment": "^2.24.0",
"style-loader": "^1.0.0"
}
}
webpack.config.js
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: {
extensions: [".js", ".jsx", ".css"]
},
optimization: {
minimizer: [
new UglifyJsPlugin({
include: /\.js$/
})
]
}
};
Problem is that, when I run npm run build, webpack does not minify main.js file which is output. It results with 716kb file size and by opening output file I observe that file is multilined and also contains comments. Why webpack does not care of minifiying in this case, although I started it with --mode production?

You have to specify a minifier for css.
Load this at top of your webpack config file
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
To the rules block:
rules: [
//...
{
test: /\.(sa|sc|c)ss$/,
use: [{loader: MiniCssExtractPlugin.loader},
'css-loader',
'postcss-loader',
'sass-loader',
],
},
//...
]
To the optimization block:
optimization: {
minimizer: new OptimizeCSSAssetsPlugin({})
}
To the plugins block:
plugins: [
//...
new MiniCssExtractPlugin({
filename: [name].[hash].css',
chunkFilename: '[id].[hash].css',
}),
//...
]
You will need to load that plugins first
npm install --save-dev mini-css-extract-plugin
npm install --save-dev optimize-css-assets-webpack-plugin
You can find a working config here

Unexpected token import webpack babel es2015

I have visited hundred webpages but couldn't find solution which fits me. I'm using webpack babel but have error "Unexpected token import" when i try to import express:
.babelrc:
{
"moduleId": "myModule",
"presets": ["es2015", "stage-0"],
"plugins": ["add-module-exports"]
}
webpack.config.js:
const path = require('path');
const webpack = require("webpack");
const ExtractTextPlugin=require("extract-text-webpack-plugin");
module.exports = {
context:__dirname + '/front',
entry:__dirname + '/front/index.js',
output:{
path:__dirname + '/public/assets',
filename:'bundle.js',
publicPath:'assets'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules')
},
plugins:[
new webpack.DefinePlugin({
TEST_ENV:process.env.NODE_ENV === "test"
}),
new ExtractTextPlugin("bundle.css",
{
publicPath: 'assets/core/css',
allChunks: true
})
],
module: {
loaders: [
{
test: /\.js/,
loader: "babel-loader",
exclude: /(node_modules|bower_components)/,
query: {
presets: ['es2015']}
},
{
test: /\.html/,
loader: "raw-loader"},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader?browsers=last 3 version")
},
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!autoprefixer-loader?browsers=last 3 version!sass-loader")
}
]
},
devServer: {
port: 7000,
},
devtool: 'source-map',
}
package.json:
{
"name": "SA-19KV",
"version": "1.0.0",
"description": "Project Boilerplate",
"scripts": {
"ngdev": "webpack-dev-server --content-base public/ --progress --colors ",
"nghot": "webpack-dev-server --content-base public/ --progress --colors --inline --hot",
"test": "set NODE_ENV=test && karma start",
"prod": "webpack -p",
"backdev": "nodemon server.js --watch back/"
},
"dependencies": {
"angular": "1.5.0",
"css-loader": "^0.26.1",
"express": "^4.14.1",
"style-loader": "^0.13.1"
},
"devDependencies": {
"angular-mocks": "^1.6.1",
"autoprefixer-loader": "^3.2.0",
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-preset-es2015": "^6.22.0",
"babel-preset-stage-0": "^6.5.0",
"chai": "^3.5.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^1.0.1",
"html-webpack-plugin": "1.6.1",
"karma": "^1.4.1",
"karma-chai": "^0.1.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-html-detailed-reporter": "^1.1.15",
"karma-mocha": "^1.3.0",
"karma-webpack": "^2.0.2",
"mocha": "^3.2.0",
"node-sass": "^4.4.0",
"nodemon": "^1.11.0",
"raw-loader": "^0.5.1",
"sass-loader": "^4.1.1",
"style-loader": "^0.13.1",
"webpack": "^1.14.0",
"webpack-dev-server": "1.14.1"
},
"author": "Me :-)",
"license": "ISC"
}

Your package.json scripts aren't loading your webpack's config. You can load it by adding the --config parameter:
webpack-dev-server --config ./webpack.config.js

Webpack ExtractTextPlugin with boostrap-sass

I am using bootstrap sass and extract text-plugin to output the compiled css into a file. It works perfectly if I don't import bootstrap inside my style.scss, but when I import bootstrap webpack can't resolve the font paths. It looks for bootstrap fonts in my src folder instead of the /node_modules/bootstrap-sass/
Module not found: Error: Cannot resolve 'file' or 'directory' ../fonts/bootstrap/glyphicons-halflings-regular.svg in /Users/yasinyaqoobi/Sites/dari-dictionary-api/src/assets/sass
#import "~bootstrap-sass/assets/stylesheets/bootstrap";
package.json
{
"name": "dari-dictionary-api",
"version": "1.0.0",
"description": "Dari Dictionary API built with express.js for the Android App.",
"main": "dist",
"scripts": {
"dev": "nodemon --ignore src/assets -w src --exec \"babel-node src --presets es2015,stage-0\"",
"build": "babel src -s -D -d dist --presets es2015,stage-0",
"start": "node dist",
"prestart": "npm run -s build",
"test": "eslint src",
"watch": "webpack --display-error-details --config webpack.config.js --watch"
},
"repository": {
"type": "git",
"url": ""
},
"author": "Yasin Yaqoobi",
"license": "MIT",
"dependencies": {
"body-parser": "^1.13.3",
"bootstrap-sass": "^3.3.7",
"compression": "^1.5.2",
"cors": "^2.7.1",
"express": "^4.13.3",
"nunjucks": "^3.0.0",
"path": "^0.12.7"
},
"devDependencies": {
"babel-cli": "^6.9.0",
"babel-core": "^6.20.0",
"babel-loader": "^6.2.9",
"babel-plugin-transform-runtime": "^6.15.0",
"babel-polyfill": "^6.20.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-latest": "^6.16.0",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.20.0",
"css-loader": "^0.26.1",
"eslint": "^3.1.1",
"express-winston": "^2.0.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"node-sass": "^4.0.0",
"nodemon": "^1.9.2",
"sass-loader": "^4.0.2",
"sqlite3": "^3.1.8",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7",
"webpack": "^1.14.0",
"winston": "^2.3.0"
}
}
webpack.config.js
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('public/css/style.css');
module.exports = {
entry: path.resolve(__dirname, 'src/assets/js'),
output: {
filename: 'public/js/index.js',
},
devtool: "source-map",
module: {
loaders: [{
loader: "babel-loader",
// Skip any files outside of your project's `src` directory
exclude: /node_modules/,
// Only run `.js` and `.jsx` files through Babel
test: /\.jsx?$/,
// Options to configure babel with
query: {
plugins: ['transform-runtime'],
presets: ['es2015', 'stage-0'],
}
},
{ test: /\.scss$/i, loader: extractCSS.extract(['css', 'sass']) },
{ test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/
, loader: 'url?limit=100000&name=[name].[ext]'
}
]
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({ // Make jquery available globally
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
}),
],
debug: true,
}