Webpack 5 Support #9426

jasonwilliams · 2019-11-15T16:36:21Z

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

The text was updated successfully, but these errors were encountered:

timneutkens · 2019-11-15T17:40:43Z

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

timneutkens · 2020-01-03T00:25:42Z

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

ryanirilli · 2020-02-06T22:27:51Z

Is there a ticket tracking this?

jasonwilliams · 2020-02-08T10:50:27Z

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

ScriptedAlchemy · 2020-02-18T07:43:33Z

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 · 2020-02-18T16:23:46Z

@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 · 2020-02-18T18:43:15Z

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 · 2020-02-18T18:45:05Z

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

timneutkens · 2020-02-18T18:45:30Z

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

Not yet.

ScriptedAlchemy · 2020-03-02T18:45:11Z

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 · 2020-05-25T11:44:13Z

Keeping a checklist of what to do in #13341

jasonwilliams · 2020-10-23T17:18:42Z

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 · 2020-10-23T18:12:45Z

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 · 2020-10-24T17:54:56Z

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

aralroca · 2020-11-20T17:20:55Z

In my case adding the resolutions I got this warning:

warning Resolution field "[email protected]" is incompatible with requested version "[email protected]"

And checking require('webpack').version is 4.44.1 😅 Anyone knows what this could happen? Thanks!

balazsorban44 · 2022-01-29T03:05:45Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

timneutkens closed this as completed Jan 3, 2020

timneutkens reopened this Feb 18, 2020

jasonwilliams mentioned this issue Mar 2, 2020

Source map error: Error: Invalid URL: (Firefox) #9471

Closed

timneutkens mentioned this issue May 25, 2020

Webpack 5 support #13341

Closed

13 tasks

timneutkens closed this as completed May 25, 2020

vercel locked as resolved and limited conversation to collaborators Jan 29, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Webpack 5 Support #9426

Webpack 5 Support #9426

jasonwilliams commented Nov 15, 2019 •

edited

Loading

timneutkens commented Nov 15, 2019

timneutkens commented Jan 3, 2020

ryanirilli commented Feb 6, 2020

jasonwilliams commented Feb 8, 2020 •

edited

Loading

ScriptedAlchemy commented Feb 18, 2020

jasonwilliams commented Feb 18, 2020

timneutkens commented Feb 18, 2020 •

edited

Loading

ryanirilli commented Feb 18, 2020

timneutkens commented Feb 18, 2020

ScriptedAlchemy commented Mar 2, 2020 •

edited

Loading

timneutkens commented May 25, 2020

jasonwilliams commented Oct 23, 2020

timneutkens commented Oct 23, 2020 •

edited

Loading

ScriptedAlchemy commented Oct 24, 2020

aralroca commented Nov 20, 2020 •

edited

Loading

balazsorban44 commented Jan 29, 2022

Webpack 5 Support #9426

Webpack 5 Support #9426

Comments

jasonwilliams commented Nov 15, 2019 • edited Loading

Feature request

Is your feature request related to a problem?

Steps to replicate:

timneutkens commented Nov 15, 2019

timneutkens commented Jan 3, 2020

ryanirilli commented Feb 6, 2020

jasonwilliams commented Feb 8, 2020 • edited Loading

ScriptedAlchemy commented Feb 18, 2020

jasonwilliams commented Feb 18, 2020

timneutkens commented Feb 18, 2020 • edited Loading

ryanirilli commented Feb 18, 2020

timneutkens commented Feb 18, 2020

ScriptedAlchemy commented Mar 2, 2020 • edited Loading

timneutkens commented May 25, 2020

jasonwilliams commented Oct 23, 2020

timneutkens commented Oct 23, 2020 • edited Loading

ScriptedAlchemy commented Oct 24, 2020

aralroca commented Nov 20, 2020 • edited Loading

balazsorban44 commented Jan 29, 2022

jasonwilliams commented Nov 15, 2019 •

edited

Loading

jasonwilliams commented Feb 8, 2020 •

edited

Loading

timneutkens commented Feb 18, 2020 •

edited

Loading

ScriptedAlchemy commented Mar 2, 2020 •

edited

Loading

timneutkens commented Oct 23, 2020 •

edited

Loading

aralroca commented Nov 20, 2020 •

edited

Loading