App will not run when there are warnings (originally app won't run in dev mode)

[Gum-Joe]

After some investigation involving the original issue, we found that warnings are preventing the application from running. If you solve the warnings, it should work.

Original Issue:

Hello,
When I run ./node_modules/.bin/electron-webpack dev my application does not open. It compiles successfully (albeit with warnings), yet doesn't open the application.

After looking through the debug log there appears to be no trace of launching the application; furthermore, when using the quick start template, the app also failed to launch in dev mode (but launched when a production build was built).

I have tried creating a production build for my project, only to be greeted by:

App threw an error during load
Error: [HMR] Env ELECTRON_HMR_SOCKET_PATH is not set
    at eval (webpack-internal:///./node_modules/electron-webpack/out/electron-main-hmr/main-hmr.js:6:11)
    at Object../node_modules/electron-webpack/out/electron-main-hmr/main-hmr.js (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:3286:1)
    at __webpack_require__ (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:655:30)
    at fn (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:65:20)
    at Object.0 (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:3482:1)
    at __webpack_require__ (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:655:30)
    at D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:701:37
    at Object.<anonymous> (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:704:10)
    at Object.<anonymous> (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:3552:3)
    at Module._compile (module.js:571:32)

Please note that this is my second attempt at webpack in electron after electron-compile stopped working (see electron-userland/electron-compile#287).

Any help will be appreciated & thanks in advanced!

[loopmode]

Hi.
There is a very special behaviour with the warnings.
It actually won't start if there are warnings! Not errors, just warnings.
Once it's started, your're "free" to generate new warnings and the dev-server and app will run happily, displaying warnings.
However, at startup, if there are warnings, it just won't start up.

It's somewhat annoying..but the workaround is: Clean up your warnings, either by fixing code or by easing up the linter settings to not display warnings for your issues (if it's too many to fix).
I personally sometimes did that, adjust my eslintrc file to get started, then reverted the changes via git after the app started once :)

After a while, out team got used to this and we ended up with a "cleaner codebase" as in: do not push with warnings.
(You could set up some extra mechanisms that prevent push to git if there are warnings, but we didn't go for that)

[Gum-Joe]

@loopmode Thanks for the advice - will try fixing warnings, but some (if I remember correctly) are related to bootstrap and other libraries I was using.

[Gum-Joe]

Will close this issue once I get it running

[loopmode]

Yeah maybe you just try to disable the warnings in eslint.
Of course that is no way to seriously work on a project...

I once asked in the slack channel but didn't get a response back then. Should have created an issue here instead :)

loopmode [25. Okt. 2017 um 15:28 Uhr] 
in #webpack
@develar can we make the development server start when there are warnings? As of now, it refuses to start if there is any kind of warning.


2 Antworten
loopmode [vor 3 Monaten] 
We have the situation that a dependency we use ... which ends up in a warning by webpack: ... and the development server doesn't start (bearbeitet)

So.. @develar what are our options for an easy fix?
I guess there is no particular reason for this behaviour and it's rather some side effect of how eslint and webpack/WDS are wired up internally?

[loopmode]

@Gum-Joe I don't think you should close it.
There are situations where a library you depend on will output a (harmless) warning, no matter what you try, and even if everything works perfectly fine for your case, you can't just boot your computer and start working on your project. Instead you have to fiddle around, muting eslint for startup and then enabling it back again.
I think the behaviour should be changed - unless of course there is some benefit we oversee

[Gum-Joe]

@loopmode Probably a better idea - will change the title to "Allow app to run even if warnings are shown" once this is resolved. If I have the time, should I try opening a PR? (Edit: if it's an issue related to how eslint and WDS work then we should probably just file issues on the places they should go)

Of course, we could try:

• removing eslint from the default config and have it added manually (or add a flag, I think electron-webpack does need a bit more cli flexibility). However, this might be a bad idea as it could mean devs end up building code that hasn't been linted (I personally lint in my editor, although this does slow it down)
• Any other suggestions?

Really we need to find what eslint is causing to happen to WDS that causes the code to not run. I think I have managed to get code off WDS when there are warnings - so this might not be the issue,

[loopmode]

@Gum-Joe A PR would be great. Of course we need to pinpoint the problem first.
I'll be looking into this myself as well, so let's cooperate if you like. There is a slack workspace called electron-builder, feel free to join and ping me there, we can share findings.

Doing some research on potential culprits now.

Update: https://github.com/MoOx/eslint-loader#noerrorsplugin and https://github.com/MoOx/eslint-loader#failonwarning-default-false might be related

[Gum-Joe]

@loopmode This might sound like a stupid question, but how do I join the slack workspace (I thought you needed an invite link)? Have not really done this type of thing before.

[loopmode]

@Gum-Joe Try https://slack.com/get-started - you should be able to find and join without an invite

[Gum-Joe]

Thanks @loopmode managed to find if via Google search, but thanks!

[Gum-Joe]

Ok so after some digging around it appears all the warnings are Critical dependency: the request of a dependency is an expression which is a webpack error. Found this in a Google search: webpack/webpack#196

[loopmode]

Exactly the same one I had with the node-dmx library. However, despite of the warning, the library functioned well for us, and curiously enough the yarn dist command runs perfectly and builds the application without problem. I think it's just the webpack development server that refuses to continue. However, I can't find an option that seems to fit the description.. I don't think it's bail.

There are some nitty-gritty details here: webpack/webpack-dev-server#212

The problem, as I see it:

• Dynamic require is a common practice and works perfectly fine in nodejs
• it's trouble for webpack which needs to statically analyze all required file paths
• working in electron, we tend to use all kind of backend node libraries in frontend scenarios
• working with electron and webpack, we run into exactly this issue

Maybe we can configure a webpack context via ContextReplacementPlugin as described here webpack/webpack#2783 ?

[loopmode]

Uh, very promosing! webpack/webpack#196 (comment) -> https://github.com/sindresorhus/require-fool-webpack :)

[Gum-Joe]

Yes! Will use that as a workaround for now! Thank you! Gonna take a while to refactor the code....

The context plugin might not work for me, as the dynamic require paths are set at runtime. For example, I have plugins in my program, so it will be hard to determine a path to exclude.

After my code works, will also have a look at webpack to try and add some sort of ignore line (by my understanding this is one solution). Would this work?

[Gum-Joe]

App now loading, now just to fix its bugs:

 TypeError: requireFoolWebpack is not a function
      at eval (webpack-internal:///./src/renderer/boot/layout.js:103:15)
      at Object../src/renderer/boot/layout.js (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:3334:1)
      at __webpack_require__ (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:655:30)
      at fn (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:65:20)
      at eval (webpack-internal:///./src/renderer/boot/index.js:12:15)
      at Object../src/renderer/boot/index.js (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:3310:1)
      at __webpack_require__ (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:655:30)
      at fn (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:65:20)
      at eval (webpack-internal:///./src/renderer/startup.js:13:13)
      at Object../src/renderer/startup.js (D:\Users\Kishan\Documents\Projects\tara\dist\main\main.js:3422:1)

[Gum-Joe]

Code now runs, will change issue title

[ylg]

Would someone mind giving a sort of status/roll up of this? Seems like the issue's conversation went from eslint warnings breaking app startup in dev mode to write better code to working around specific warning checks related to dynamic dependencies and I'm a bit lost as to whether there's a general purpose workaround yet or not?

We'd just like to be able to keep eslint warnings for minor and temporary things, e.g., TODO comments, and be able to use electron-webpack's dev mode without disabling and reenabling linting so frequently.

[Gum-Joe]

@ylg I personally have not really had the time, although if I do have the time, I will consider taking a look at the eslint side of things. There is no workaround for eslint yet, besides from changing your config or correcting the warnings. For dynamic requires, use https://github.com/sindresorhus/require-fool-webpack.
Also, I think @loopmode though could give a better insight as to what is going on.

Correction: @loopmode has discovered that "https://github.com/MoOx/eslint-loader#noerrorsplugin and https://github.com/MoOx/eslint-loader#failonwarning-default-false might be related", so it should be as simple as changing the default config (hopefully).

[UXDart]

monaco editor package is giving a warning of a not found package... that is ok, because is only for windows. tried adding to eslint-loader {failOnWarning: false, failOnError: false} but anyway it stops and never shows the electron window... how can I solve this? what option I'm missing? TIA

[nicolas-van]

Here we have people reporting two different use cases that I think should be considered individually:

• eslint warnings cause the application to refuse to launch in development: I personally agree with some previous points that were made earlier that "it's boring", because sometimes your purposely put a console.log in your code even if your eslint configuration says you can't and you don't intend to commit the code that way. But I can understand the other point of view, which is that you should keep your code clean at all times. That may be boring if your personal coding style conflicts with that but that's still manageable.

• Webpack warnings cause the application to refuse to launch in development: I think this is much more problematic.

The problem with webpack warning is that they are transitive. Unlike eslint warnings they extend outside the scope of your project and can raise in your dependencies. Even worse they can raise in the dependency of a dependency of a dependency... or your project. That means there may be a potential problem which is practically blocking your work, but only in a random library that you may not even know about, and you'll probably never be able to solve it even by making a pull request in the concerned project because there is 99% chances the maintainers don't use electron-webpack and don't care about supporting it.

In my case I use a very specific library that I can't substitute using another one due to its uniqueness, it's humongous so I can't rewrite it, and it's badly packaged for webpack (but still working correctly). I can't use requireFool because I need to have it compiled using Babel and requireFool bypasses that. And for some strange reason the warnings only raise on Windows, not Linux. I don't even usually develop nor distribute from a Windows machine, this problem is just blocking me when I need to test a specific behavior on a that OS and when I would rather launch the application in development mode than compiling for production.

So... wouldn't it be a good idea to introduce a configuration parameter to electron-webpack like ignoreWarnings ? If you want I can even make a pull request with that feature.

[nicolas-van]

It seems like @loopmode and @almini already worked on this: cf81c8e

Now we just need a release 😄

[nicolas-van]

I opened a new issue to have this fix released: #346

[nicolas-van]

An extremely dirty workaround, but it works:

sed -i 's/data.includes(": Compiled successfully.")/(data.includes(": Compiled successfully.") || data.includes(": Compiled with warnings."))/g' node_modules/electron-webpack/out/dev/WebpackDevServerManager.js

[nicolas-van]

Fixed by release 2.8.0.