importing webpack causes fatal exception

[aeneasr]

I used electron-compile (with electron-compilers) a while ago but since electron-builder didn't support it, I had a toolchain that first transpiled JSX using babel and then ran electron from the directory where the transpiled files where at. Now that electron-builder finally supports electron-compile, I wanted to switch back. Unfortunately, using electron-prebuilt-compile, I was unable to start the project.

The error is caused because I am importing webpack 2.x in my electron main thread import webpack from 'webpack'. If I remove the import electron-compile works fine.

I believe that the issue is somewhere in this package, maybe because babel is iterating over node_modules or something?

This is the error I receive:

App threw an error during load
C:\workspace\js\sites-app\node_modules\webpack\lib\WebpackOptionsApply.js:209
                        comment = legacy && modern ? "\n/*\n//@ sourceMappingURL=[url]\n//# sourceMappingURL=node_modules\webpack\lib\[url]\n*\" :
                                                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Invalid or unexpected token
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)
    at Object.require.extensions.(anonymous function) [as .js] (C:\workspace\js\sites-app\node_modules\electron-compile\lib\require-hook.js:75:14)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\workspace\js\sites-app\node_modules\webpack\lib\webpack.js:10:29)
    at Object.<anonymous> (C:\workspace\js\sites-app\node_modules\webpack\lib\webpack.js:121:3)
    at Module._compile (module.js:571:32)
    at Object.require.extensions.(anonymous function) [as .js] (C:\workspace\js\sites-app\node_modules\electron-compile\lib\require-hook.js:75:14)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)

When I inspect the code, I see that there is a small difference. Above, the line escapes the last quote:

comment = legacy && modern ? "\n/*\n//@ sourceMappingURL=[url]\n//# sourceMappingURL=node_modules\webpack\lib\[url]\n*\" :

while in the code, the last quote is not escaped:

comment = legacy && modern ? "\n/*\n//@ sourceMappingURL=[url]\n//# sourceMappingURL=[url]\n*/"

Additionally, it seems like the string node_modules\webpack\lib was injected.

When setting DEBUG=* these are the logs:

$ npm run start:electron | grep WebpackOptionsApply
Fri, 14 Apr 2017 16:20:12 GMT electron-compile:compiler-host Compiling C:\workspace\js\sites-app\app\node_modules\webpack\lib\WebpackOptionsApply.js
Fri, 14 Apr 2017 16:20:12 GMT electron-compile:sanitize-paths Cache miss for cachedRealpath: 'C:\workspace\js\sites-app\app\node_modules\webpack\lib\WebpackOptionsApply.js' => 'C:\workspace\js\sites-app\app\node_modules\webpack\lib\WebpackOptionsApply.js'
Fri, 14 Apr 2017 16:20:12 GMT electron-compile:file-change-cache Cache entry for /node_modules/webpack/lib/WebpackOptionsApply.js: {"ctime":1491859282178,"size":11342,"info":{"hash":"2285a98358d4b0997095fe757b2cfa80ef920276","isMinified":false,"isInNodeModules":tr
ue,"hasSourceMap":false,"isFileBinary":false}}
C:\workspace\js\sites-app\app\node_modules\webpack\lib\WebpackOptionsApply.js:209 # this is the error

This is an upstream to https://github.com/electron/electron-compile/issues/210

[MarshallOfSound]

Please don't raise duplicates cross-repositories. If someone determines the first issue you raised belongs here then the first one should be closed and this should remain. Please choose one to close

[aeneasr]

I wasn't sure if the maintainers are the same :) Sorry for the dupe, I should have referenced an upstream link. I think the issue is caused by electron-compilers as there has to be some transpiling going on for this to happen.

[aeneasr]

Would a reproducible case help here? I really have no idea where to start looking, it seems like electron-compile is doing some fancy directory walking.

[MarshallOfSound]

A repro case always helps :)

This sounds like a Babel issue though. Try running that webpack file through Babel by itself and see if the output is legit or not

[aeneasr]

I did that, the output is legit. However I don't know if maybe this is caused by some sourcemap logic which isnt possible on babeljs.io?

[aeneasr]

I create a reproducible case here: https://github.com/arekkas/electron-compile-webpack-bug

This is the line causing the bug.

[aeneasr]

I'm not so sure if this is really caused by babel/webpack (at least I was not able to reproduce it yet) itself, but rather by this loc. For some reason it looks like that line is being invoked from at Object.<anonymous> (C:\workspace\js\electron-compile-webpack-bug\node_modules\webpack\lib\webpack.js:10:29) (const WebpackOptionsApply = require("./WebpackOptionsApply");).

I also tried transpiling

let legacy, modern
const comment = legacy && modern ? "\n/*\n//@ sourceMappingURL=[url]\n//# sourceMappingURL=[url]\n*/" :
    legacy ? "\n/*\n//@ sourceMappingURL=[url]\n*/" :
        modern ? "\n//# sourceMappingURL=[url]" :
            null;

console.log(comment)

with various babel set ups in the index.js of my app, but it always worked. I then created a new npm package which I called foo and which had only one main.js file with these contents:

const comment = legacy && modern ? "\n/*\n//@ sourceMappingURL=[url]\n//# sourceMappingURL=[url]\n*/" :
    legacy ? "\n/*\n//@ sourceMappingURL=[url]\n*/" :
        modern ? "\n//# sourceMappingURL=[url]" :
            null;

module.exports = comment

and this package json:

{
  "name": "foo",
  "version": "1.0.0",
  "main": "index.js"
}

After importing import 'foo' it into my code, I got the same error!

npm run start

> electron-compile-webpack-bug@1.0.0 start C:\workspace\js\electron-compile-webpack-bug
> electron .

App threw an error during load
C:\workspace\js\electron-compile-webpack-bug\node_modules\foo\index.js:3
const comment = legacy && modern ? "\n/*\n//@ sourceMappingURL=[url]\n//# sourceMappingURL=node_modules\foo\[url]\n*\" :
                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
SyntaxError: Invalid or unexpected token
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)
    at Object.require.extensions.(anonymous function) [as .js] (C:\workspace\js\electron-compile-webpack-bug\node_modules\electron-compile\lib\require-hook.js:75:14)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (C:\workspace\js\electron-compile-webpack-bug\index.js:3:1)
    at Object.<anonymous> (C:\workspace\js\electron-compile-webpack-bug\index.js:73:3)

Notice that it's - again - caused by require-hook callback. Unfortunately I have not figured out yet what it does.

edit:// I think that is the part which is overriden by electron-compilers / babel?

edit:// If the file is not within node_modules, the bug does not appear. I create a new file in the root directory with the same contents as node_modules/foo/index.js but it compiles down without error.

[aeneasr]

I think I found the upstream, it's probably this one: https://github.com/babel/babel/issues/4012

[aeneasr]

Is it possible to passthrough only for some files?

[anaisbetts]

@arekkas Not at the moment. Why do you need to import webpack in your app? That's Odd.

[aeneasr]

I am building a static site generator based on electron and I use webpack in the production bundle to build the site

[anaisbetts]

That makes sense - the Babel bug linked above has a workaround, you probably have to go with that for now, sorry I don't have a good answer :(

[aeneasr]

https://github.com/webpack/webpack/pull/4720