Issue with Electron-Forge && Webpack

[raphael10-collab]

In an Electron-Typescript-React app I'm having problems which seem to be related to Webpack / Electron-Forge

I described the issue in the Webpack's Github page : https://github.com/webpack/webpack/issues and in IPFS's GitHub page : ipfs/js-ipfs#3531

An IPFS developer made a thoughrough analysis which I report here:
ipfs/js-ipfs#3531 (comment)

"Starting a new project with npx create-electron-app my-new-app --template=typescript-webpack and added IPFS to it. In main.ts I start an IPFS node, I'm greeted with:

Error: Module build failed (from ./node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js):
SyntaxError: Unexpected token (85:14)
at Object.module.exports.pp$4.raise (/Users/alex/Documents/Workspaces/achingbrain/ipfs-electron-forge/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:20834:13)
// some lines omitted
at Object.parseExprAtom (/Users/alex/Documents/Workspaces/achingbrain/ipfs-electron-forge/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:4551:117)
at Object../node_modules/fs-extra/lib/mkdirs/make-dir.js (/Users/alex/Documents/Workspaces/achingbrain/ipfs-electron-forge/.webpack/main/index.js:76966:7)
at webpack_require (/Users/alex/Documents/Workspaces/achingbrain/ipfs-electron-forge/.webpack/main/index.js:21:30)
at Object../node_modules/fs-extra/lib/mkdirs/index.js (/Users/alex/Documents/Workspaces/achingbrain/ipfs-electron-forge/.webpack/main/index.js:76943:44)
at webpack_require (/Users/alex/Documents/Workspaces/achingbrain/ipfs-electron-forge/.webpack/main/index.js:21:30)
at Object../node_modules/fs-extra/lib/copy-sync/copy-sync.js (/Users/alex/Documents/Workspaces/achingbrain/ipfs-electron-forge/.webpack/main/index.js:75881:20)
at webpack_require (/Users/alex/Documents/Workspaces/achingbrain/ipfs-electron-forge/.webpack/main/index.js:21:30)
at Object../node_modules/fs-extra/lib/copy-sync/index.js (/Users/alex/Documents/Workspaces/achingbrain/ipfs-electron-forge/.webpack/main/index.js:76058:13)
at webpack_require (/Users/alex/Documents/Workspaces/achingbrain/ipfs-electron-forge/.webpack/main/index.js:21:30)
at Object../node_modules/fs-extra/lib/index.js (/Users/alex/Documents/Workspaces/achingbrain/ipfs-electron-forge/.webpack/main/index.js:76809:6)
at webpack_require (/Users/alex/Documents/Workspaces/achingbrain/ipfs-electron-forge/.webpack/main/index.js:21:30)

If I click through the stack trace, eventually in /Users/alex/Documents/Workspaces/achingbrain/ipfs-electron-forge/.webpack/main/index.js on line 76966 I find:

// "./node_modules/fs-extra/lib/mkdirs/make-dir.js":
/!!
! ./node_modules/fs-extra/lib/mkdirs/make-dir.js !
**/
/! no static exports found /
// (function(module, exports) {

throw new Error("Module build failed (from ./node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js):\nSyntaxError: Unexpected token (85:14)\n at Object.module.exports.pp$4.raise (/Users/alex/Documents/Workspaces/achingbrain/ipfs-electron-forge/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:20834:13)\n at Object.module.exports.pp.unexpected (/Users/alex/Documents/Workspaces/achingbrain/ipfs-electron-forge/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:18680:8)\n at Object.module.exports.pp$1.parseTryStatement (/Users/alex/Documents/Workspaces/achingbrain/ipfs-electron-forge/node_modules/@marshallofsound/webpack-asset-relocator-loader/dist/index.js:19069:49)\n at Object.module.exports.pp$1.parseStatement snip");

The error being thrown contains the stack trace that's printed out when I npm start the project.

So ./node_modules/fs-extra/lib/mkdirs/make-dir.js has a syntax error on line 85. Looking at line 85 of make-dir.js at v9.10, it's using Optional Catch Binding, which appears in ECMAScript2019. ECMAScript2019 is otherwise known as ES10

@marshallofsound/webpack-asset-relocator-loader contains an JavaScript AST parser and is a fork of @vercel/webpack-asset-relocator-loader - the fork is now very out of date. It looks like the fork should be able to support ES10 but it defaults to ES9 and doesn't seem to expose an option to change that. If I change the default in the generated source it crashes somewhere else so it's ES10 support may not be fully implemented, I don't know.

The upstream version supports ES2020 so likely would understand the Optional Catch Binding syntax.

So your options are:

Stop using webpack
Convince the maintainer of @marshallofsound/webpack-asset-relocator-loader to update their fork and re-apply their patch if it's still necessary

"

Electron: v 11
node : v 14
O.S. : Ubuntu 18.04.4 Desktop

[hibearpanda]

This is a pretty serious issue - I'm unable to use certain packages due to this without having to resort to pre-transpiling the packages with babel.

Could we replace that package with original, non-forked package?

[dopry]

@hibearpanda I am using the vercel version on a project with electronforge and the webpack plugin.

{
    test: /\.(m?js|node)$/,
    parser: { amd: false },
    use: {
      loader: '@vercel/webpack-asset-relocator-loader',
      options: {
        outputAssetBase: 'native_modules',
      },
    },
  },

[mcunningham]

Same issues here using pretty much a basic electron-forge typscript starter. @dopry, I tried your solution and switched to the vercel package and still getting errors on build/launch. I am trying to install fs-extra but unable to install and use it because of this. @hibearpanda @raphael10-collab, did you find any other solutions to this?

[hibearpanda]

I haven't tried @dopry's solution yet but fs-extra is exactly what caused me to start looking into this issue... needed fs-extra for auto updater.

[timfish]

The upstream Vercel package works fine in the main process but fails in the renderers due to the following reasons:

• HtmlWebpackPlugin bails when it finds __dirname in the bundle. For some reason the html plugin runs the bundle in a nodejs vm and the context does not contain __dirname.
• __dirname is just completely wrong/useless when running in dev server mode
• Vercel plugin does not cater for multiple entry points so the asset directory is always one dir up from where bundles are loaded from

In this repository I've created a basic forge app which includes a small webpack plugin that intercepts the Vercel plugin code injection and replaces it with code that works.

This is not production ready as it leaves dev file paths in the production bundle but it's a start...

[malept]

Given that Tim has updates in #2154 I'm marking this as a duplicate.

Duplicate of #2154