javascript - Issue in setting multiple targets in webpack configuration for electron app

Question

In the webpack docs : https://webpack.js.org/configuration/target/ we see that for electron-renderer, electron-main and electron-preload there are specific webpack target, and till now, I've been using 'electron-renderer' as target.

Today I've been trying to use a lib, specifically libp2p, which, I realized, works with electron only if the target in webpack.renderer.js is set to 'web'.

webpack.renderer.js :

/* eslint-disable @typescript-eslint/no-var-requires */
const rules = require('./webpack.rules');
const plugins = require('./webpack.plugins');
const aliases = require('./webpack.aliases');

module.exports = {
  // https://github.com/electron/electron/issues/9920
  //target: 'electron-renderer',
  target: 'web',
  module: {
    rules,
  },
  plugins: plugins,
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
    alias: {
      // React Hot Loader Patch
      'react-dom': '@hot-loader/react-dom',
      // Custom Aliases
      ...aliases,
    },
  },
};

Here: https://webpack.js.org/concepts/targets/#multiple-targets we read "Although webpack does not support multiple strings being passed into the target property, you can create an isomorphic library by bundling two separate configuration".

So... I tried to set two separate configurations, and then bundle them in this way :

const rules = require('./webpack.rules');
const plugins = require('./webpack.plugins');
const aliases = require('./webpack.aliases');

const electronConfig = {
  target: 'electron-renderer',
  module: {
    rules,
  },
  plugins: plugins,
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
    alias: {
      // React Hot Loader Patch
      'react-dom': '@hot-loader/react-dom',
      // Custom Aliases
      ...aliases,
    },
  },
}

const webConfig = {
  target: 'web',
  module: {
    rules,
  },
  plugins: plugins,
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.css'],
    alias: {
      // React Hot Loader Patch
      'react-dom': '@hot-loader/react-dom',
      // Custom Aliases
      ...aliases,
    },
  },
}

module.exports = [ electronConfig, webConfig ];

But got this error:

yarn run v1.22.5
$ cross-env NODE_ENV=development electron-forge start
? Checking your system
? Locating Application
? Preparing native dependencies: 1 / 1
? Compiling Main Process Code
? Launch Dev Servers

An unhandled error has occurred inside Forge:
Invalid configuration object. Webpack has been initialised using a configuration object that
does not match the API schema.
 - configuration has an unknown property '1'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, 
externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, 
output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, 
recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?,
 watchOptions? }
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in 
configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to
 the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
     // test: /.xxx$/, // may apply this only for some modules
       options: {
         1: …
       }
     })
   ]
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised
 using a configuration object that does not match the API schema.
 - configuration has an unknown property '1'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, 
externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?,
output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, 
recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?,
 watchOptions? }
   For typos: please correct them.
   For loader options: webpack >= v2.0.0 no longer allows custom properties in 
configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to 
the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /.xxx$/, // may apply this only for some modules
         options: {
           1: …
         }
       })
     ]
    at webpack (/home/marco/webMatters/electronMatters/OnlyLibp2p/node_modules/@electron-
forge/plugin-webpack/node_modules/webpack/lib/webpack.js:31:9)
    at /home/marco/webMatters/electronMatters/OnlyLibp2p/node_modules/@electron-
forge/plugin-webpack/src/WebpackPlugin.ts:291:24
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
error Command failed with exit code 1.

So... my questions are:

How to correctly set multiple targets in webpack? What's the problem of using 'web' as single target?

question from:https://stackoverflow.com/questions/65943281/issue-in-setting-multiple-targets-in-webpack-configuration-for-electron-app

Answer 1

Waitting for answers