Electron-react-boilerplate: How to properly set up material-ui with electron-react-boilerplate

[Vasniktel]

See this question: https://stackoverflow.com/questions/60473495/how-to-properly-set-up-material-ui-with-electron-react-boilerplate

[arslanmughal99]

Facing same issue today with @material-ui/core

[arslanmughal99]

This is what i'm getting in devtools when running in production

init.ts:205 TypeError: Cannot use 'in' operator to search for 'ontouchstart' in null at Module../app/index.tsx (C:\Users\arsla\Documents\RANGE BROADCAST\app\dist\renderer.prod.js:2) at n (C:\Users\arsla\Documents\RANGE BROADCAST\app\dist\renderer.prod.js:2) at module.exports../app/app.global.css (C:\Users\arsla\Documents\RANGE BROADCAST\app\dist\renderer.prod.js:2) at Object.<anonymous> (C:\Users\arsla\Documents\RANGE BROADCAST\app\dist\renderer.prod.js:2) at Object.<anonymous> (C:\Users\arsla\Documents\RANGE BROADCAST\app\dist\renderer.prod.js:5) at Module._compile (internal/modules/cjs/loader.js:880) at Object.Module._extensions..js (internal/modules/cjs/loader.js:892) at Module.load (internal/modules/cjs/loader.js:735) at Module._load (internal/modules/cjs/loader.js:648) at Module._load (electron/js2c/asar.js:717)

[Vasniktel]

All right. I guess I've found a temporary solution. :+1: Simply remove the following lines from your main.dev.ts file:

@@ -58,14 +58,9 @@ const createWindow = async () => {
     show: false,
     width: 1024,
     height: 728,
-    webPreferences:
-      process.env.NODE_ENV === 'development' || process.env.E2E_BUILD === 'true'
-        ? {
-            nodeIntegration: true
-          }
-        : {
-            preload: path.join(__dirname, 'dist/renderer.prod.js')
-          }
+    webPreferences: {
+      nodeIntegration: true
+    }
   });

[amilajack]

This is some interesting behavior. It seems like document.documentElement is null inside of a preload script in electron but other API's like document.createElement are supported.

[jurij]

Any benefits for having preload: path.join(__dirname, 'dist/renderer.prod.js') in prod? Facing the same Issue and using nodeIntegration: true as stated by @Vasniktel helps.

[amilajack]

@jurij Good question! The electron security docs explain this well.

[ivanjeremic]

My UI built with MUI is also not working hope of a new release soon.

[amilajack]

@ivanjeremic use this temporary workaround

[dstawinski]

Any update on this issue? As styled-components (I guess it's that lib) seemingly try to access document.documentElement as well.

[pcgpcgpcg]

I also face this problem, change code to "nodeIntegration: true", but when I run "yarn package"
it can't pack my native module to the release, my native module is the "trtc-electron-sdk".

[arslanmughal99]

@pcgpcgpcg what error you are getting when packaging prod release ?

[pcgpcgpcg]

yarn package has no error,but when i run the packaged exe at another computer,the error is:

[pcgpcgpcg]

because i use material ui,so I follow this:@@ -58,14 +58,9 @@ const createWindow = async () => {
show: false,
width: 1024,
height: 728,

• webPreferences:
• process.env.NODE_ENV === 'development' || process.env.E2E_BUILD === 'true'
• ? {
• nodeIntegration: true
• }
• : {
• preload: path.join(__dirname, 'dist/renderer.prod.js')
• }
• webPreferences: {
• nodeIntegration: true
• }
  });

before yarn package

[arslanmughal99]

@pcgpcgpcg Install yarn global add electron-rebuild and then run electron-rebuild in your project directory
After that clean your dist and release folders and run yarn package-YOUR-TARGET again

[pcgpcgpcg]

@pcgpcgpcg Install yarn global add electron-rebuild and then run electron-rebuild in your project directory
After that clean your dist and release folders and run yarn package-YOUR-TARGET again

thank you! I will try and reply the result

[pcgpcgpcg]

@pcgpcgpcg Install yarn global add electron-rebuild and then run electron-rebuild in your project directory
After that clean your dist and release folders and run yarn package-YOUR-TARGET again

this not work . still can't package that native node library

[arslanmughal99]

@pcgpcgpcg can you share your both package.json

[pcgpcgpcg]

{
"name": "rtcoffice2",
"productName": "rtcoffice2",
"version": "1.0.0",
"description": "Electron application boilerplate based on React, React Router, Webpack, React Hot Loader for rapid application development",
"scripts": {
"build": "concurrently \"yarn build-main\" \"yarn build-renderer\"",
"build-dll": "cross-env NODE_ENV=development webpack --config ./configs/webpack.config.renderer.dev.dll.babel.js --colors",
"build-e2e": "cross-env E2E_BUILD=true yarn build",
"build-main": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.main.prod.babel.js --colors",
"build-renderer": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.renderer.prod.babel.js --colors",
"dev": "cross-env START_HOT=1 node -r @babel/register ./internals/scripts/CheckPortInUse.js && cross-env START_HOT=1 yarn start-renderer-dev",
"electron-rebuild": "electron-rebuild --parallel --force --types prod,dev,optional --module-dir app",
"ts": "tsc",
"lint": "cross-env NODE_ENV=development eslint . --cache --ext .js,.jsx,.ts,.tsx",
"lint-fix": "yarn --silent lint --fix; exit 0",
"lint-styles": "stylelint --ignore-path .eslintignore '/.(css|scss)' --syntax scss",
"lint-styles-fix": "yarn --silent lint-styles --fix; exit 0",
"package": "yarn build && electron-builder build --publish never",
"package-all": "yarn build && electron-builder build -mwl",
"package-ci": "yarn postinstall && yarn build && electron-builder --publish always",
"package-linux": "yarn build && electron-builder build --linux",
"package-win": "yarn build && electron-builder build --win --ia32",
"postinstall": "node -r @babel/register internals/scripts/CheckNativeDep.js && electron-builder install-app-deps && yarn build-dll && opencollective-postinstall",
"postlint-fix": "prettier --ignore-path .eslintignore --single-quote --write '/.{js,jsx,json,html,css,less,scss,yml}'",
"postlint-styles-fix": "prettier --ignore-path .eslintignore --single-quote --write '/.{css,scss}'",
"preinstall": "node ./internals/scripts/CheckYarn.js",
"prestart": "yarn build",
"start": "cross-env NODE_ENV=production electron ./app/main.prod.js",
"start-main-dev": "cross-env START_HOT=1 NODE_ENV=development electron -r ./internals/scripts/BabelRegister ./app/main.dev.ts",
"start-renderer-dev": "cross-env NODE_ENV=development webpack-dev-server --config configs/webpack.config.renderer.dev.babel.js",
"test": "cross-env NODE_ENV=test BABEL_DISABLE_CACHE=1 jest",
"test-all": "yarn lint && yarn ts && yarn build && yarn test && yarn build-e2e && yarn test-e2e",
"test-e2e": "node -r @babel/register ./internals/scripts/CheckBuildsExist.js && cross-env NODE_ENV=test testcafe electron:./app ./test/e2e/HomePage.e2e.ts",
"test-e2e-live": "node -r @babel/register ./internals/scripts/CheckBuildsExist.js && cross-env NODE_ENV=test testcafe --live electron:./app ./test/e2e/HomePage.e2e.ts",
"test-watch": "yarn test --watch"
},
"lint-staged": {
".{js,jsx,ts,tsx}": [
"cross-env NODE_ENV=development eslint --cache"
],
"{.json,.{babelrc,eslintrc,prettierrc,stylelintrc}}": [
"prettier --ignore-path .eslintignore --parser json --write"
],
".{css,scss}": [
"stylelint --ignore-path .eslintignore --syntax scss --fix",
"prettier --ignore-path .eslintignore --single-quote --write"
],
".{html,md,yml}": [
"prettier --ignore-path .eslintignore --single-quote --write"
]
},
"build": {
"productName": "rtcoffice2",
"appId": "org.toprtc.rtcoffice2",
"files": [
"dist/",
"node_modules/",
"app.html",
"main.prod.js",
"main.prod.js.map",
"package.json"
],
"dmg": {
"contents": [
{
"x": 130,
"y": 220
},
{
"x": 410,
"y": 220,
"type": "link",
"path": "/Applications"
}
]
},
"win": {
"target": [
"nsis",
"msi"
]
},
"linux": {
"target": [
"deb",
"rpm",
"AppImage"
],
"category": "Development"
},
"directories": {
"buildResources": "resources",
"output": "release"
},
"publish": {
"provider": "github",
"owner": "rtcoffice",
"repo": "rtcoffice",
"private": false
}
},
"repository": {
"type": "git",
"url": "git+https://github.com/electron-react-boilerplate/electron-react-boilerplate.git"
},
"author": {
"name": "Electron React Boilerplate Maintainers",
"email": "[email protected]",
"url": "https://electron-react-boilerplate.js.org"
},
"contributors": [
{
"name": "Vikram Rangaraj",
"email": "[email protected]",
"url": "https://github.com/vikr01"
},
{
"name": "Amila Welihinda",
"email": "[email protected]",
"url": "https://github.com/amilajack"
}
],
"license": "MIT",
"bugs": {
"url": "https://github.com/electron-react-boilerplate/electron-react-boilerplate/issues"
},
"keywords": [
"electron",
"boilerplate",
"react",
"redux",
"typescript",
"ts",
"sass",
"webpack",
"hot",
"reload"
],
"homepage": "https://github.com/electron-react-boilerplate/electron-react-boilerplate#readme",
"jest": {
"testURL": "http://localhost/",
"moduleNameMapper": {
"\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/internals/mocks/fileMock.js",
"\.(css|less|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"js",
"jsx",
"ts",
"tsx",
"json"
],
"moduleDirectories": [
"node_modules",
"app/node_modules"
],
"setupFiles": [
"./internals/scripts/CheckBuildsExist.js"
]
},
"devDependencies": {
"@babel/core": "^7.8.6",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-decorators": "^7.8.3",
"@babel/plugin-proposal-do-expressions": "^7.8.3",
"@babel/plugin-proposal-export-default-from": "^7.8.3",
"@babel/plugin-proposal-export-namespace-from": "^7.8.3",
"@babel/plugin-proposal-function-bind": "^7.8.3",
"@babel/plugin-proposal-function-sent": "^7.8.3",
"@babel/plugin-proposal-json-strings": "^7.8.3",
"@babel/plugin-proposal-logical-assignment-operators": "^7.8.3",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.8.3",
"@babel/plugin-proposal-numeric-separator": "^7.8.3",
"@babel/plugin-proposal-optional-chaining": "^7.8.3",
"@babel/plugin-proposal-pipeline-operator": "^7.8.3",
"@babel/plugin-proposal-throw-expressions": "^7.8.3",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-import-meta": "^7.8.3",
"@babel/plugin-transform-react-constant-elements": "^7.8.3",
"@babel/plugin-transform-react-inline-elements": "^7.8.3",
"@babel/preset-env": "^7.8.6",
"@babel/preset-react": "^7.8.3",
"@babel/preset-typescript": "^7.8.3",
"@babel/register": "^7.8.6",
"@types/enzyme": "^3.10.5",
"@types/enzyme-adapter-react-16": "^1.0.6",
"@types/history": "^4.7.5",
"@types/jest": "^24.9.1",
"@types/node": "^12",
"@types/react": "^16.9.17",
"@types/react-dom": "^16.9.5",
"@types/react-redux": "^7.1.6",
"@types/react-router": "^5.1.4",
"@types/react-router-dom": "^5.1.3",
"@types/react-test-renderer": "^16.9.2",
"@types/redux-logger": "^3.0.7",
"@types/sinon": "^7.5.1",
"@types/tapable": "^1.0.5",
"@types/vfile-message": "^2.0.0",
"@types/webpack": "^4.41.3",
"@typescript-eslint/eslint-plugin": "^2.17.0",
"@typescript-eslint/parser": "^2.17.0",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.1.0",
"babel-jest": "^25.1.0",
"babel-loader": "^8.0.6",
"babel-plugin-dev-expression": "^0.2.2",
"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
"browserslist-config-erb": "^0.0.1",
"chalk": "^3.0.0",
"concurrently": "^5.0.2",
"cross-env": "^7.0.0",
"cross-spawn": "^7.0.1",
"css-loader": "^3.4.2",
"detect-port": "^1.3.0",
"electron": "7.1.13",
"electron-builder": "^22.3.6",
"electron-devtools-installer": "^2.2.4",
"electron-mocha": "^8.1.2",
"electron-rebuild": "^1.10.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"enzyme-to-json": "^3.4.4",
"eslint": "^6.8.0",
"eslint-config-airbnb-typescript": "^6.3.1",
"eslint-config-erb": "^0.3.0",
"eslint-config-prettier": "^6.9.0",
"eslint-import-resolver-webpack": "^0.12.1",
"eslint-plugin-compat": "^3.5.1",
"eslint-plugin-import": "^2.20.0",
"eslint-plugin-jest": "^23.6.0",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-react": "^7.18.0",
"eslint-plugin-react-hooks": "^2.3.0",
"eslint-plugin-testcafe": "^0.2.1",
"fbjs-scripts": "^1.2.0",
"file-loader": "^5.0.2",
"identity-obj-proxy": "^3.0.0",
"jest": "^25.1.0",
"lint-staged": "^10.0.2",
"mini-css-extract-plugin": "^0.9.0",
"node-loader": "^0.6.0",
"node-sass": "^4.13.1",
"opencollective-postinstall": "^2.0.2",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"prettier": "^1.19.1",
"react-test-renderer": "^16.12.0",
"redux-logger": "^3.0.6",
"rimraf": "^3.0.0",
"sass-loader": "^8.0.2",
"sinon": "^8.1.1",
"spectron": "^10.0.0",
"style-loader": "^1.1.3",
"stylelint": "^13.0.0",
"stylelint-config-prettier": "^8.0.1",
"stylelint-config-standard": "^19.0.0",
"terser-webpack-plugin": "^2.3.2",
"testcafe": "^1.8.0",
"testcafe-browser-provider-electron": "^0.0.14",
"testcafe-react-selectors": "^4.0.0",
"typed-css-modules-webpack-plugin": "^0.1.2",
"typescript": "^3.7.5",
"url-loader": "^3.0.0",
"webpack": "^4.41.5",
"webpack-bundle-analyzer": "^3.6.0",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1",
"webpack-merge": "^4.2.2",
"yarn": "^1.21.1"
},
"dependencies": {
"@fortawesome/fontawesome-free": "^5.12.1",
"@hot-loader/react-dom": "^16.12.0",
"@material-ui/core": "^4.9.5",
"@material-ui/icons": "^4.9.1",
"connected-react-router": "^6.6.1",
"core-js": "^3.6.4",
"devtron": "^1.4.0",
"electron-debug": "^3.0.1",
"electron-log": "^4.0.6",
"electron-store": "^5.1.1",
"electron-updater": "^4.2.0",
"history": "^4.10.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-hot-loader": "^4.12.19",
"react-redux": "^7.1.3",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-virtualized": "^9.21.2",
"recompose": "~0.26.0",
"redux": "^4.0.5",
"redux-saga": "^1.0.0",
"redux-thunk": "^2.3.0",
"source-map-support": "^0.5.16",
"trtc-electron-sdk": "^7.0.149"
},
"devEngines": {
"node": ">=7.x",
"npm": ">=4.x",
"yarn": ">=0.21.3"
},
"collective": {
"url": "https://opencollective.com/electron-react-boilerplate-594"
},
"browserslist": [
"extends browserslist-config-erb"
]
}

[pcgpcgpcg]

my computer is windows 10 pro,I package it by the cmd "yarn package"

[arslanmughal99]

@pcgpcgpcg Your native dependencies trtc-electron-sdk should go into app/package.json instead of root package.json
Read this documentation it tells when to use which package.json

[tkimmm]

Thanks for the workaround tip, it now renders for me, but it appears to me to go against recommended security measures.

It is paramount that you do not enable Node.js integration in any renderer (BrowserWindow, BrowserView, or ) that loads remote content.

Surely this isn't the first time someone is using the Material-UI library to style their application so there must be another way. I wouldn't recommend using this approach in a production deployment.

[pcgpcgpcg]

@pcgpcgpcg Your native dependencies trtc-electron-sdk should go into app/package.json instead of root package.json
Read this documentation it tells when to use which package.json

ok, I will try and reply! Thank you very much!

[bigno]

Hi! I've the same issue that is described in the previous messages.

I currently use Material-UI for styling my application. Do you think that there is the possibility to use Material-UI and at the same time satisfy the "security guide lines" of Electron?

If is not possible, there are some other component/library for apply a Material style to my application?

[nrcrast]

Having the same issue. Would love a fix for this.

[steveetm]

@amilajack Is it really necessary to put the whole renderer process into preload script? I think it should be used only for a thin layer to have some custom apis exposed to renderer, even from main process. I feel like putting everything into preload can have even more undesired side effects.

While this look like a fundamental change I think it should be done and some kind of dummy service should be created in main process to demonstrate the usage. Then that api could be exported via preload script to the renderer process. For example simple ipc communication, but exposing only send and receive, not risking to exposing too much, but still able to do communication.

[OrangeTimes]

Same issue here :-(

[elucca]

Potentially the same issue occurs with react-wordcloud. It manifests the same - can't load the preload script - but I don't know if the root cause is the same.

I'd prefer to find a solution that doesn't involve activating node integration, which seems to be potentially unsafe in a lot of situations.

[murrayju]

The core problem here is that when the preload script executes, document.documentElement is null, and many UI libraries expect it to be defined when they are loaded (in my case, css-vendor via @material-ui/core).

I've found a different workaround, without the security implications of enabling nodeIntegration in production. In app/index.tsx:

@@ -2,7 +2,6 @@ import React, { Fragment } from 'react';
 import { render } from 'react-dom';
 import { AppContainer as ReactHotAppContainer } from 'react-hot-loader';
-import Root from './containers/Root';
 import { history, configuredStore } from './store';
 import './app.global.css';

@@ -10,11 +9,12 @@ const store = configuredStore();

 const AppContainer = process.env.PLAIN_HMR ? Fragment : ReactHotAppContainer;

-document.addEventListener('DOMContentLoaded', () =>
+document.addEventListener('DOMContentLoaded', () => {
+  // eslint-disable-next-line global-require
+  const Root = require('./containers/Root').default;
   render(
     <AppContainer>
       <Root store={store} history={history} />
     </AppContainer>,
     document.getElementById('root'),
-  ),
-);
+  );
+});

In my (somewhat limited) testing, this seems to work rather well. This probably has other tradeoffs (I assume that this affects startup time, though it isn't noticeable to me).

[peterrogov]

@murrayju fix helped me in my app too, had exact same issues with material-ui

[kingpalethe]

this fixed this issue for me! https://github.com/electron-react-boilerplate/electron-react-boilerplate/pull/2503/commits/1d97ac110321288b0068c55ca458e3563b751551