Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webpack 5 Support

See original GitHub issue

Feature request

Webpack 5 is in beta and will be out soon, would be good to see next support it. This issue is more of an umbrella placeholder for anyone who finds issues.

I was testing next.js against version 5 for feedback

Is your feature request related to a problem?

Its a feature enhancement and preparation

Steps to replicate:

set

"resolutions": {
    "webpack": "5.0.0-beta.6"
},

in package.json and yarn install.

Here is some output when i try running next over webpack 5

ValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration[0].output has an unknown property 'futureEmitAssets'. These properties are valid:
   object { assetModuleFilename?, auxiliaryComment?, chunkCallbackName?, chunkFilename?, chunkLoadTimeout?, compareBeforeEmit?, crossOriginLoading?, devtoolFallbackModuleFilenameTemplate?, devtoolModuleFilenameTemplate?, devtoolNamespace?, ecmaVersion?, filename?, globalObject?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, iife?, jsonpFunction?, jsonpScriptType?, library?, libraryExport?, libraryTarget?, module?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine?, webassemblyModuleFilename? }
   -> Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.
 - configuration[1].output has an unknown property 'futureEmitAssets'. These properties are valid:
   object { assetModuleFilename?, auxiliaryComment?, chunkCallbackName?, chunkFilename?, chunkLoadTimeout?, compareBeforeEmit?, crossOriginLoading?, devtoolFallbackModuleFilenameTemplate?, devtoolModuleFilenameTemplate?, devtoolNamespace?, ecmaVersion?, filename?, globalObject?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, iife?, jsonpFunction?, jsonpScriptType?, library?, libraryExport?, libraryTarget?, module?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine?, webassemblyModuleFilename? }
   -> Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.
    at validate (node_modules/webpack/node_modules/schema-utils/dist/validate.js:50:11)
    at validateSchema (node_modules/webpack/lib/validateSchema.js:11:2)
    at webpack (node_modules/webpack/lib/webpack.js:78:2)
    at HotReloader.start (node_modules/next/dist/server/hot-reloader.js:14:1780)
    at async DevServer.prepare (node_modules/next/dist/server/next-dev-server.js:6:1248)
    at async node_modules/next/dist/cli/next-dev.js:22:337 {
  name: 'ValidationError',
  errors: [
    {
      keyword: 'anyOf',
      dataPath: '[0].output',
      schemaPath: '#/properties/output/anyOf',
      params: {},
      message: 'should match some schema in anyOf',
      schema: [Array],
      parentSchema: [Object],
      data: [Object],
      children: [Array]
    },
    {
      keyword: 'anyOf',
      dataPath: '[1].output',
      schemaPath: '#/properties/output/anyOf',
      params: {},
      message: 'should match some schema in anyOf',
      schema: [Array],
      parentSchema: [Object],
      data: [Object],
      children: [Array]
    }
  ],
  schema: {
    definitions: {
      ArrayOfStringOrStringArrayValues: [Object],
      ArrayOfStringValues: [Object],
      Entry: [Object],
      EntryDynamic: [Object],
      EntryItem: [Object],
      EntryObject: [Object],
      EntryStatic: [Object],
      Experiments: [Object],
      ExternalItem: [Object],
      Externals: [Object],
      FileCacheOptions: [Object],
      FilterItemTypes: [Object],
      FilterTypes: [Object],
      LibraryCustomUmdCommentObject: [Object],
      LibraryCustomUmdObject: [Object],
      MemoryCacheOptions: [Object],
      ModuleOptions: [Object],
      NodeOptions: [Object],
      NonEmptyArrayOfUniqueStringValues: [Object],
      OptimizationOptions: [Object],
      OptimizationSplitChunksCacheGroup: [Object],
      OptimizationSplitChunksGetCacheGroups: [Object],
      OptimizationSplitChunksOptions: [Object],
      OptimizationSplitChunksSizes: [Object],
      OutputOptions: [Object],
      PerformanceOptions: [Object],
      ResolveOptions: [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],
      StatsOptions: [Object],
      WatchOptions: [Object],
      WebpackPluginFunction: [Object],
      WebpackPluginInstance: [Object]
    },
    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],
      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],
      serve: [Object],
      stats: [Object],
      target: [Object],
      watch: [Object],
      watchOptions: [Object]
    }
  },
  headerName: 'Webpack',
  baseDataPath: 'configuration',
  postFormatter: [Function: postFormatter],
  message: 'Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.\n' +
    " - configuration[0].output has an unknown property 'futureEmitAssets'. These properties are valid:\n" +
    '   object { assetModuleFilename?, auxiliaryComment?, chunkCallbackName?, chunkFilename?, chunkLoadTimeout?, compareBeforeEmit?, crossOriginLoading?, devtoolFallbackModuleFilenameTemplate?, devtoolModuleFilenameTemplate?, devtoolNamespace?, ecmaVersion?, filename?, globalObject?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, iife?, jsonpFunction?, jsonpScriptType?, library?, libraryExport?, libraryTarget?, module?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine?, webassemblyModuleFilename? }\n' +
    '   -> Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.\n' +
    " - configuration[1].output has an unknown property 'futureEmitAssets'. These properties are valid:\n" +
    '   object { assetModuleFilename?, auxiliaryComment?, chunkCallbackName?, chunkFilename?, chunkLoadTimeout?, compareBeforeEmit?, crossOriginLoading?, devtoolFallbackModuleFilenameTemplate?, devtoolModuleFilenameTemplate?, devtoolNamespace?, ecmaVersion?, filename?, globalObject?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateFunction?, hotUpdateMainFilename?, iife?, jsonpFunction?, jsonpScriptType?, library?, libraryExport?, libraryTarget?, module?, path?, pathinfo?, publicPath?, sourceMapFilename?, sourcePrefix?, strictModuleExceptionHandling?, umdNamedDefine?, webassemblyModuleFilename? }\n' +
    '   -> Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.'
}

I believe some of these can be fixed whilst still running against webpack 4.0 It will take some unpacking and working through

Issue Analytics

State:
Created 4 years ago
Comments:16 (11 by maintainers)

Top GitHub Comments

19reactions

ScriptedAlchemycommented, Mar 2, 2020

Got it. https://twitter.com/ScriptedAlchemy/status/1234240375818076160?s=20 Repo wrote about it here + theres a repo: https://medium.com/@ScriptedAlchemy/webpack-5-module-federation-a-game-changer-to-javascript-architecture-bcdd30e02669

3reactions

ScriptedAlchemycommented, Oct 24, 2020

V10 will also follow up with or include async capabilities, which make module federation work.

@timneutkens, I’ve gone up with a plan for flushing js chunks from remote modules so they can be ssrd.

When you’re ready to take a loo at MF - I’m happy to supply what I’ve built

Top Results From Across the Web

Webpack 5 release (2020-10-10)

Webpack 5 adds support for some CommonJs constructs, allows to eliminate unused CommonJs exports and track referenced export names from require ...

facebook/create-react-app - Webpack 5 support overview

Overview of tasks needed for updating CRA to Webpack 5 - Some of the work will support both Webpack 4 + 5 but...

What's New in Webpack 5 - Frontend Digest

What's new in Webpack 5 · Faster builds with persistent caching · Smaller bundle sizes · Better long term caching · Breaking changes...

Upgrading Webpack 4 → 5 | Square Corner Blog

Webpack 5 Gains · Decreased bundle size by 27-28% · Decreased build time by 10% (2m 54s → 2m 36s) · Cached dev...

Webpack 5 Adoption - Next.js

Improved Long Term Caching of Assets: Deterministic code output that is less likely to change between builds; Improved Tree Shaking; Support for assets...