Webpack inlining in Next v10.0.6 breaks treat/webpack-plugin

[wyattanderson]

What version of Next.js are you using?

10.0.6

What version of Node.js are you using?

13.7.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

N/A

Describe the Bug

The inlining of webpack added in #20598 breaks the webpack plugin for the Treat CSS library. The plugin imports other plugins from the webpack module, which is no longer available.

npm run dev fails immediately at startup:

Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
Require stack:
- /Users/wyatt/git/next-webpack-reproducer/node_modules/treat/webpack-plugin/treatCompiler.js
- /Users/wyatt/git/next-webpack-reproducer/node_modules/treat/webpack-plugin/plugin.js
- /Users/wyatt/git/next-webpack-reproducer/node_modules/treat/webpack-plugin/index.js
- /Users/wyatt/git/next-webpack-reproducer/node_modules/next-treat/index.js
- /Users/wyatt/git/next-webpack-reproducer/next.config.js
- /Users/wyatt/git/next-webpack-reproducer/node_modules/next/dist/next-server/server/config.js
- /Users/wyatt/git/next-webpack-reproducer/node_modules/next/dist/next-server/server/next-server.js
- /Users/wyatt/git/next-webpack-reproducer/node_modules/next/dist/server/next.js
- /Users/wyatt/git/next-webpack-reproducer/node_modules/next/dist/server/lib/start-server.js
- /Users/wyatt/git/next-webpack-reproducer/node_modules/next/dist/cli/next-dev.js
- /Users/wyatt/git/next-webpack-reproducer/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:980:15)
    at Function.Module._load (internal/modules/cjs/loader.js:862:27)
    at Module.require (internal/modules/cjs/loader.js:1040:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/wyatt/git/next-webpack-reproducer/node_modules/treat/webpack-plugin/treatCompiler.js:4:28)
    at Module._compile (internal/modules/cjs/loader.js:1151:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1040:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/wyatt/git/next-webpack-reproducer/node_modules/treat/webpack-plugin/plugin.js:8:27)
    at Module._compile (internal/modules/cjs/loader.js:1151:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32)
    at Function.Module._load (internal/modules/cjs/loader.js:899:14)
    at Module.require (internal/modules/cjs/loader.js:1040:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/wyatt/git/next-webpack-reproducer/node_modules/treat/webpack-plugin/index.js:1:18)
    at Module._compile (internal/modules/cjs/loader.js:1151:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1171:10)
    at Module.load (internal/modules/cjs/loader.js:1000:32) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/wyatt/git/next-webpack-reproducer/node_modules/treat/webpack-plugin/treatCompiler.js',
    '/Users/wyatt/git/next-webpack-reproducer/node_modules/treat/webpack-plugin/plugin.js',
    '/Users/wyatt/git/next-webpack-reproducer/node_modules/treat/webpack-plugin/index.js',
    '/Users/wyatt/git/next-webpack-reproducer/node_modules/next-treat/index.js',
    '/Users/wyatt/git/next-webpack-reproducer/next.config.js',
    '/Users/wyatt/git/next-webpack-reproducer/node_modules/next/dist/next-server/server/config.js',
    '/Users/wyatt/git/next-webpack-reproducer/node_modules/next/dist/next-server/server/next-server.js',
    '/Users/wyatt/git/next-webpack-reproducer/node_modules/next/dist/server/next.js',
    '/Users/wyatt/git/next-webpack-reproducer/node_modules/next/dist/server/lib/start-server.js',
    '/Users/wyatt/git/next-webpack-reproducer/node_modules/next/dist/cli/next-dev.js',
    '/Users/wyatt/git/next-webpack-reproducer/node_modules/next/dist/bin/next'
  ]
}

Attempting to remedy the issue by installing webpack@4.44.1 (the version specified in the package.json of next@10.0.6) breaks the plugin, but only when loading a page in dev, or when running npm run build:

TreatWebpackPlugin: Error occured during treat file compilation.

This error is usually caused by having multiple versions of webpack installed.
Ensure you only have a single version of webpack by running: 'yarn why webpack' or 'npm ls webpack'.

Expected Behavior

npm run build should succeed in the given reproducer repository.

To Reproduce

• Clone reproducer repository at https://github.com/wyattanderson/next-webpack-reproducer
• npm install && npm run build fails with Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
• npm install webpack@4.44.1 && npm run build fails with error indicating multiple versions of Webpack are installed.
• Issue is resolved on downgrading to v10.0.5; npm install next@10.0.5 && npm run build succeeds.

[mitchell-bu]

Going to add on to this as we are having an error with v10.0.6 too with webpack, except we use next-sass still which in turn uses MiniCssExtractPlugin.

Error: Cannot find module 'webpack'
Require stack:
- /home/src/app/node_modules/mini-css-extract-plugin/dist/index.js
- /home/src/app/node_modules/mini-css-extract-plugin/dist/cjs.js
- /home/src/app/node_modules/@zeit/next-css/css-loader-config.js
- /home/src/app/node_modules/@zeit/next-sass/index.js
- /home/src/app/next.config.js
- /home/src/app/node_modules/next/dist/next-server/server/config.js
- /home/src/app/node_modules/next/dist/build/index.js
- /home/src/app/node_modules/next/dist/cli/next-build.js
- /home/src/app/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
    at Function.Module._load (internal/modules/cjs/loader.js:667:27)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/src/app/node_modules/mini-css-extract-plugin/dist/index.js:7:16)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/src/app/node_modules/mini-css-extract-plugin/dist/cjs.js:3:18)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/src/app/node_modules/mini-css-extract-plugin/dist/index.js',
    '/home/src/app/node_modules/mini-css-extract-plugin/dist/cjs.js',
    '/home/src/app/node_modules/@zeit/next-css/css-loader-config.js',
    '/home/src/app/node_modules/@zeit/next-sass/index.js',
    '/home/src/app/next.config.js',
    '/home/src/app/node_modules/next/dist/next-server/server/config.js',
    '/home/src/app/node_modules/next/dist/build/index.js',
    '/home/src/app/node_modules/next/dist/cli/next-build.js',
    '/home/src/app/node_modules/next/dist/bin/next'
  ]
}

[theoludwig]

There is a similar issue here : #21679
It is related to plugins that need webpack installed.

[timneutkens]

Duplicate of #21679

[stahlmanDesign]

I fixed this problem introduced since v10.0.6 by removing the use of the deprecated library @zeit/next-css in next.config.js
EDIT: Spoke too soon. It now renders locally but will not build. Could also be that next-images needs changes. I have other Next projects that were built using newer templates and they are fine. It's the older projects with exceptions in next.config.js that are having trouble.

[antoniopresto]

In my case solved installing webpack@4.44.1

[haiifeng]

#22798 (comment)
this may be work

[balazsorban44]

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.