I had a similar problem in react-electron-boilerplate v2.3.0 as shown below:

export 'default' (imported as 'styles') was not found in './styles.css'

At first, I used this approach to include CSS files:

import styles from './Index.css';

But after probing the .erb/configs folder and the webpack.config.renderer.dev.babel.js file, I realised that there are at least two approaches to include css/scss files:

1. One is using the postfix: .global. for example, a file named style.global.css. using this way, you just include the file like import 'style.global.css';
2. The second approach is using module-based importing. just like the above way the community answered before: import styles from './Index.css';

Although the second approach was practical in dev mode, in the production packaging, I got problems and experienced console errors after running the executable app after building and packaging!

So I took a quick look at the webpack.config.renderer.prod.babel.js (the production config) and noticed that this config is pretty different from the dev configurations. and probably it doesn't support the module-based CSS importing!!! I think this could be a flaw in the configs and the electron-react-boilerplate team should pay more attention to this side of the project someday!

Finally, the easiest way I found was changing the prod file: webpack.config.renderer.prod.babel.js

The rules section for CSS part:

{
        test: /\.global\.s?css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // `./dist` can't be inerhited for publicPath for styles. Otherwise generated paths will be ./dist/dist
              publicPath: './',
            },
          },
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /^((?!\.global).)*\.css$/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[name]__[local]__[hash:base64:5]',
              },
              sourceMap: true,
              importLoaders: 1,
            },
          },
        ],
      },

Prerequisites

• [ ] Using npm
• [ ] Using an up-to-date master branch
• [ ] Using latest version of devtools. Check the docs for how to update
• [ ] Tried solutions mentioned in #400
• [ ] For issue in production release, add devtools output of DEBUG_PROD=true yarn build && yarn start

Expected Behavior

Proper installation

Current Behavior

Unresolved dependencies issue

Steps to Reproduce

1. clone the project
2. type npm install

Possible Solution (Not obligatory)

This package only browserslist-config-erb@"^0.0.1" had an issue with dependency.

Context

$ npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: restro-pos@undefined npm ERR! Found: [email protected] npm ERR! node_modules/electron npm ERR! dev electron@"^11.0.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer electron@"^7.0.0" from [email protected] npm ERR! node_modules/browserslist-config-erb npm ERR! dev browserslist-config-erb@"^0.0.1" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\MD\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\MD\AppData\Local\npm-cache_logs\2021-06-19T06_09_46_428Z-debug.log

Your Environment

• Node version : v15.13.0
• electron-react-boilerplate version or branch: Master [email protected]
• Operating System and version: Windows 10
• Link to your project: It's private

Also, I wonder why you guys only support yarn ? Did you think npm is not worthy? :)

Please give the support for npm as well

I got the below error as well

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
  • electron-builder  version=22.10.5
  • loaded configuration  file=package.json ("build" field)
  • installing production dependencies  platform=win32 arch=x64 appDir=C:\Users\MD\Desktop\fleksa-pos\src
  ⨯ C:\Program Files\nodejs\node.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
Output:

Output:

> [email protected] postinstall
> yarn electron-rebuild


Error output:

Error output:
'yarn' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code 1
npm ERR! path C:\Users\MD\Desktop\fleksa-pos\src
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c yarn electron-rebuild

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\MD\AppData\Local\npm-cache\_logs\2021-06-19T06_31_53_043Z-debug.log
  stackTrace=
 
                                      Error: C:\Program Files\nodejs\node.exe exited with code ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
 
                                      Output:

                                      Output:
                                 > [email protected] postinstall

                                      > yarn electron-rebuild

                                 Error output:

                                   Error output:
                                      'yarn' is not recognized as an internal or external command,
                                      operable program or batch file.
                                      npm ERR! code 1

                                      npm ERR! path C:\Users\MD\Desktop\fleksa-pos\src
                                npm ERR! command failed

                                      npm ERR! command C:\Windows\system32\cmd.exe /d /s /c yarn electron-rebuild
                                      npm ERR! A complete log of this run can be found in:
                                      npm ERR!     C:\Users\MD\AppData\Local\npm-cache\_logs\2021-06-19T06_31_53_043Z-debug.log

                                          at ChildProcess.<anonymous> (C:\Users\MD\Desktop\fleksa-pos\node_modules\builder-util\src\util.ts:243:14)

                                         at Object.onceWrapper (node:events:476:26)
                                          at ChildProcess.emit (node:events:369:20)

                                          at maybeClose (node:internal/child_process:1067:16)
                                         at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
npm ERR! code 1
npm ERR! path C:\Users\MD\Desktop\fleksa-pos
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node -r @babel/register .erb/scripts/CheckNativeDep.js && electron-builder install-app-deps && yarn cross-env NODE_ENV=development webpack --config ./.erb/configs/webpack.config.renderer.dev.dll.babel.js && opencollective-postinstall && yarn-deduplicate yarn.lock

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\MD\AppData\Local\npm-cache\_logs\2021-06-19T06_31_53_600Z-debug.log

<!-- Please use the following issue template or your issue will be closed -->

Prerequisites

<!-- If the following boxes are not ALL checked, your issue is likely to be closed -->

• [ ] Using npm
• [ ] Using an up-to-date master branch
• [ ] Using latest version of devtools. Check the docs for how to update
• [ ] Tried solutions mentioned in #400
• [ ] For issue in production release, add devtools output of DEBUG_PROD=true yarn build && yarn start

Expected Behavior

Proper installation <!--- What should have happened? -->

Current Behavior

Unresolved dependencies issue <!--- What went wrong? -->

Steps to Reproduce

<!-- Add relevant code and/or a live example --> <!-- Add stack traces -->

1. clone the project
2. type npm install

Possible Solution (Not obligatory)

This package only browserslist-config-erb@"^0.0.1" had an issue with dependency.

<!--- Suggest a reason for the bug or how to fix it. -->

Context

$ npm install npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: restro-pos@undefined npm ERR! Found: [email protected] npm ERR! node_modules/electron npm ERR! dev electron@"^11.0.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer electron@"^7.0.0" from [email protected] npm ERR! node_modules/browserslist-config-erb npm ERR! dev browserslist-config-erb@"^0.0.1" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\MD\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\MD\AppData\Local\npm-cache_logs\2021-06-19T06_09_46_428Z-debug.log

<!--- How has this issue affected you? What are you trying to accomplish? --> <!--- Did you make any changes to the boilerplate after cloning it? --> <!--- Providing context helps us come up with a solution that is most useful in the real world -->

Your Environment

<!--- Include as many relevant details about the environment you experienced the bug in -->

• Node version : v15.13.0
• electron-react-boilerplate version or branch: Master [email protected]
• Operating System and version: Windows 10
• Link to your project: It's private

<!--- ❗️❗️ Also, please consider donating (https://opencollective.com/electron-react-boilerplate-594) ❗️❗️

Donations will ensure the following:

🔨 Long term maintenance of the project 🛣 Progress on the roadmap 🐛 Quick responses to bug reports and help requests -->

Summary

<!-- What do you need help with? -->

I see the project has eslint-plugin-react-hooks and other plugins, but i don't understand how those are used if not imported in the .eslintrc file?

<!--- ❗️❗️ Also, please consider donating (https://opencollective.com/electron-react-boilerplate-594) ❗️❗️

Donations will ensure the following:

🔨 Long term maintenance of the project 🛣 Progress on the roadmap 🐛 Quick responses to bug reports and help requests -->

I believe it's part of the "erb" that .eslintrc.js extends: https://github.com/electron-react-boilerplate/eslint-config-erb

thank you! you're right 👍

Summary

Is there an easy way to disable Prettier? I can't deal with its constant harping. I don't necessarily want to disable eslint, but they seem to be integrated.

I believe it's part of the "erb" that .eslintrc.js extends: https://github.com/electron-react-boilerplate/eslint-config-erb

I think at this point you're better off using

https://www.electronforge.io

It's an all-in-one package like react create app that also includes hot reloading.

@amilajack Can we get this feature in v3.0.0, any chances?

Summary

I am running my app from the command line and want to pass command-line arguments in production build as well as when I am running the app in dev mode.

Is there a way to achieve this in the current boilerplate?

Thanks.

I got it work.

I had to update yarn and npm and do a fresh clone of the repo.

I have an same issue. npm, yarn didn't work for me.

Node : 16.3.0 OS: Big Sur 11.4(sillicon Mac)

@amilajack Hi, I would love to see this PR get merged as soon as possible. I'm not a pro JS developer, but is there a way to help out with closing out the remaining items? (I see 3 things under "testing", but it's not clear what each item entails in terms of work needed or its "definition of done")

Seems like this has been an issue for a while.

npm, pnpm, and yarn did not work for me.

Node: 14.17 Fedora 33

<!--- ❗️❗️ Also, please consider donating (https://opencollective.com/electron-react-boilerplate-594) ❗️❗️

Donations will ensure the following:

🔨 Long term maintenance of the project 🛣 Progress on the roadmap 🐛 Quick responses to bug reports and help requests --> As a url in this boilerplate corresponds to a file, using HashRouter seems more favourable over BrowserRouter in App.tsx

If I were to use the exact attribute in a route inside BrowserRouter

    <BrowserRouter>
      <Route exact path="/settings" component={Settings} />
      <Route exact path="/" component={HomePage} />
    </BrowserRouter>

then it wouldn't render either of the routes because the actual url would correspond to a file (ie: src/index.html#/)

whereas the same would work with the exact attrib if we were using HashRouter

    <HashRouter>
      <Route exact path="/settings" component={Settings} />
      <Route exact path="/" component={HomePage} />
    </HashRouter>

I used yarn and it worked

I am having the same issue

@guillemsola It affects Linux (Ubuntu 20.04) users, so I guess it affects Mac users too. I was surprised too when I found out that the issue was closed without solution.

I'm glad my fix worked for you!

Summary

I'm new to React and I'm trying out React with Electron with this boilerplate. In React (create-react-app) when I put import App.css at the top of the code the styles from the CSS file get imported

but in this boilerplate import ./App.css

import ./App.global.css

How do I fix? (I may have deleted some files to clean up the workspace, but nothing in the .erb folder.

(Sorry if this is a bad question with an obvious fix by the way)

Edit: yes, i did rename the css files

hello, i have updated my electron-react-boilerplate version recently, but when i run yarn start, and edit a source file, the console will print Compiling... and Compiled successfully in loop , like this :

i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling...

i chaged webpack config, but just add a less-loader, and a url-loader, the same config in the electron-react-boilerplate ( just template, not add any code) does not exist this problem

this is a old old issue, see https://github.com/webpack/watchpack/issues/25 add webpack-mild-compile plugin (https://github.com/yessky/webpack-mild-compile) works for me

Hi, I was wondering why this has been closed with no solution

I'm on Windows and I was not able to make debug work for until I put this.

"runtimeArgs": ["start:main", "--inspect=5858", "--remote-debugging-port=9223"],

Maybe this is not affecting those who are on Mac?

npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: electron-react-boilerplate@undefined npm ERR! Found: [email protected] npm ERR! node_modules/electron npm ERR! dev electron@"^11.0.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer electron@"^7.0.0" from [email protected] npm ERR! node_modules/browserslist-config-erb npm ERR! dev browserslist-config-erb@"^0.0.1" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\QWERTY\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\QWERTY\AppData\Local\npm-cache_logs\2021-06-13T09_15_21_518Z-debug.log

hello, i have updated my electron-react-boilerplate version recently, but when i run yarn start, and edit a source file, the console will print Compiling... and Compiled successfully in loop , like this :

i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling... i ｢wdm｣: Compiled successfully. i ｢wdm｣: Compiling...

i chaged webpack config, but just add a less-loader, and a url-loader, the same config in the electron-react-boilerplate ( just template, not add any code) does not exist this problem

Lol just saw that some upgrades were being implemented in PR #2875 (I didn't realize there was that much complication involved in upgrading the boilerplate). I'll see how that pans out (though an upgrade to v13 still is relevant)

Fixed, thanks for the callout!

Adding on from my last comment I managed to achieve this via these commit diffs. The webpack config for the preload the addition of build:preload the addition of preload in the start process

Keep in mind I haven't bothered working this out for production builds yet, but it's a start.

In my mind simply doing "build:preload": "yarn tsc ./src/main/preload.ts",

feels like it's simply not accounting for a variety of different use cases. I'd suggest implementing a new build config like I have done and adding that in.

Summary

Hi, thanks for creating this awesome boilerplate! I am trying it now for the first time, but I just realized that it is still using the older electron v11 rather than the newer electron v13 which has been adopted by the electron-quick-start-typescript repo. Can we update the boilerplate to use electron v13? (Or if there's something preventing us from doing it, what is the reason?)

<!--- ❗️❗️ Also, please consider donating (https://opencollective.com/electron-react-boilerplate-594) ❗️❗️

Donations will ensure the following:

🔨 Long term maintenance of the project 🛣 Progress on the roadmap 🐛 Quick responses to bug reports and help requests -->

I was also experiencing the same problem. Thanks to @CharukaHS 's solution, I could install and run it successfully.

But I gotta say, after removing the yarn word from the script section of postinstall, and then running the yarn install command, it got installed with success but then after running the yarn start command, I got an error in terminal:

Error when run npm start: Class constructor ServeCommand cannot be invoked without 'new'

But after deleting the whole node_modules folder and then again reinstalling by using the yarn install command, the yarn start command also got fixed and now I can run it with no problem (till now!!!)