[v6] doesn't work with Webpack 5's DefinePlugin

[Eli-Black-Work]

Preflight Checklist

• I have read the contribution documentation for this project.
• I agree to follow the code of conduct that this project follows, as appropriate.
• I have searched the issue tracker for a bug that matches the one I want to file, without success.

Issue Details

• Electron Forge Version:
  • 6.0.0-beta.54
• Electron Version:
  • v11.3.0
• Operating System:
  • Windows 10
• Last Known Working Electron Forge version::
  • N/A

To Reproduce

I'm using electron-forge v6 with webpack v5.10.2. It looks like v6 doesn't like webpack 5's webpack.DefinePlugin.

My webpack.renderer.config.js looks like this:

module.exports = {
   ...,
   plugins: [
      new webpack.DefinePlugin({
         GLOBALS: JSON.stringify({
            BACKEND_URL: 'http://example.com'
         })
      }
   ]
}

I then use GLOBALS.BACKEND_URL in one of my .js files:

console.log(GLOBALS.BACKEND);

And then when I run yarn electron-forge start, I get this error:

ERROR in ./src/js/components/my_app-ajax.js
Module parse failed: parser.isAsiPosition is not a function
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
TypeError: parser.isAsiPosition is not a function
    at my_app\node_modules\webpack\lib\DefinePlugin.js:308:17
    at SyncBailHook.eval (eval at create (my_app\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:5:16)
    at SyncBailHook.lazyCompileHook (my_app\node_modules\tapable\lib\Hook.js:154:20)
    at Parser.walkIdentifier (my_app\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Parser.js:1986:25)
    at Parser.walkExpression (my_app\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Parser.js:1604:10)
    at Parser.walkMemberExpression (my_app\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Parser.js:1969:8)
    at Parser.walkExpression (my_app\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Parser.js:1610:10)
    at Parser.walkObjectExpression (my_app\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Parser.js:1678:9)
    at Parser.walkExpression (my_app\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Parser.js:1616:10)
    at Parser.walkExpressions (my_app\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Parser.js:1569:10)
    at Parser.walkCallExpression (my_app\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Parser.js:1949:35)
    at Parser.walkExpression (my_app\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Parser.js:1592:10)
    at Parser.walkVariableDeclaration (my_app\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Parser.js:1469:32)
    at Parser.walkStatement (my_app\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Parser.js:997:10)
    at Parser.walkExportNamedDeclaration (my_app\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Parser.js:1349:9)
    at Parser.walkStatement (my_app\node_modules\@electron-forge\plugin-webpack\node_modules\webpack\lib\Parser.js:961:10)

Additional Information

[dopry]

Electron Forge currently only uses webpack 4, not webpack 5... that's why the webpack 5 define plugin doesn't work. You'll need to use V4 Plugins and Loaders.

[Eli-Black-Work]

@dopry Thanks for the reply! 🙂

I thought Electron Forge 6 had support for Webpack 5?

We're currently successfully using Electron Forge 6 with Webpack 5.

[dopry]

Do you have a demo repo of how you got that setup?maybe I was wrong

[dopry]

As far as I can tell, https://github.com/electron-userland/electron-forge/blob/master/packages/plugin/webpack/package.json, still says webpack 4. It looks like upgrading to webpack 5 hasn't been done yet.

[Eli-Black-Work]

@dopry Whoops... looks like you're right! However, we've been using Electron Forge v6 with Webpack 5 for a week or so, now, and it mostly works 🙂 A few things are broken, but so far we've been able to hack around them 😁

Would you like me to open a feature request for Webpack 5 support, or should I just leave this bug open?

I don't have currently have permission from my company to contribute to open source projects, so I'm afraid I can't work on a PR, sorry. However, I'd be happy to post more information about how we're using which pieces of Electron Forge v6 with Webpack 5, if that'd be helpful 🙂

[Eli-Black-Work]

Ah, looks like there's already a PR open for this: #2164

[Eli-Black-Work]

Closing in favor of #2208

[Deliaz]

Is there a recipe how to make DefinePlugin with electron-forge?

My renderer config is the following

const webpack = require('webpack');
module.exports = {
  devtool: 'source-map',
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
  module: {
    rules: require('./rules.js'),
  },
  // The code below is required to make Sentry works
  // https://cesarvarela.com/blog/how-to-configure-sentry-with-electron-forge
  externals: {
    electron: 'commonjs electron',
  },
  plugins: [
    new webpack.DefinePlugin({
      FB_ENV: JSON.stringify(process.env.FB_ENV),
      TEST: JSON.stringify('1'),
    }),
  ],
};

But I cannot get access to env vars in renderer process.

[Eli-Black-Work]

@Deliaz We're using it that way 🙂

var myConfig = {
   test: 'testing'
};

module.exports = {
   .....,
   plugins: [
	new DefinePlugin({
		GLOBALS: JSON.stringify(myConfig)
	}),
   ]
}

I vaguely seem to remember that maybe DefinePlugin only accepts stringified objects, but it looks like you're passing strings to JSON.stringify(), which could be the problem 🙂