Next.js: Webpack 5 Support

[jasonwilliams]

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

[timneutkens]

I'd strongly recommend not investing time into this until webpack 5 is stable.

[timneutkens]

Eventually we'll upgrade to webpack 5 when it's stable.

[ryanirilli]

Is there a ticket tracking this?

[jasonwilliams]

@ryanirilli i was hoping this to be the tracking ticket (even if it’s not ready yet)

[ScriptedAlchemy]

I’m looking into this. Wrapping up some work on Webpack 5 core and I want to see how it does with next. Part of the challenge can be getting access to webpack configs to change them accordingly.

For those who need to access the restricted configs of next. I wrote something to gain full access. It allows me to configure webpack accordingly without needing to fork next. https://github.com/ScriptedAlchemy/nextjs-webpack-override

[jasonwilliams]

@timneutkens is it worth reopening this ticket considering someone is looking into it for next? And there needs to be a place that’s tracking this anyway even if there is no official support right now.

[timneutkens]

I'll re-open but we have different plans with regards to this and an external PR to upgrade has a low chance of getting merged right now (saying this so that you don't waste time on it).

[ryanirilli]

Thanks for the info @timneutkens! Any detail around those plans or not yet?

[timneutkens]

Thanks for the info @timneutkens! Any detail around those plans or not yet?

Not yet.

[ScriptedAlchemy]

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

[timneutkens]

Keeping a checklist of what to do in #13341

[jasonwilliams]

Hey @timneutkens im assuming Next will switch to webpack 5 in a major release at some point? So users won’t have to rely on “resolutions” forever.

[timneutkens]

Hey @timneutkens im assuming Next will switch to webpack 5 in a major release at some point? So users won’t have to rely on “resolutions” forever.

Correct, we still want more people to test it first though 👍 And we'll likely have backwards compat with webpack 4 for a bit as well

[ScriptedAlchemy]

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