Monaco example is outdated and doesn't work since Next.js 10.0.6 anymore

[maltejur]

What example does this report relate to?

with-monaco-editor

What version of Next.js are you using?

10.0.7

What version of Node.js are you using?

14.15.5

What browser are you using?

Firefox

What operating system are you using?

Tried on windows and linux

How are you deploying your application?

next dev

Describe the Bug

The Monaco example doesn't work anymore with Next.js 10.0.6. The following error is given when running next dev:

$ next dev
Error: Cannot find module 'webpack'
Require stack:
- /workspace/next.js/examples/with-monaco-editor/node_modules/mini-css-extract-plugin/dist/index.js
- /workspace/next.js/examples/with-monaco-editor/node_modules/mini-css-extract-plugin/dist/cjs.js
- /workspace/next.js/examples/with-monaco-editor/node_modules/@zeit/next-css/css-loader-config.js
- /workspace/next.js/examples/with-monaco-editor/node_modules/@zeit/next-css/index.js
- /workspace/next.js/examples/with-monaco-editor/next.config.js
- /workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/next-server/server/config.js
- /workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/next-server/server/next-server.js
- /workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/server/next.js
- /workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/server/lib/start-server.js
- /workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/cli/next-dev.js
- /workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/workspace/next.js/examples/with-monaco-editor/node_modules/mini-css-extract-plugin/dist/index.js:7:16)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/workspace/next.js/examples/with-monaco-editor/node_modules/mini-css-extract-plugin/dist/cjs.js:3:18)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/workspace/next.js/examples/with-monaco-editor/node_modules/mini-css-extract-plugin/dist/index.js',
    '/workspace/next.js/examples/with-monaco-editor/node_modules/mini-css-extract-plugin/dist/cjs.js',
    '/workspace/next.js/examples/with-monaco-editor/node_modules/@zeit/next-css/css-loader-config.js',
    '/workspace/next.js/examples/with-monaco-editor/node_modules/@zeit/next-css/index.js',
    '/workspace/next.js/examples/with-monaco-editor/next.config.js',
    '/workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/next-server/server/config.js',
    '/workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/next-server/server/next-server.js',
    '/workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/server/next.js',
    '/workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/server/lib/start-server.js',
    '/workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/cli/next-dev.js',
    '/workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/bin/next'
  ]
}
error Command failed with exit code 1.

After trying to add webpack again as the error suggests, the following error is given:

$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
warn  - React 17.0.1 or newer will be required to leverage all of the upcoming features in Next.js 11. Read more: https://err.sh/next.js/react-version
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://err.sh/next.js/built-in-css-disabled

TypeError: Cannot set property 'chunkLoading' of undefined
    at WebWorkerTemplatePlugin.apply (/workspace/next.js/examples/with-monaco-editor/node_modules/webpack/lib/webworker/WebWorkerTemplatePlugin.js:20:40)
    at Compiler.createChildCompiler (/workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/compiled/webpack/bundle4.js:56820:12)
    at Compilation.createChildCompiler (/workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/compiled/webpack/bundle4.js:56167:24)
    at /workspace/next.js/examples/with-monaco-editor/node_modules/monaco-editor-webpack-plugin/out/plugins/AddWorkerEntryPointPlugin.js:16:43
    at AsyncParallelHook.eval [as callAsync] (eval at create (/workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), <anonymous>:13:1)
    at AsyncParallelHook.lazyCompileHook (/workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/compiled/webpack/bundle4.js:47119:20)
    at /workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/compiled/webpack/bundle4.js:56928:20
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (/workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/compiled/webpack/bundle4.js:47119:20)
    at Compiler.compile (/workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/compiled/webpack/bundle4.js:56921:28)
    at /workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/compiled/webpack/bundle4.js:76386:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/compiled/webpack/bundle4.js:47182:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (/workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/compiled/webpack/bundle4.js:47119:20)
    at Watching._go (/workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/compiled/webpack/bundle4.js:76350:32)
    at /workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/compiled/webpack/bundle4.js:76342:9
    at Compiler.readRecords (/workspace/next.js/examples/with-monaco-editor/node_modules/next/dist/compiled/webpack/bundle4.js:56788:11)
error Command failed with exit code 1.

Expected Behavior

When the example is run with Next.js 9, everything compiles as usual and when visiting the site, the Monaco editor shows.

To Reproduce

1. Go to the example folder https://github.com/vercel/next.js/tree/canary/examples/with-monaco-editor and install all the dependencies
2. Run yarn dev and confirm that everything works with Next.js 9
3. Run yarn add [email protected] to update to Next.js 10.0.5
4. Run yarn dev and confirm that everything still works
5. Run yarn add [email protected] to update to Next.js 10.0.6
6. Run yarn dev again and get an error

[timneutkens]

Duplicate of #21679

[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.