Electron-webpack how to change dev for webpack 5.x

Viewed 751

I am running into a problem with the latest version of electron-webpack and webpack 5.x. Apparently, when running electron-webpack dev there is a "modules" field which is invalid and needs to be changed. How can I see and modify the configuration that electron-webpack is using?

Here is the error I am getting:

(base) uri@Mac-mini-de-oriol beat % yarn electron-webpack dev
yarn electron-webpack dev
yarn run v1.22.10
$ /Users/uri/Desktop/beat/node_modules/.bin/electron-webpack dev
ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.optimization has an unknown property 'namedModules'. These properties are valid:
   object { checkWasmTypes?, chunkIds?, concatenateModules?, emitOnErrors?, flagIncludedChunks?, innerGraph?, mangleExports?, mangleWasmImports?, mergeDuplicateChunks?, minimize?, minimizer?, moduleIds?, noEmitOnErrors?, nodeEnv?, portableRecords?, providedExports?, realContentHash?, removeAvailableModules?, removeEmptyChunks?, runtimeChunk?, sideEffects?, splitChunks?, usedExports? }
   -> Enables/Disables integrated optimizations.
   Did you mean optimization.moduleIds: "named" (BREAKING CHANGE since webpack 5)?
    at validate (/Users/uri/Desktop/beat/node_modules/schema-utils/dist/validate.js:104:11)
    at validateSchema (/Users/uri/Desktop/beat/node_modules/webpack/lib/validateSchema.js:79:2)
    at create (/Users/uri/Desktop/beat/node_modules/webpack/lib/webpack.js:100:3)
    at webpack (/Users/uri/Desktop/beat/node_modules/webpack/lib/webpack.js:137:31)
    at f (/Users/uri/Desktop/beat/node_modules/webpack/lib/index.js:37:15)
    at /Users/uri/Desktop/beat/node_modules/electron-webpack/src/dev/dev-runner.ts:90:34
    at new Promise (<anonymous>)
    at DevRunner.startMainCompilation (/Users/uri/Desktop/beat/node_modules/electron-webpack/src/dev/dev-runner.ts:89:11)
    at async Promise.all (index 2)
    at DevRunner.start (/Users/uri/Desktop/beat/node_modules/electron-webpack/src/dev/dev-runner.ts:47:5)
    at main (/Users/uri/Desktop/beat/node_modules/electron-webpack/src/dev/dev-runner.ts:147:3) {
  errors: [
    {
      keyword: 'additionalProperties',
      dataPath: '.optimization',
      schemaPath: '#/additionalProperties',
      params: [Object],
      message: 'should NOT have additional properties',
      schema: false,
      parentSchema: [Object],
      data: [Object]
    }
  ],
  schema: {
    definitions: {
      Amd: [Object],
      AssetGeneratorDataUrl: [Object],
      AssetGeneratorDataUrlFunction: [Object],
      AssetGeneratorDataUrlOptions: [Object],
      AssetGeneratorOptions: [Object],
      AssetInlineGeneratorOptions: [Object],
      AssetModuleFilename: [Object],
      AssetParserDataUrlFunction: [Object],
      AssetParserDataUrlOptions: [Object],
      AssetParserOptions: [Object],
      AssetResourceGeneratorOptions: [Object],
      AuxiliaryComment: [Object],
      Bail: [Object],
      CacheOptions: [Object],
      CacheOptionsNormalized: [Object],
      Charset: [Object],
      ChunkFilename: [Object],
      ChunkFormat: [Object],
      ChunkLoadTimeout: [Object],
      ChunkLoading: [Object],
      ChunkLoadingGlobal: [Object],
      ChunkLoadingType: [Object],
      CompareBeforeEmit: [Object],
      Context: [Object],
      CrossOriginLoading: [Object],
      Dependencies: [Object],
      DevServer: [Object],
      DevTool: [Object],
      DevtoolFallbackModuleFilenameTemplate: [Object],
      DevtoolModuleFilenameTemplate: [Object],
      DevtoolNamespace: [Object],
      EmptyGeneratorOptions: [Object],
      EmptyParserOptions: [Object],
      EnabledChunkLoadingTypes: [Object],
      EnabledLibraryTypes: [Object],
      EnabledWasmLoadingTypes: [Object],
      Entry: [Object],
      EntryDescription: [Object],
      EntryDescriptionNormalized: [Object],
      EntryDynamic: [Object],
      EntryDynamicNormalized: [Object],
      EntryFilename: [Object],
      EntryItem: [Object],
      EntryNormalized: [Object],
      EntryObject: [Object],
      EntryRuntime: [Object],
      EntryStatic: [Object],
      EntryStaticNormalized: [Object],
      EntryUnnamed: [Object],
      Environment: [Object],
      Experiments: [Object],
      ExternalItem: [Object],
      ExternalItemFunctionData: [Object],
      ExternalItemValue: [Object],
      Externals: [Object],
      ExternalsPresets: [Object],
      ExternalsType: [Object],
      FileCacheOptions: [Object],
      Filename: [Object],
      FilenameTemplate: [Object],
      FilterItemTypes: [Object],
      FilterTypes: [Object],
      GeneratorOptionsByModuleType: [Object],
      GlobalObject: [Object],
      HashDigest: [Object],
      HashDigestLength: [Object],
      HashFunction: [Object],
      HashSalt: [Object],
      HotUpdateChunkFilename: [Object],
      HotUpdateGlobal: [Object],
      HotUpdateMainFilename: [Object],
      IgnoreWarnings: [Object],
      IgnoreWarningsNormalized: [Object],
      Iife: [Object],
      ImportFunctionName: [Object],
      ImportMetaName: [Object],
      InfrastructureLogging: [Object],
      JavascriptParserOptions: [Object],
      Layer: [Object],
      Library: [Object],
      LibraryCustomUmdCommentObject: [Object],
      LibraryCustomUmdObject: [Object],
      LibraryExport: [Object],
      LibraryName: [Object],
      LibraryOptions: [Object],
      LibraryType: [Object],
      Loader: [Object],
      MemoryCacheOptions: [Object],
      Mode: [Object],
      ModuleOptions: [Object],
      ModuleOptionsNormalized: [Object],
      Name: [Object],
      NoParse: [Object],
      Node: [Object],
      NodeOptions: [Object],
      Optimization: [Object],
      OptimizationRuntimeChunk: [Object],
      OptimizationRuntimeChunkNormalized: [Object],
      OptimizationSplitChunksCacheGroup: [Object],
      OptimizationSplitChunksGetCacheGroups: [Object],
      OptimizationSplitChunksOptions: [Object],
      OptimizationSplitChunksSizes: [Object],
      Output: [Object],
      OutputModule: [Object],
      OutputNormalized: [Object],
      Parallelism: [Object],
      ParserOptionsByModuleType: [Object],
      Path: [Object],
      Pathinfo: [Object],
      Performance: [Object],
      PerformanceOptions: [Object],
      Plugins: [Object],
      Profile: [Object],
      PublicPath: [Object],
      RecordsInputPath: [Object],
      RecordsOutputPath: [Object],
      RecordsPath: [Object],
      Resolve: [Object],
      ResolveAlias: [Object],
      ResolveLoader: [Object],
      ResolveOptions: [Object],
      ResolvePluginInstance: [Object],
      RuleSetCondition: [Object],
      RuleSetConditionAbsolute: [Object],
      RuleSetConditionOrConditions: [Object],
      RuleSetConditionOrConditionsAbsolute: [Object],
      RuleSetConditions: [Object],
      RuleSetConditionsAbsolute: [Object],
      RuleSetLoader: [Object],
      RuleSetLoaderOptions: [Object],
      RuleSetRule: [Object],
      RuleSetRules: [Object],
      RuleSetUse: [Object],
      RuleSetUseItem: [Object],
      ScriptType: [Object],
      SnapshotOptions: [Object],
      SourceMapFilename: [Object],
      SourcePrefix: [Object],
      StatsOptions: [Object],
      StatsValue: [Object],
      StrictModuleExceptionHandling: [Object],
      Target: [Object],
      UmdNamedDefine: [Object],
      UniqueName: [Object],
      WasmLoading: [Object],
      WasmLoadingType: [Object],
      Watch: [Object],
      WatchOptions: [Object],
      WebassemblyModuleFilename: [Object],
      WebpackOptionsNormalized: [Object],
      WebpackPluginFunction: [Object],
      WebpackPluginInstance: [Object]
    },
    description: 'Options object as provided by the user.',
    type: 'object',
    additionalProperties: false,
    properties: {
      amd: [Object],
      bail: [Object],
      cache: [Object],
      context: [Object],
      dependencies: [Object],
      devServer: [Object],
      devtool: [Object],
      entry: [Object],
      experiments: [Object],
      externals: [Object],
      externalsPresets: [Object],
      externalsType: [Object],
      ignoreWarnings: [Object],
      infrastructureLogging: [Object],
      loader: [Object],
      mode: [Object],
      module: [Object],
      name: [Object],
      node: [Object],
      optimization: [Object],
      output: [Object],
      parallelism: [Object],
      performance: [Object],
      plugins: [Object],
      profile: [Object],
      recordsInputPath: [Object],
      recordsOutputPath: [Object],
      recordsPath: [Object],
      resolve: [Object],
      resolveLoader: [Object],
      snapshot: [Object],
      stats: [Object],
      target: [Object],
      watch: [Object],
      watchOptions: [Object]
    }
  },
  headerName: 'Webpack',
  baseDataPath: 'configuration',
  postFormatter: [Function: postFormatter]
}
┏ Renderer -------------------

  ✖ 「wds」: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
   - configuration.optimization has an unknown property 'namedModules'. These properties are valid:
     object { checkWasmTypes?, chunkIds?, concatenateModules?, emitOnErrors?, flagIncludedChunks?, innerGraph?, mangleExports?, mangleWasmImports?, mergeDuplicateChunks?, minimize?, minimizer?, moduleIds?, noEmitOnErrors?, nodeEnv?, portableRecords?, providedExports?, realContentHash?, removeAvailableModules?, removeEmptyChunks?, runtimeChunk?, sideEffects?, splitChunks?, usedExports? }
     -> Enables/Disables integrated optimizations.
     Did you mean optimization.moduleIds: "named" (BREAKING CHANGE since webpack 5)?

┗ ----------------------------
Renderer WDS exited with code 1


Has anyone run into this? I would extend it as a library, but I am using the cli.

2 Answers

I ended up not using electron-webpack at all, I'm just using webpack + typescript+webpack on their own, no fancy stuff.

The grim details are in this GitHub issue, but here's the gist:

  • As of now, electron-webpack hasn't pushed a release that is compatible with webpack 5
  • electron-webpack is looking for maintainers. Until they get more help, it's unlikely that this and other issues will be fixed.

Apparent workarounds (I haven't verified)

  • Updating electron-webpack's source to disable named modules. See this comment
  • Build electron-webpack locally and symlink. See this comment.
    • I'm not sure if you need to do that in addition to above workaround

If you're able to be the hero and dedicate a lot of time to fixing this and maintaining the project, that be great. Most can't do that, which means you have to decide between workarounds or using a more reliable package

Related