Webpack 5 Adoption

[timneutkens]

This discussion is for getting help when your application does not compile when using the new webpack 5 support.

Please make sure your comment includes:

• A reproduction
• At least the next.config.js and package.json

If these are not included your comment will likely be not actionable.

[vijaybritto]

This is important. webpack/webpack#12868
The dev server crashes in less than an hour in large projects. Please check this behaviour before making this public.

[followbl]

An issue I'm having with next-auth and webpack5 outlined here. nextauthjs/next-auth#1611

[followbl]

@timneutkens here you go. https://github.com/followbl/webpack5-next-auth - just run yarn run build and you'll see the error. Of note, this only happens when you set the target as serverless - gonna update the next-auth ticket as well.

[ariesclark]

Using the future flag, the build fails (including next dev and other runtimes)

info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
Error: Cannot find module 'webpack/lib/dependencies/ConstDependency'

[timneutkens]

Please make sure your comment includes everything needed to reproduce the issue you're running into otherwise it'll be almost impossible to help.

[heymartinadams]

Same issue, and I believe the cause has to do with using next-plugin-preact

[hong-ngo]

I faced this issue when upgrade nextjs@11.0.1, Just added webpack@lastest and fixed this issued

[amitdevteams]

how @hong-ngo how to fix it please mentioned as well

[monotykamary]

This error occurs when running next build and significantly slows down builds:

info  - Creating an optimized production build .<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'fsevents' in '[...]/node_modules/chokidar'

It seems like this only happens when npm is used as the main package manager (node: v14.16.0; npm: 6.14.11). yarn v1 and v2 works fine.

[timneutkens]

Please make sure your comment includes everything needed to reproduce the issue you're running into otherwise it'll be almost impossible to help.

[monotykamary]

# node: v14.16.0
# npm: 6.14.11

$ create-next-app my-app
$ cd ./my-app
$ npm install
$ touch next.config.js

// next.config.js

module.exports = {
  future: {
    webpack5: true
  }
}

# node: v14.16.0
# npm: 6.14.11

$ npm run build

> my-app@0.1.0 build /home/ubuntu/my-app
> next build

info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types
info  - Creating an optimized production build ..<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'fsevents' in '/home/ubuntu/my-app/node_modules/chokidar' <w> while resolving 'fsevents' in /home/ubuntu/my-app/node_modules/chokidar to a directory
info  - Creating an optimized production build .<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'fsevents' in '/home/ubuntu/my-app/node_modules/chokidar' <w> while resolving 'fsevents' in /home/ubuntu/my-app/node_modules/chokidar to a directory <w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'fsevents' in '/home/ubuntu/my-app/node_modules/chokidar' <w> while resolving 'fsevents' in /home/ubuntu/my-app/node_modules/chokidar to a directory
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
info  - Generating static pages (3/3)
info  - Finalizing page optimization

Page                                Size     First Load JS
┌ ○ /                               3.4 kB         67.5 kB
├   └ css/94ed0265037ebe246d3e.css  660 B
├   /_app                           0 B            64.1 kB
├ ○ /404                            3.4 kB         67.5 kB
└ λ /api/hello                      0 B            64.1 kB
+ First Load JS shared by all       64.1 kB
  ├ chunks/597.a258c0.js            13.3 kB
  ├ chunks/778.e02f65.js            7.04 kB
  ├ chunks/framework.dad012.js      42 kB
  ├ chunks/main.9ca82e.js           151 B
  ├ chunks/pages/_app.7ecb8a.js     565 B
  ├ chunks/webpack.b18a36.js        993 B
  └ css/f484b8c6a376da6b2dcc.css    194 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

[timneutkens]

I can't reproduce this based on the provided steps 🤔 What OS are you on?

[monotykamary]

I can't reproduce this based on the provided steps 🤔 What OS are you on?

Running Ubuntu 20.04.1 LTS on a virtual machine (Multipass with VirtualBox on Windows 10 host) recently created on 03/22/2021. Node was installed using snap: sudo snap install node --classic.

It actually might have to do with node installed with snap. I'll try a new instance with the package manager.

[monotykamary]

It looks like the error still pops up:

# Install instructions from https://github.com/nodesource/distributions/blob/master/README.md#deb

curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

ubuntu@objective-whitefly:~$ npx create-next-app my-app
npx: installed 1 in 1.211s
Creating a new Next.js app in /home/ubuntu/my-app.

Installing react, react-dom, and next using npm...

+ react-dom@17.0.2
+ react@17.0.2
+ next@10.1.2
added 276 packages from 227 contributors and audited 277 packages in 36.345s

module.exports = {

44 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities


Success! Created my-app at /home/ubuntu/my-app
Inside that directory, you can run several commands:

  npm run dev
    Starts the development server.

  npm run build
    Builds the app for production.

  npm start
    Runs the built app in production mode.

We suggest that you begin by typing:

  cd my-app
  npm run dev

ubuntu@objective-whitefly:~$ cd my-app/
ubuntu@objective-whitefly:~/my-app$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

audited 277 packages in 3.146s

44 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

ubuntu@objective-whitefly:~/my-app$ touch next.config.js
ubuntu@objective-whitefly:~/my-app$ vim next.config.js
ubuntu@objective-whitefly:~/my-app$ npm run build

> my-app@0.1.0 build /home/ubuntu/my-app
> next build

info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types
info  - Creating an optimized production build ...<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'fsevents' in '/home/ubuntu/my-app/node_modules/chokidar'
<w> while resolving 'fsevents' in /home/ubuntu/my-app/node_modules/chokidar to a directory
info  - Creating an optimized production build .<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'fsevents' in '/home/ubuntu/my-app/node_modules/chokidar'
<w> while resolving 'fsevents' in /home/ubuntu/my-app/node_modules/chokidar to a directory
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'fsevents' in '/home/ubuntu/my-app/node_modules/chokidar'
<w> while resolving 'fsevents' in /home/ubuntu/my-app/node_modules/chokidar to a directory
info  - Creating an optimized production build
info  - Compiled successfully
info  - Collecting page data
info  - Generating static pages (3/3)
info  - Finalizing page optimization

Page                                Size     First Load JS
┌ ○ /                               3.4 kB         67.5 kB
├   └ css/94ed0265037ebe246d3e.css  660 B
├   /_app                           0 B            64.1 kB
├ ○ /404                            3.4 kB         67.5 kB
└ λ /api/hello                      0 B            64.1 kB
+ First Load JS shared by all       64.1 kB
  ├ chunks/597.320166.js            13.3 kB
  ├ chunks/778.14db9f.js            7.04 kB
  ├ chunks/framework.dad012.js      42 kB
  ├ chunks/main.9ca82e.js           151 B
  ├ chunks/pages/_app.11b085.js     565 B
  ├ chunks/webpack.b53d0b.js        993 B
  └ css/f484b8c6a376da6b2dcc.css    194 B

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)
   (ISR)     incremental static regeneration (uses revalidate in getStaticProps)

Multipass uses Ubuntu cloud images, which are as vanilla as it gets + a cloud-init package.

Unlike the snap package, yarn isn't bundled. When yarn is installed, create-next-app defaults to it and the build works without error. I see that another user has also reported that exact error so I don't think it's a one-off issue: #21679 (comment).

If the issue specific and isolated to npm and webpack 5, I'll probably see what invokes the error and create an issue over there.

[nicholaschiang]

I'm getting this warning message when using Webpack 5:

info  - Creating an optimized production build ...
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (197kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)

[timneutkens]

Please make sure your comment includes everything needed to reproduce the issue you're running into otherwise it'll be almost impossible to help.

[MariuzM]

Next.js team how you guys tested the reduced installation size? Bundle size have increased, and I'm sure this is one of the reasons why some people are having build memory issues.

Page                                                           Size     First Load JS
┌ ○ /                                                          247 B           102 kB
├   /_app                                                      0 B            73.8 kB
├ ○ /404                                                       3.46 kB        77.2 kB
└ ○ /photos                                                    250 B           102 kB
+ First Load JS shared by all                                  73.8 kB
  ├ chunks/f6078781a05fe1bcb0902d23dbbb2662c8d200b3.468939.js  13.4 kB
  ├ chunks/fcbfb33f420a4b62a2b5ee2ace4c65ed18e3821a.f3cf21.js  7.83 kB
  ├ chunks/framework.e3de07.js                                 41.8 kB
  ├ chunks/main.610789.js                                      7.15 kB
  ├ chunks/pages/_app.4a0ca6.js                                2.94 kB
  └ chunks/webpack.50bee0.js   

With webpack5: true,

Page                             Size     First Load JS
┌ ○ /                            346 B           102 kB
├   /_app                        0 B            74.1 kB
├ ○ /404                         3.44 kB        77.6 kB
└ ○ /photos                      350 B           102 kB
+ First Load JS shared by all    74.1 kB
  ├ chunks/168.a13e4d.js         7.08 kB
  ├ chunks/433.089770.js         13.3 kB
  ├ chunks/934.e75751.js         7.66 kB
  ├ chunks/framework.55895c.js   42 kB
  ├ chunks/main.ce748c.js        154 B
  ├ chunks/pages/_app.998d4f.js  2.94 kB
  └ chunks/webpack.583960.js     993 B

Repo: https://github.com/MariuzM/next.js-test

[timneutkens]

The 1kb gzipped increase is expected as per my earlier comment:

It's expected that webpack 5 produces slightly larger bundles in some cases because of the new hashing and chunking algorithm. The trade-off (and improvement) here is that webpack 5 builds will output the same chunks between builds making sure that users are more likely to hit a cached build.

We'll have a look at the larger .next though. Could be that you didn't delete .next between builds though

[MariuzM]

I was deleting them between builds, but yeah it's small project to confirm what is happening, unfortunately i can post production builds where i'm seeing bigger size increases :(

[TheThirdRace]

Please provide a reproduction of the size increase and we'll have a look!

I have a private repository, but I just sent you an invite as a collaborator.

To reproduce, simply build without the flag for webpack 5, you'll get 178 KB. Then activate the flag in next.config.js and you'll get around 194KB.

[fabb]

It's expected that webpack 5 produces slightly larger bundles in some cases because of the new hashing and chunking algorithm. The trade-off (and improvement) here is that webpack 5 builds will output the same chunks between builds making sure that users are more likely to hit a cached build.

I noticed for one of my pages, before updating to webpack 5 for the initial page load 36 chunks with a total size of 413kB (compressed download size) were loaded, and after updating to webpack 5 it increased to 65 chunks with a total size of 813,7kB. is such a huge increase expected?

Also the SSR render times rose by 12% after updating from next.js 10.0.7 to 10.2.0.

[sokra]

Might be addressed by #24656. Reminder to myself to verify that with the repro.

[trigunam]

Using webpack(config) in next.config.js throws an error after enabling webpack5

ModuleNotFoundError: Module not found: Error: Can't resolve 'private-next-pages/_app.js' in '/Users/triguna/Workspace/hidden/webpack5/webpack5-demo'

> Build error occurred
Error: > webpack config.resolve.alias was incorrectly overridden. https://nextjs.org/docs/messages/invalid-resolve-alias
    at /Users/triguna/Workspace/hidden/webpack5/webpack5-demo/node_modules/next/dist/build/index.js:17:790

next.config.js attached for reference. We need next-images, and certain webpack config like fs, net, tls to be disabled.
Tried the link provided in error already as you can see from below config.
https://nextjs.org/docs/messages/invalid-resolve-alias

const withImages = require("next-images");
const webpack = require("webpack");

module.exports = withImages({
  webpack(config) {
    config.resolve.alias = {
      ...config.resolve.alias,
      // your aliases
    };

    // config.node = {
    //   fs: "empty",
    //   net: "empty",
    //   tls: "empty",
    //   child_process: "empty",
    //   console: true,
    // };
    // Replaced above with below for webpack 5.
    // Reference: https://webpack.js.org/migrate/5/#clean-up-configuration

    config.resolve = {
      fallback: {
        fs: false,
        crypto: require.resolve("crypto-browserify"),
      },
    };

    return config;
  },
  poweredByHeader: false,
  future: {
    webpack5: true,
  },
});

Reproduction

npx create-next-app
copy the above config to next.config.js.
npm run build

[timneutkens]

The error is correct. You're incorrectly overriding config.resolve in this part:

    config.resolve = {
      fallback: {
        fs: false,
        crypto: require.resolve("crypto-browserify"),
      },
    };

You don't need to add crypto there anyway as Next.js polyfills it automatically already. fs should not be included in the resolve fallbacks given that it generally means you're shipping a dependency that should not run in the browser to the browser.

[trigunam]

The error is correct. You're incorrectly overriding config.resolve in this part:

    config.resolve = {
      fallback: {
        fs: false,
        crypto: require.resolve("crypto-browserify"),
      },
    };

You don't need to add crypto there anyway as Next.js polyfills it automatically already. fs should not be included in the resolve fallbacks given that it generally means you're shipping a dependency that should not run in the browser to the browser.

Thanks for your response. that helped build the sample project after removing the config.resolve.

However the same is not working for other dependencies like net, tls etc., as per this mysqljs/mysql#1563

While the dependency is not mysql but yoredis which is still using older versions of webpack I believe,

Is there a way this can be resolved in next.js? I tried adding net: false etc., but again getting into the same issue.

[timneutkens]

This means you're shipping yoredis to the browser which is generally not recommended. Would recommend making sure it's not included in the browser bundles instead of trying to bundle it.

[trigunam]

Thanks, @timneutkens. I did not realize this is happening, will try to customize and not ship yoredis and other server components and use webpack 5 only after that.

Thank you so much for the tip. :)

[BleedingDev]

A reproduction

1. npx create-next-app --example using-preact using-preact-app
2. Add to next.config.js

  future: {
    webpack5: true,
  },

3. yarn run dev

Config

next.config.js:

const withPreact = require("next-plugin-preact");

module.exports = withPreact({
  /* regular next.js config options here */
  future: {
    webpack5: true,
  },
});

package.json:

{
  "name": "using-preact",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "devDependencies": {},
  "dependencies": {
    "next": "^10.0.0",
    "next-plugin-preact": "^3.0.3",
    "preact": "^10.5.5",
    "preact-render-to-string": "^5.1.11",
    "react": "npm:@preact/compat@^0.0.3",
    "react-dom": "npm:@preact/compat@^0.0.3",
    "react-ssr-prepass": "npm:preact-ssr-prepass@^1.1.2"
  },
  "license": "MIT"
}

OS:

macOS Big Sur 11.3 Beta 5

Node:

Tried v15.12.0, v14.16.0, v12.20.0, deleted node_modules, reinstalled, still same error.

Images

[BleedingDev]

But! yarn run build works.

[BleedingDev]

Output sizes for yarn run build. But still only build works.

Webpack 5

Webpack 4

[ziimakc]

Any solution for this on windows?

<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'fsevents' in 'C:\my\apps\app\node_modules\chokidar'
<w> while resolving 'fsevents' in C:\my\apps\app\node_modules\chokidar to a directory
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Can't resolve 'fsevents' in 'C:\my\apps\app\node_modules\chokidar'
<w> while resolving 'fsevents' in C:\my\apps\app\node_modules\chokidar to a directory

[BleedingDev]

Have you tried:

fallback: {
  fs: false,
}

?

[ziimakc]

@pegak yep, still warning. It's works, but with warning.

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback.fs = false
    }

    return config
  },
  future: {
    webpack5: true,
  },
  fallback: {
    fs: false,
  },
}

[sokra]

fixed by webpack/webpack#13062

[luisorbaiceta]

I am still getting the warning, how can I apply the fix?

[oste]

After switching to the webpack5: true feature flag I started seeing this error

> Build error occurred
TypeError: Cannot read property 'version' of undefined
    at Object.<anonymous> (/../node_modules/html-webpack-plugin/lib/file-watcher-api.js:7:67)

When opening this file locally I see this code

// @ts-check
/**
 * To use the availble webpack core api
 * we have to use different child compilers
 * depending on the used webpack version
 */
const webpackMajorVersion = Number(require('webpack/package.json').version.split('.')[0]);

// Typescript hack to test only the webpack 4 code
/** @type {import('./webpack4/file-watcher-api')} */
module.exports = webpackMajorVersion === 4
  ? require('./webpack4/file-watcher-api.js')
  // Hack to ignore './webpack5/file-watcher-api.js' from typescript:
  : require('./webpack' + 5 + '/file-watcher-api.js');

I tried hard coding the version like const webpackMajorVersion = 5; However, this gives a new error

info  - Creating an optimized production build ./../node_modules/next/dist/build/webpack-config.js:40
const isLocal=request.startsWith('.')||// Always check for unix-style path, as webpack sometimes
                      ^

TypeError: Cannot read property 'startsWith' of undefined
    at handleExternals (/../node_modules/next/dist/build/webpack-config.js:40:23)
    at webpackConfig.externals._webpack.isWebpack5.require.resolve.paths (/../node_modules/next/dist/build/webpack-config.js:82:77)
    at /../node_modules/@expo/webpack-config/webpack/addons/withUnimodules.js:141:58
    at /../node_modules/next/dist/compiled/webpack/bundle5.js:48687:21
    at deprecated (node:internal/util:98:12)
    at handleExternals (/../node_modules/next/dist/compiled/webpack/bundle5.js:48834:8)
    at next (/../node_modules/next/dist/compiled/webpack/bundle5.js:48812:9)
    at handleExternals (/../node_modules/next/dist/compiled/webpack/bundle5.js:48817:7)
    at /../node_modules/next/dist/compiled/webpack/bundle5.js:48914:5
    at Hook.eval [as callAsync] (eval at create (/../node_modules/next/dist/compiled/webpack/bundle5.js:27156:10), <anonymous>:37:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/../node_modules/next/dist/compiled/webpack/bundle5.js:26958:14)
    at /../node_modules/next/dist/compiled/webpack/bundle5.js:61525:25
    at Hook.eval [as callAsync] (eval at create (/../node_modules/next/dist/compiled/webpack/bundle5.js:27156:10), <anonymous>:19:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/../node_modules/next/dist/compiled/webpack/bundle5.js:26958:14)
    at NormalModuleFactory.create (/../node_modules/next/dist/compiled/webpack/bundle5.js:61499:28)
    at Compilation._factorizeModule (/../node_modules/next/dist/compiled/webpack/bundle5.js:37741:11)
    at /../node_modules/next/dist/compiled/webpack/bundle5.js:123999:10
    at Hook.eval [as callAsync] (eval at create (/../node_modules/next/dist/compiled/webpack/bundle5.js:27156:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/../node_modules/next/dist/compiled/webpack/bundle5.js:26958:14)
    at AsyncQueue._startProcessing (/../node_modules/next/dist/compiled/webpack/bundle5.js:123992:26)
    at AsyncQueue._ensureProcessing (/../node_modules/next/dist/compiled/webpack/bundle5.js:123979:12)
    at processImmediate (node:internal/timers:464:21)
error Command failed with exit code 1.

[andreibarabas]

Hey. @timneutkens I get the same error, and I get it from @expo/next-adapter which uses @expo/webpack-config which uses html-webpack-plugin

"@expo/webpack-config@npm:0.12.68":
  version: 0.12.68
  resolution: "@expo/webpack-config@npm:0.12.68"
  dependencies:
    ...
    html-webpack-plugin: ~4.3.0
    ....

[andreibarabas]

I see now there is an open issue on expo, and it's blocked by Create React App

expo/expo-cli#2881

[yoendymc]

have been able to solve the problem?

[hidesminimally]

No this is still broken for me.

@timneutkens

find ./node_modules/ -name package.json | xargs grep html-webpack-plugin
./node_modules//@elastic/eui/package.json:    "html-webpack-plugin": "^4.4.1",
./node_modules//html-webpack-plugin/package.json:  "name": "html-webpack-plugin",
./node_modules//html-webpack-plugin/package.json:    "html-webpack-plugin"
./node_modules//html-webpack-plugin/package.json:  "bugs": "https://github.com/jantimon/html-webpack-plugin/issues",
./node_modules//html-webpack-plugin/package.json:  "homepage": "https://github.com/jantimon/html-webpack-plugin",
./node_modules//html-webpack-plugin/package.json:  "repository": "https://github.com/jantimon/html-webpack-plugin.git",
./node_modules//html-webpack-plugin/package.json:    "url": "https://opencollective.com/html-webpack-plugin"
./node_modules//react-html-parser/demo/package.json:    "html-webpack-plugin": "^2.17.0",
./node_modules//react-input-autosize/package.json:    "html-webpack-plugin": "^2.30.1",

[maxdbarton97]

Any solutions yet?

[elsigh]

Trying to update my project to the latest next@10.1.1 with webpack5 and getting the following build error:

info  - Creating an optimized production build ..<w> [webpack.cache.PackFileCacheStrategy] Restoring pack failed from /Users/elsigh/src/songbook.studio/.next/cache/webpack/server-production.pack: Error: Invalid file version
<w> [webpack.cache.PackFileCacheStrategy] Restoring pack failed from /Users/elsigh/src/songbook.studio/.next/cache/webpack/client-production.pack: Error: Invalid file version
info  - Using external babel configuration from /Users/elsigh/src/songbook.studio/.babelrc
info  - Creating an optimized production build  
info  - Compiled successfully

> Build error occurred
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/elsigh/src/songbook.studio/node_modules/replicache/out/replicache.js
require() of ES modules is not supported.
require() of /Users/elsigh/src/songbook.studio/node_modules/replicache/out/replicache.js from /Users/elsigh/src/songbook.studio/.next/server/pages/song/[songId]/[songName].js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename replicache.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/elsigh/src/songbook.studio/node_modules/replicache/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1031:13)
    at Module.load (internal/modules/cjs/loader.js:879:32)
    at Function.Module._load (internal/modules/cjs/loader.js:724:14)
    at Module.require (internal/modules/cjs/loader.js:903:19)
    at require (internal/modules/cjs/helpers.js:74:18)

[SofianeDjellouli]

With these lines in the webpack config of next.config.js

    config.module.rules.push({
      test: /\.svg$/,
      issuer: { test: /\.(js|ts)x?$/ },
      use: ["@svgr/webpack"],
    });

I get the following error when running next build:

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration[0].module.rules[3].issuer has an unknown property 'test'. These properties are valid:
   object { and?, not?, or? }
 - configuration[1].module.rules[3].issuer has an unknown property 'test'. These properties are valid:
   object { and?, not?, or? }
    at validate (/mnt/tmp/node_modules/next/dist/compiled/schema-utils3/index.js:1:153657)
    at validateSchema (/mnt/tmp/node_modules/next/dist/compiled/webpack/bundle5.js:131116:2)
    at create (/mnt/tmp/node_modules/next/dist/compiled/webpack/bundle5.js:134538:4)
    at webpack (/mnt/tmp/node_modules/next/dist/compiled/webpack/bundle5.js:134575:32)
    at f (/mnt/tmp/node_modules/next/dist/compiled/webpack/bundle5.js:92764:15)
    at /mnt/tmp/node_modules/next/dist/build/compiler.js:4:172
    at new Promise (<anonymous>)
    at runCompiler (/mnt/tmp/node_modules/next/dist/build/compiler.js:4:106)
    at /mnt/tmp/node_modules/next/dist/build/index.js:15:418
    at Span.traceAsyncFn (/mnt/tmp/node_modules/next/dist/telemetry/trace/trace.js:5:590)
    at /mnt/tmp/node_modules/next/dist/build/index.js:15:376
    at async Span.traceAsyncFn (/mnt/tmp/node_modules/next/dist/telemetry/trace/trace.js:5:584) 

[SofianeDjellouli]

I solved it by changing the webpack rule to

    config.module.rules.push({
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    });

[sokra]

   config.module.rules.push({
      test: /\.svg$/,
      issuer: /\.(js|ts)x?$/,
      use: ["@svgr/webpack"],
    });

[SofianeDjellouli]

Now I fall into this issue.

info  - Checking validity of types  
info  - Creating an optimized production build ..<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (104kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
<w> [webpack.cache.PackFileCacheStrategy] Serializing big strings (107kiB) impacts deserialization performance (consider using Buffer instead and decode when needed)
info  - Creating an optimized production build  
info  - Compiled successfully

[lucasfrey]

   config.module.rules.push({
      test: /\.svg$/,
      issuer: /\.(js|ts)x?$/,
      use: ["@svgr/webpack"],
    });

Thanks @sokra , fixed it for me :)

[ofkarakus]

I got the same error. I used the loader property if there is one loader and used the use property if there is more than one loader. Fixed.

For example;
config.module.rules.push({ test: /.svg$/, use: ['@svgr/webpack', 'url-loader'], });
config.module.rules.push({ test: /\.ya?ml$/, loader: 'js-yaml-loader', });

[ViktoryiaVerasava]

I'm using custom error pages (_error.js and 404.js). With Next 10.2.3 after build in static/chunks/main.js file I had no code from default error page (https://github.com/vercel/next.js/blob/fa01a1593e4ba56357c04bcb506e5e41b038d836/packages/next/pages/_error.tsx).
But with Next 11.1.0 in static/chunks/main.js I have code from default error page. I see it because here is status codes string descriptions

The question is how can I opt out code from default error page? I have custom ones and don't want redundant code in the bundle.
next.config.js https://github.com/ViktoryiaVerasava/jams-fe/blob/main/next.config.js, package.json like this https://github.com/ViktoryiaVerasava/jams-fe/blob/main/package.json

[ryands17]

I'm getting this error when using yarn, target: 'serverless' and webpack5 for the following repository: https://github.com/timlrx/tailwind-nextjs-starter-blog

Is there any workaround to this? Strangely, it works when I use npm instead of yarn.

[janvarsa]

Upgraded from Next 10 to 11.1.2 and now get the following error when I npm run dev:

(node:36208) [DEP_WEBPACK_EXTERNALS_FUNCTION_PARAMETERS] DeprecationWarning: The externals-function should be defined like ({context, request}, cb) => { ... }
(Use node --trace-deprecation ... to show where the warning was created)
(node:36208) UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'startsWith' of undefined
at handleExternals (D:\Projects\chartfleau-nextjs\node_modules\next\dist\build\webpack-config.js:591:33)
at webpackConfig.externals._webpack.isWebpack5.require.resolve.paths (D:\Projects\chartfleau-nextjs\node_modules\next\dist\build\webpack-config.js:709:24)
at D:\Projects\chartfleau-nextjs\next.config.js:60:13
at D:\Projects\chartfleau-nextjs\node_modules\next\dist\compiled\webpack\bundle5.js:56154:21
at deprecated (internal/util.js:89:15)
at handleExternals (D:\Projects\chartfleau-nextjs\node_modules\next\dist\compiled\webpack\bundle5.js:56302:8)
at next (D:\Projects\chartfleau-nextjs\node_modules\next\dist\compiled\webpack\bundle5.js:56280:9)
at handleExternals (D:\Projects\chartfleau-nextjs\node_modules\next\dist\compiled\webpack\bundle5.js:56285:7)
at D:\Projects\chartfleau-nextjs\node_modules\next\dist\compiled\webpack\bundle5.js:56382:5
at Hook.eval [as callAsync] (eval at create (D:\Projects\chartfleau-nextjs\node_modules\next\dist\compiled\webpack\bundle5.js:33832:10), :37:1)
(node:36208) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)

package.json
{ "name": "learn-starter", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start" }, "dependencies": { "@nivo/core": "^0.73.0", "@nivo/line": "^0.73.0", "@nivo/swarmplot": "^0.73.0", "@react-three/drei": "^7.8.5", "@react-three/fiber": "^7.0.5", "bootstrap": "^5.0.2", "d3": "^7.0.0", "dayjs": "^1.10.6", "gsap": "^3.7.1", "moment": "^2.29.1", "mongodb": "^4.0.0", "mongodb-client-encryption": "^1.2.6", "next": "^11.1.2", "react": "^17.0.2", "react-bootstrap": "^1.6.1", "react-dom": "^17.0.2", "react-mailchimp-subscribe": "^2.1.3", "react-select": "^4.3.1", "react-spring": "^9.2.4", "react-syntax-highlighter": "^15.4.4", "split-text-js": "^1.0.3", "three": "^0.130.1" } }

next.config.js

const path = require("path")

function generateIncludes(modules) {
  return [new RegExp(`(${modules.join("|")})$`), new RegExp(`(${modules.join("|")})/(?!.*node_modules)`)]
}

const includes = generateIncludes([
  "d3",
  "d3-array",
  "d3-axis",
  "d3-brush",
  "d3-chord",
  "d3-color",
  "d3-contour",
  "d3-delaunay",
  "d3-dispatch",
  "d3-drag",
  "d3-dsv",
  "d3-ease",
  "d3-fetch",
  "d3-force",
  "d3-format",
  "d3-geo",
  "d3-hierarchy",
  "d3-interpolate",
  "d3-path",
  "d3-polygon",
  "d3-quadtree",
  "d3-random",
  "d3-scale",
  "d3-scale-chromatic",
  "d3-selection",
  "d3-shape",
  "d3-time",
  "d3-time-format",
  "d3-timer",
  "d3-transition",
  "d3-zoom",
  "internmap",
  "delaunator",
  "OrbitControls",
  "MapControls",
  "EffectComposer",
  "ShaderPass",
  "RenderPass",
  "UnrealBloomPass",
  "SSAOPass",
  "FXAAShader",
  "robust-predicates",
  "react-children-utilities",
])

const config = {
  webpack: (config) => {
    config.externals = config.externals.map((external) => {
      if (typeof external !== "function") return external
      return (context, request, callback) => {
        return includes.find((i) => i.test(request.startsWith(".") ? path.resolve(context, request) : request))
          ? callback() // i.e., not an external
          : external(context, request, callback)
      }
    })

    return config
  },
}

module.exports = config

[aligg]

I am working on upgrading to webpack 5 and am stuck on an error:

I am using, from package.json:

"next": "^11.1.2",
"next-images": "^1.7.0",
"next-transpile-modules": "^8.0.0",
"sass": "^1.32.0",
"sass-loader": "^12.1.0",

In next.config.js, we use:

const withImages = require("next-images");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE_BUNDLE === "true",
});
const withTranspileModules = require("next-transpile-modules");

and in our config there we have:

sassOptions: {
    // Mayflowers requires us to expose its includePaths so its imports work
    includePaths: mayflowerAssets.includePaths,
  },
  images: {
    disableStaticImages: true,
  },

The error I see:

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
📦 Using "development" environment variables to build the site.
info  - automatically enabled Fast Refresh for 1 custom loader
DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div(16px, 1.2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
41 │ $theme-root-font-size: 16px / 1.2;
   │                        ^^^^^^^^^^
   ╵
    styles/_uswds-theme-typography.scss 41:24  @use
    styles/app.scss 12:1                       root stylesheet

error - ./node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[7].use[1]!./node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[7].use[2]!./node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[7].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[7].use[4]!./styles/app.scss
SassError: Can't find stylesheet to import.
   ╷
24 │ @import "~uswds/dist/scss/uswds";
   │         ^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  styles/app.scss 24:9  root stylesheet
<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|/Users/aliglenesk/pfml/portal/node_modules/next/dist/compiled/css-loader/cjs.js??ruleSet[1].rules[2].oneOf[7].use[1]!/Users/aliglenesk/pfml/portal/node_modules/next/dist/compiled/postcss-loader/cjs.js??ruleSet[1].rules[2].oneOf[7].use[2]!/Users/aliglenesk/pfml/portal/node_modules/next/dist/compiled/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[7].use[3]!/Users/aliglenesk/pfml/portal/node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[7].use[4]!/Users/aliglenesk/pfml/portal/styles/app.scss': No serializer registered for SassError
<w> while serializing webpack/lib/cache/PackFileCacheStrategy.PackContentItems -> webpack/lib/NormalModule -> webpack/lib/ModuleBuildError -> SassError

Has anyone encountered with SassError? Advice appreciated!

[mubashirjamali101]

Upgrading from Next 11 to Next 12

Please Help

throws this error in the browser console, and every page becomes white.

Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

    at Object../node_modules/@next/react-refresh-utils/runtime.js (react-refresh.js?ts=1635501596990:30)
    at Object.options.factory (webpack.js?ts=1635501596990:633)
    at __webpack_require__ (webpack.js?ts=1635501596990:37)
    at __webpack_exec__ (react-refresh.js?ts=1635501596990:58)
    at react-refresh.js?ts=1635501596990:59
    at webpackJsonpCallback (webpack.js?ts=1635501596990:1179)
    at Array.forEach (<anonymous>)
    at webpack.js?ts=1635501596990:1193
    at webpack.js?ts=1635501596990:1195
    at webpack.js?ts=1635501596990:1201
./node_modules/@next/react-refresh-utils/runtime.js @ react-refresh.js?ts=1635501596990:30
options.factory @ webpack.js?ts=1635501596990:633
__webpack_require__ @ webpack.js?ts=1635501596990:37
__webpack_exec__ @ react-refresh.js?ts=1635501596990:58
(anonymous) @ react-refresh.js?ts=1635501596990:59
webpackJsonpCallback @ webpack.js?ts=1635501596990:1179
(anonymous) @ webpack.js?ts=1635501596990:1193
(anonymous) @ webpack.js?ts=1635501596990:1195
(anonymous) @ webpack.js?ts=1635501596990:1201

[Naddiseo]

@mubashirjamali101 do you have a Content Security Policy enabled on the websever? The error seems to indicate that one exists and isn't permissive enough to enable eval()

[mubashirjamali101]

@mubashirjamali101 do you have a Content Security Policy enabled on the webserver? The error seems to indicate that one exists and isn't permissive enough to enable eval()

Maybe you are right. But I don't know about the server that much, as I am only developing the front-end with nextjs (which is used as template engine in an expressjs server). So what can I do next to solve that.

[edew]

There seems to be a bug with Next and Webpack 5 when running certain dynamic import code in dev mode.

See https://github.com/edew/nextjs-webpack-module-bug for a minimal reproduction.

[mashau]

when running npm run dev, it throws error ./node_modules/node-fetch/src/utils/referrer.js:1:0 Module not found: Can't resolve 'net'. I'm using nextjs 5 and getServerSideProps to fetch data

next.config.js
/** @type {import('next').NextConfig} */ module.exports = { reactStrictMode: true, webpack: (config) => { config.externals["node:fs"] return config; }, }

package.json
{ "name": "name", "private": true, "scripts": { "build": "next build", "start": "next start", "lint": "next lint", "serve": "ts-node ./server/index.ts", "dev": "concurrently --kill-others \"npm run serve\" \"next\"" }, "dependencies": { "@types/styled-components": "^5.1.15", "body-parser": "^1.19.0", "concurrently": "^6.4.0", "cors": "^2.8.5", "express": "^4.17.1", "next": "12.0.4", "node-fetch": "^3.1.0", "react": "17.0.2", "react-dom": "17.0.2", "styled-components": "^5.3.3", "ts-node": "^10.4.0" }, "devDependencies": { "@types/cors": "^2.8.12", "@types/express": "^4.17.13", "@types/node": "16.11.10", "@types/react": "17.0.37", "eslint": "7.32.0", "eslint-config-next": "12.0.4", "typescript": "4.5.2" } }

[dulcetti]

Hi. I updated my project to Next.js 12 and activated the Webpack to version 5. And now next dev and next build doesn't work. Show the following error:

> Build error occurred
ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module.rules[5] should be one of these:
   ["..." | object { assert?, compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, scheme?, sideEffects?, test?, type?, use? }, ...]
   -> A rule.
   Details:
    * configuration.module.rules[5].loader should be a non-empty string.
      -> A loader request.
    at validate (/Users/brunodulcetti/repositories/mosaico/cupom/site/node_modules/next/dist/compiled/schema-utils3/index.js:1:153662)
    at validateSchema (/Users/brunodulcetti/repositories/mosaico/cupom/site/node_modules/next/dist/compiled/webpack/bundle5.js:130764:2)
    at create (/Users/brunodulcetti/repositories/mosaico/cupom/site/node_modules/next/dist/compiled/webpack/bundle5.js:134244:24)
    at webpack (/Users/brunodulcetti/repositories/mosaico/cupom/site/node_modules/next/dist/compiled/webpack/bundle5.js:134291:32)
    at Object.f [as webpack] (/Users/brunodulcetti/repositories/mosaico/cupom/site/node_modules/next/dist/compiled/webpack/bundle5.js:89548:16)
    at /Users/brunodulcetti/repositories/mosaico/cupom/site/node_modules/next/dist/build/compiler.js:31:40
    at new Promise (<anonymous>)
    at Object.runCompiler (/Users/brunodulcetti/repositories/mosaico/cupom/site/node_modules/next/dist/build/compiler.js:30:12)
    at /Users/brunodulcetti/repositories/mosaico/cupom/site/node_modules/next/dist/build/index.js:374:59
    at Span.traceAsyncFn (/Users/brunodulcetti/repositories/mosaico/cupom/site/node_modules/next/dist/trace/trace.js:74:26) {
  errors: [
    {
      keyword: 'oneOf',
      dataPath: '.module.rules',
      schemaPath: '#/properties/rules/oneOf',
      params: [Object],
      message: 'should match exactly one schema in oneOf',
      schema: [Array],
      parentSchema: [Object],
      data: [Array],
      children: [Array]
    }
  ],
  schema: {
    definitions: {
      Amd: [Object],
      AssetFilterItemTypes: [Object],
      AssetFilterTypes: [Object],
      AssetGeneratorDataUrl: [Object],
      AssetGeneratorDataUrlFunction: [Object],
      AssetGeneratorDataUrlOptions: [Object],
      AssetGeneratorOptions: [Object],
      AssetInlineGeneratorOptions: [Object],
      AssetModuleFilename: [Object],
      AssetParserDataUrlFunction: [Object],
      AssetParserDataUrlOptions: [Object],
      AssetParserOptions: [Object],
      AssetResourceGeneratorOptions: [Object],
      AuxiliaryComment: [Object],
      Bail: [Object],
      CacheOptions: [Object],
      CacheOptionsNormalized: [Object],
      Charset: [Object],
      ChunkFilename: [Object],
      ChunkFormat: [Object],
      ChunkLoadTimeout: [Object],
      ChunkLoading: [Object],
      ChunkLoadingGlobal: [Object],
      ChunkLoadingType: [Object],
      Clean: [Object],
      CleanOptions: [Object],
      CompareBeforeEmit: [Object],
      Context: [Object],
      CrossOriginLoading: [Object],
      Dependencies: [Object],
      DevServer: [Object],
      DevTool: [Object],
      DevtoolFallbackModuleFilenameTemplate: [Object],
      DevtoolModuleFilenameTemplate: [Object],
      DevtoolNamespace: [Object],
      EmptyGeneratorOptions: [Object],
      EmptyParserOptions: [Object],
      EnabledChunkLoadingTypes: [Object],
      EnabledLibraryTypes: [Object],
      EnabledWasmLoadingTypes: [Object],
      Entry: [Object],
      EntryDescription: [Object],
      EntryDescriptionNormalized: [Object],
      EntryDynamic: [Object],
      EntryDynamicNormalized: [Object],
      EntryFilename: [Object],
      EntryItem: [Object],
      EntryNormalized: [Object],
      EntryObject: [Object],
      EntryRuntime: [Object],
      EntryStatic: [Object],
      EntryStaticNormalized: [Object],
      EntryUnnamed: [Object],
      Environment: [Object],
      Experiments: [Object],
      ExperimentsCommon: [Object],
      ExperimentsNormalized: [Object],
      ExternalItem: [Object],
      ExternalItemFunctionData: [Object],
      ExternalItemValue: [Object],
      Externals: [Object],
      ExternalsPresets: [Object],
      ExternalsType: [Object],
      FileCacheOptions: [Object],
      Filename: [Object],
      FilenameTemplate: [Object],
      FilterItemTypes: [Object],
      FilterTypes: [Object],
      GeneratorOptionsByModuleType: [Object],
      GlobalObject: [Object],
      HashDigest: [Object],
      HashDigestLength: [Object],
      HashFunction: [Object],
      HashSalt: [Object],
      HotUpdateChunkFilename: [Object],
      HotUpdateGlobal: [Object],
      HotUpdateMainFilename: [Object],
      HttpUriAllowedUris: [Object],
      HttpUriOptions: [Object],
      HttpUriOptionsAllowedUris: [Object],
      IgnoreWarnings: [Object],
      IgnoreWarningsNormalized: [Object],
      Iife: [Object],
      ImportFunctionName: [Object],
      ImportMetaName: [Object],
      InfrastructureLogging: [Object],
      JavascriptParserOptions: [Object],
      Layer: [Object],
      LazyCompilationDefaultBackendOptions: [Object],
      LazyCompilationOptions: [Object],
      Library: [Object],
      LibraryCustomUmdCommentObject: [Object],
      LibraryCustomUmdObject: [Object],
      LibraryExport: [Object],
      LibraryName: [Object],
      LibraryOptions: [Object],
      LibraryType: [Object],
      Loader: [Object],
      MemoryCacheOptions: [Object],
      Mode: [Object],
      ModuleFilterItemTypes: [Object],
      ModuleFilterTypes: [Object],
      ModuleOptions: [Object],
      ModuleOptionsNormalized: [Object],
      Name: [Object],
      NoParse: [Object],
      Node: [Object],
      NodeOptions: [Object],
      Optimization: [Object],
      OptimizationRuntimeChunk: [Object],
      OptimizationRuntimeChunkNormalized: [Object],
      OptimizationSplitChunksCacheGroup: [Object],
      OptimizationSplitChunksGetCacheGroups: [Object],
      OptimizationSplitChunksOptions: [Object],
      OptimizationSplitChunksSizes: [Object],
      Output: [Object],
      OutputModule: [Object],
      OutputNormalized: [Object],
      Parallelism: [Object],
      ParserOptionsByModuleType: [Object],
      Path: [Object],
      Pathinfo: [Object],
      Performance: [Object],
      PerformanceOptions: [Object],
      Plugins: [Object],
      Profile: [Object],
      PublicPath: [Object],
      RawPublicPath: [Object],
      RecordsInputPath: [Object],
      RecordsOutputPath: [Object],
      RecordsPath: [Object],
      Resolve: [Object],
      ResolveAlias: [Object],
      ResolveLoader: [Object],
      ResolveOptions: [Object],
      ResolvePluginInstance: [Object],
      RuleSetCondition: [Object],
      RuleSetConditionAbsolute: [Object],
      RuleSetConditionOrConditions: [Object],
      RuleSetConditionOrConditionsAbsolute: [Object],
      RuleSetConditions: [Object],
      RuleSetConditionsAbsolute: [Object],
      RuleSetLoader: [Object],
      RuleSetLoaderOptions: [Object],
      RuleSetLogicalConditions: [Object],
      RuleSetLogicalConditionsAbsolute: [Object],
      RuleSetRule: [Object],
      RuleSetRules: [Object],
      RuleSetUse: [Object],
      RuleSetUseItem: [Object],
      ScriptType: [Object],
      SnapshotOptions: [Object],
      SourceMapFilename: [Object],
      SourcePrefix: [Object],
      StatsOptions: [Object],
      StatsValue: [Object],
      StrictModuleErrorHandling: [Object],
      StrictModuleExceptionHandling: [Object],
      Target: [Object],
      TrustedTypes: [Object],
      UmdNamedDefine: [Object],
      UniqueName: [Object],
      WarningFilterItemTypes: [Object],
      WarningFilterTypes: [Object],
      WasmLoading: [Object],
      WasmLoadingType: [Object],
      Watch: [Object],
      WatchOptions: [Object],
      WebassemblyModuleFilename: [Object],
      WebpackOptionsNormalized: [Object],
      WebpackPluginFunction: [Object],
      WebpackPluginInstance: [Object]
    },
    title: 'WebpackOptions',
    description: 'Options object as provided by the user.',
    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],
      externalsPresets: [Object],
      externalsType: [Object],
      ignoreWarnings: [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],
      snapshot: [Object],
      stats: [Object],
      target: [Object],
      watch: [Object],
      watchOptions: [Object]
    }
  },
  headerName: 'Webpack',
  baseDataPath: 'configuration',
  postFormatter: [Function: postFormatter]
}
error Command failed with exit code 1.

The fifth index of rules follows below:

{
  test: /\.+(js|jsx|mjs|ts|tsx)$/,
  loader: {
    loader: 'next-swc-loader',
    options: {
      isServer: true,
      pagesDir: '/Users/brunodulcetti/repositories/mosaico/cupom/site/src/pages',
      hasReactRefresh: false,
      fileReading: true,
      nextConfig: [Object],
      jsConfig: [Object]
    }
  },
  include: [Function (anonymous)]
}

next.config.js

const path = require('path');

const nextEnv = require('next-env');
const withPlugins = require('next-compose-plugins');
const withTM = require('next-transpile-modules')([
  '@asteroid/analytics',
  '@asteroid/components',
  '@asteroid/icons',
  '@asteroid/shared',
]);

const withNextEnv = nextEnv({
  staticPrefix: 'BRAND',
});

const {BRAND} = process.env;

const securityHeaders = [
  {
    key: 'X-Frame-Options',
    value: 'SAMEORIGIN',
  },
];

const nextConfig = {
  images: {
    domains: ['s.zst.com.br'],
  },
  webpack: config => {
    config.resolve.alias = {
      ...config.resolve.alias,
      '@asteroid/theme': path.resolve(
        __dirname,
        `node_modules/@asteroid/components/src/theme/${BRAND}/`,
      ),
      '@theme': path.resolve(__dirname, 'src/theme/'),
    };

    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.(js|ts|md)x?$/,
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            prettier: false,
            svgo: true,
            svgoConfig: {plugins: [{removeViewBox: false}]},
            titleProp: true,
          },
        },
      ],
    });

    return config;
  },
  basePath: '/cupom-de-desconto',
  eslint: {
    ignoreDuringBuilds: true,
  },
  staticPageGenerationTimeout: 120,
  compress: true,

  async headers() {
    return [
      {
        source: '/:all*(svg|jpg|png)',
        locale: false,
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=300, must-revalidate',
          },
        ],
      },
      {
        source: '/:path*',
        headers: securityHeaders,
      },
    ];
  },
};

module.exports = withPlugins([[[withNextEnv]], [withTM]], nextConfig);

package.json

{
  "name": "cupom-front",
  "version": "0.0.20",
  "scripts": {
    "dev": "NODE_OPTIONS='--inspect' next dev",
    "dev:zoom": "NEXT_PUBLIC_BRAND=zoom BRAND=zoom yarn dev",
    "prod:zoom": "NEXT_PUBLIC_BRAND=zoom BRAND=zoom next build",
    "dev:buscape": "NEXT_PUBLIC_BRAND=buscape BRAND=buscape yarn dev",
    "prod:buscape": "NEXT_PUBLIC_BRAND=buscape BRAND=buscape next build",
    "build": "next build",
    "start": "next start",
    "postbuild": "next-sitemap"
  },
  "dependencies": {
    "@asteroid/analytics": "^3.51.0",
    "@asteroid/components": "^3.51.0",
    "@asteroid/icons": "^3.51.0",
    "@asteroid/shared": "3.51.0",
    "@chakra-ui/icons": "^1.0.13",
    "@chakra-ui/react": "^1.4.2",
    "@chakra-ui/theme-tools": "1.1.2",
    "@emotion/react": "11.1.5",
    "@emotion/styled": "11.1.5",
    "@fontsource/montserrat": "^4.3.0",
    "bootstrap": "4.4.1",
    "classnames": "^2.3.1",
    "cross-fetch": "^3.1.4",
    "currency.js": "^1.2.2",
    "framer-motion": "^4.0.3",
    "js-cookie": "^3.0.1",
    "jwt-simple": "^0.5.6",
    "lodash": "^4.17.21",
    "moment": "^2.29.1",
    "newrelic": "^7.5.2",
    "next": "12.0.7",
    "next-compose-plugins": "^2.2.1",
    "next-env": "^1.1.1",
    "next-seo": "^4.24.0",
    "next-transpile-modules": "^6.4.0",
    "node-cache": "^5.1.2",
    "node-sass": "4.14.1",
    "nookies": "^2.5.2",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.3",
    "react-clamp-lines": "^3.0.2",
    "react-dom": "^17.0.2",
    "react-instantsearch-core": "^6.12.1",
    "react-lite-youtube-embed": "^2.2.2",
    "react-modal": "^3.14.3",
    "react-multi-carousel": "^2.8.2",
    "react-rating": "^2.0.5",
    "react-responsive-carousel": "^3.2.21",
    "react-share": "^4.4.0",
    "react-swipeable": "^7.0.0",
    "react-tabs": "^3.2.2",
    "snarkdown": "^2.0.0",
    "styled-components": "^5.3.5"
  },
  "devDependencies": {
    "@asteroid/eslint-config": "^3.51.0",
    "@asteroid/prettier-config": "^3.51.0",
    "@asteroid/stylelint-config": "^3.51.0",
    "@svgr/webpack": "^5.5.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/react-hooks": "^8.0.1",
    "@testing-library/user-event": "^14.4.3",
    "@types/node": "^14.6.0",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "@types/styled-components": "^5.1.26",
    "@typescript-eslint/eslint-plugin": "^4.28.2",
    "@typescript-eslint/parser": "^4.28.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.30.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-next": "^11.0.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "file-loader": "^6.2.0",
    "next-sitemap": "^1.6.124",
    "prettier": "^2.3.2",
    "typescript": "4.3.2"
  },
  "license": "MIT",
  "resolutions": {
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "styled-components": "^5"
  }
}

[lucymk]

Have upgraded to Next v12 and webpack 5 and am getting similar errors.

• The build compiles with warnings but no critical errors as far as I can see.
• running yarn dev or yarn start gives similar warning errors and end with a "Done" success message but the server doesn't start

package.json

{
  "name": "web",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js",
    "==lint&format==": "-----------------------------------------------------------------------------------",
    "format": "npm run prettier -- --write",
    "lint": "jest --config ./test/jest.lint.js",
    "prettier": "prettier \"**/*.+(js|jsx|json|yml|yaml|css|less|scss|ts|tsx|md|graphql|mdx)\"",
    "validate": "npm run lint && npm run prettier -- --list-different"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "jest-runner-eslint": {
    "cliOptions": {
      "fix": true,
      "ext": [
        ".js",
        ".ts"
      ]
    }
  },
  "dependencies": {
    "@apollo/react-hooks": "^3.1.5",
    "@sanity/block-content-to-react": "^2.0.7",
    "@sanity/client": "^1.149.13",
    "@zeit/next-css": "^1.0.1",
    "apollo-boost": "^0.4.9",
    "apollo-cache-inmemory": "^1.6.6",
    "autoprefixer": "^9.8.0",
    "clsx": "^1.1.1",
    "core-js": "^3.6.5",
    "env-cmd": "^10.1.0",
    "express": "^4.17.1",
    "express-sslify": "^1.2.0",
    "flickity": "^2.2.1",
    "framer-motion": "^3.2.2-rc.1",
    "graphql": "^15.0.0",
    "graphql-tag": "^2.10.3",
    "moment": "^2.29.4",
    "next": "^12.3.1",
    "next-compose-plugins": "^2.2.0",
    "next-fonts": "^1.1.0",
    "next-images": "^1.4.0",
    "next-pwa": "^2.4.1",
    "next-with-apollo": "^5.0.1",
    "postcss-preset-env": "^6.7.0",
    "ramda": "^0.27.0",
    "react": "^18.2.0",
    "react-apollo": "^3.1.5",
    "react-dom": "^18.2.0",
    "react-flickity-component": "^3.5.0",
    "react-select": "^4.0.2",
    "styled-components": "^5.1.1",
    "tailwindcss": "^1.4.6",
    "use-react-modal": "^0.0.9",
    "uuid": "^8.1.0"
  },
  "devDependencies": {
    "@sanity/cli": "^1.149.13",
    "@typescript-eslint/eslint-plugin": "^2.34.0",
    "@typescript-eslint/parser": "^2.34.0",
    "babel-plugin-styled-components": "^1.10.7",
    "eslint": "^7.0.0",
    "eslint-config-kentcdodds": "^14.13.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-import-resolver-typescript": "^2.0.0",
    "husky": "^4.2.5",
    "jest": "^24.9.0",
    "jest-runner-eslint": "^0.7.5",
    "lint-staged": "^10.2.4",
    "postcss-import": "^12.0.1",
    "prettier": "^2.2.1",
    "shell-quote": "^1.7.3",
    "typescript": "^3.9.3",
    "webpack-cli": "^4.10.0"
  }
}

next.config.js

const webpack = require('webpack') //eslint-disable-line
const path = require('path') //eslint-disable-line
const withPlugins = require('next-compose-plugins')
const withImages = require('next-images')
const withCSS = require('@zeit/next-css')
const withFonts = require('next-fonts')
const withPWA = require('next-pwa')

const FRONTEND_ENV_KEYS = [
  'NODE_ENV',
  'HOST',
  'SANITY_DATASET',
  'SANITY_TOKEN',
  'SANITY_ID',
  'GOOGLE_ID',
]

if (process.env.HEROKU_APP_NAME) {
  process.env.HOST = `https://${process.env.HEROKU_APP_NAME}.herokuapp.com`
}

const envPlugin = FRONTEND_ENV_KEYS.reduce(
  (result, key) => ({
    ...result,
    [`process.env.${key}`]: JSON.stringify(process.env[key]),
  }),
  {},
)

module.exports = withPlugins(
  [withImages, withCSS, withFonts, [withPWA, { pwa: { dest: 'public' } }]],
  {
    webpack: (config, { _isServer }) => {
      // adds access to specific env variables on front end

      config.plugins.push(new webpack.DefinePlugin(envPlugin))

      config.plugins.push(
        new webpack.ProvidePlugin({
          cssTheme: path.resolve(path.join(__dirname, 'styles/theme')),
        }),
      )

      return config
    },
  },
)

yarn dev and yarn start errors

❯ yarn dev
yarn run v1.22.4
warning ../../../package.json: No license field
$ node server.js
info  - Loaded env from /Users/lucyking/Documents/Projects/AVA-Breathing-Space-Web/.env
warn  - Invalid next.config.js options detected:
  - The root value has an unexpected property, webpackDevMiddleware, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
  - The root value has an unexpected property, configOrigin, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
  - The root value has an unexpected property, target, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
  - The root value has an unexpected property, webpack5, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
  - The root value has an unexpected property, pwa, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, future, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, staticPageGenerationTimeout, swcMinify, trailingSlash, typescript, useFileSystemPublicRoutes, webpack).
  - The value at .amp.canonicalBase must be 1 character or more but it was 0 characters.
  - The value at .assetPrefix must be 1 character or more but it was 0 characters.
  - The value at .experimental.outputFileTracingRoot must be 1 character or more but it was 0 characters.
  - The value at .i18n must be an object but it was null.

See more info here: https://nextjs.org/docs/messages/invalid-next-config
(node:29485) [DEP_WEBPACK_SINGLE_ENTRY_PLUGIN] DeprecationWarning: SingleEntryPlugin was renamed to EntryPlugin
(Use `node --trace-deprecation ...` to show where the warning was created)
info  - Disabled SWC as replacement for Babel because of custom Babel configuration ".babelrc" https://nextjs.org/docs/messages/swc-disabled
> [PWA] Compile server
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://nextjs.org/docs/messages/built-in-css-disabled

> [PWA] Compile server
Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.
See here for more info: https://nextjs.org/docs/messages/built-in-css-disabled

✨  Done in 1.64s.

[lmf-git]

When will this message be removed? Can I hide it? I have OCD.

[rebeccapeltz]

I'm using nextjs latest 13.4.19. I'm getting this warning:

(node:48056) [DEP_WEBPACK_MODULE_UPDATE_HASH] DeprecationWarning: Module.updateHash: Use new ChunkGraph API

Can you recommend how to find out what is causing this? Running commands from webpack cli doesn't work.

[volfcan]

I got an error while trying to launch "npm run dev"
Node -v: v20.8.0
webpack -v:
System:
OS: macOS 13.1
CPU: (8) arm64 Apple M1
Memory: 1.30 GB / 16.00 GB
Binaries:
Node: 20.8.0 - /opt/homebrew/bin/node
npm: 10.1.0 - /opt/homebrew/bin/npm
Browsers:
Brave Browser: 117.1.58.137
Chrome: 117.0.5938.92
Edge: 111.0.1661.62
Safari: 16.2
Packages:
webpack: ^5.88.2 => 5.88.2
webpack-cli: ^5.1.4 => 5.1.4

Next -v: Next.js v10.2.3

Here is:

info  - Using webpack 4. Reason: custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration[0] has an unknown property 'experiments'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
 - configuration[1] has an unknown property 'experiments'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
    at webpack (/Users/volfcan/Documents/GitHub/live-location-tracker-nextjs-client/node_modules/next/dist/compiled/webpack/bundle4.js:114756:9)
    at HotReloader.start (/Users/volfcan/Documents/GitHub/live-location-tracker-nextjs-client/node_modules/next/dist/server/hot-reloader.js:18:415)
    at async DevServer.prepare (/Users/volfcan/Documents/GitHub/live-location-tracker-nextjs-client/node_modules/next/dist/server/next-dev-server.js:16:453)
    at async /Users/volfcan/Documents/GitHub/live-location-tracker-nextjs-client/node_modules/next/dist/cli/next-dev.js:22:1
➜  live-location-tracker-nextjs-client git:(master) ✗ 
```
`

[knowankit]

Updating Next.js from version 10 to version 11 ([hash_id].webpack hot-update.json not found)

Summary

React pages are failing to load, and I've encountered a console error linked to the "[hash_id].webpack hot-update.json" file. The application is attempting to locate the file at nextjs .next/static/webpack/03bd345d4e1a5a5e73e0.webpack.hot-update.json, but it's not found in the expected location.

We've been utilizing a custom Express server, and I'm providing the code snippet below. Your assistance in resolving this issue is urgently needed due to a security vulnerability raised by a client. Please advise on how to rectify this situation promptly.

next.config.js

require('dotenv').config()

const { withSentryConfig } = require('@sentry/nextjs')
const webpack = require('webpack')
const Dotenv = require('dotenv-webpack')
const withImages = require('next-images')
const devMode = process.env.NODE_ENV !== 'production'
const withTM = require('next-transpile-modules')([
  'toasted-notes',
  'load-google-maps-api',
  'winston',
  'logform',
  'async',
  'readable-stream',
  'winston-transport',
  'is-stream'
])
const { ANALYZE } = process.env
const SentryWebpackPluginOptions = {
  silent: !!devMode
}

module.exports = withSentryConfig(
  withTM(
    withImages({
      webpack5: true,
      productionBrowserSourceMaps: true,
      future: {
        strictPostcssConfiguration: true
      },
      poweredByHeader: false,
      async rewrites () {
        return [
          {
            source: '/admin/api/emails',
            destination: '/api/emails'
          },
          {
            source: '/admin/api/auth/development',
            destination: '/api/auth/development'
          },
          {
            source: '/admin/api/auth/heartbeat',
            destination: '/api/auth/heartbeat'
          },
          {
            source: '/admin/api/auth/logout',
            destination: '/api/auth/logout'
          }
        ]
      },
      webpack: function (config, { isServer, buildId }) {
        if (ANALYZE && devMode) {
          const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

          config.plugins.push(
            new BundleAnalyzerPlugin({
              analyzerMode: 'server',
              analyzerPort: isServer ? 8888 : 8889,
              openAnalyzer: true
            })
          )
        }

        config.module.rules.push(
          {
            test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
            use: [
              {
                loader: 'url-loader?limit=10000&mimetype=application/font-woff',
                options: {}
              }
            ]
          },
          {
            test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
            use: [
              {
                loader: 'url-loader?limit=10000&mimetype=application/font-woff',
                options: {}
              }
            ]
          },
          {
            test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
            use: [
              {
                loader:
                  'url-loader?limit=10000&mimetype=application/octet-stream',
                options: {}
              }
            ]
          },
          {
            test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
            use: [
              {
                loader: 'file-loader',
                options: {}
              }
            ]
          },
          {
            test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
            use: [
              {
                loader: 'url-loader?limit=10000&mimetype=image/svg+xml',
                options: {}
              }
            ]
          }
        )

        config.plugins.push(
          new Dotenv({
            path: './.env',
            systemvars: true
          }),
          new webpack.DefinePlugin({
            'process.env.BUILD_ID': JSON.stringify(buildId)
          }),
          new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
          })
        )

        return config
      }
    })
  ), SentryWebpackPluginOptions
)

server.js

const isProd = process.env.NODE_ENV === 'production'

const express = require('express')
const next = require('next')
const app = next({ dev: !isProd, dir: './src' })
const handle = app.getRequestHandler()
const bodyParser = require('body-parser')
const cookieParser = require('cookie-parser')
const morgan = require('morgan')
const winston = require('./integrations/winston')
const nextI18NextMiddleware = require('next-i18next/middleware').default
const nextI18next = require('./i18n')
const helmet = require('helmet')
const { join } = require('path');

app.prepare()
  .then(() => {
    const server = express()

    server.use(morgan((tokens, req, res) => {
      const object = {}
      object['@timestamp'] = tokens['date'](req, res, 'iso')
      object.status = tokens.status(req, res)
      object.method = tokens.method(req, res)
      object.url = `${req.protocol}://${req.headers.host}${tokens.url(req, res)}`
      object.responseTime = tokens['response-time'](req, res)
      object.contentLength = tokens['res'](req, res, 'content-length')
      object.headers = req.headers

      return JSON.stringify(object)
    }, {
      stream: winston.stream
    }))

    server.use(bodyParser.json())
    server.use(cookieParser())
    server.use(nextI18NextMiddleware(nextI18next))

    // CSP needs to be implemented
    server.use(helmet({
      contentSecurityPolicy: false
    }))

    // Disable SSL check for dev env for now.
    const isLocal = process.env.NODE_ENV !== 'production'
    if (isLocal) process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'

    server
      // Regular next.js request handler
      .use(handle)
      .listen(3000, err => {
        if (err) {
          throw err
        }
        // eslint-disable-next-line no-console
        console.log('> Ready on http://localhost:3000')
      })
  })
  .catch((ex) => {
    console.error(ex.stack)
    process.exit(1)
  })

Package json

{
  "name": "fe",
  "license": "ISC",
  "scripts": {
    "analyze": "ANALYZE=1 yarn build",
    "build": "NODE_OPTIONS=--max_old_space_size=5120 next build src",
    "commit": "cz",
    "commitlint": "commitlint --edit $1",
    "cypress:open": "cypress open",
    "cypress:run": "percy exec -- cypress run",
    "cypress:ci": "start-server-and-test dev http://localhost:3000/admin/login cypress:run",
    "dev": "NODE_EXTRA_CA_CERTS='/usr/local/share/ca-certificates/myCA.pem' nodemon --inspect=0.0.0.0:9229 src/server.js",
    "format:ts": "prettier --write './**/*.{ts,tsx}' --config ./.prettierrc",
    "generate:hoc": "hygen hoc new --resource",
    "generate:integration": "hygen integration new --resource",
    "generate:lib": "hygen lib new --resource",
    "generate:model": "hygen model new --resource",
    "generate:redux": "hygen redux new --resource",
    "generate:type": "hygen type new --resource",
    "lint:js": "standard --fix",
    "lint:ts": "eslint './**/*.{ts,tsx}' --fix",
    "release": "release-it",
    "start": "NODE_ENV=production node src/server.js",
    "test": "jest",
    "test:watch": "jest --watch",
    "prepare": "husky install"
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "dependencies": {
    "@ant-design/icons": "4.7.0",
    "@arcgis/core": "^4.26.5",
    "@chakra-ui/core": "^0.8.0",
    "@emotion/cache": "^10.0.19",
    "@emotion/core": "^10.0.35",
    "@emotion/react": "^11.4.1",
    "@emotion/styled": "^10.0.27",
    "@itsfadnis/jsonapi-client": "^3.0.2",
    "@mui/icons-material": "^5.1.0",
    "@mui/material": "^5.1.0",
    "@sentry/nextjs": "^6.17.6",
    "@sentry/react": "^6.17.6",
    "@testing-library/cypress": "^7.0.5",
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
    "autoprefixer": "^10.3.4",
    "basic-auth": "^2.0.1",
    "body-parser": "^1.19.0",
    "classnames": "^2.2.6",
    "cookie-parser": "^1.4.5",
    "core-js": "^3.6.5",
    "cropperjs": "^1.5.12",
    "cypress": "7.3.0",
    "dayjs": "^1.10.7",
    "dotenv-webpack": "^8.0.1",
    "dragula": "^3.7.3",
    "emotion-theming": "^10.0.27",
    "enzyme": "3.9.0",
    "enzyme-to-json": "^3.5.0",
    "express": "^4.17.1",
    "file-loader": "^5.0.0",
    "he": "^1.2.0",
    "helmet": "^4.6.0",
    "http-proxy-middleware": "^2.0.6",
    "humps": "^2.0.1",
    "immer": "9.0.6",
    "jquery": "^3.5.1",
    "js-cookie": "^2.2.1",
    "json2mjml": "^1.0.3",
    "kitsu": "^9.1.19",
    "leaflet": "^1.7.1",
    "leaflet-draw": "^1.0.4",
    "load-google-maps-api": "^2.0.2",
    "lodash": "^4.17.20",
    "logrocket": "^1.0.14",
    "mapbox-gl": "^1.12.0",
    "mapbox-gl-leaflet": "^0.0.13",
    "mapbox.js": "^3.3.1",
    "mjml": "^4.12.0",
    "mjml-validator": "^4.10.1",
    "mjml2json": "^1.0.1",
    "morgan": "^1.10.0",
    "next": "11.1.3",
    "next-i18next": "^2.0.1",
    "next-images": "1.1.1",
    "next-transpile-modules": "^8.0.0",
    "node-fetch": "^2.6.1",
    "node-html-parser": "^6.1.5",
    "nookies": "^2.5.2",
    "postcss": "^8.4.8",
    "postcss-flexbugs-fixes": "^4.2.1",
    "postcss-preset-env": "^6.7.0",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-color": "^2.18.1",
    "react-dom": "^17.0.2",
    "react-flatpickr": "^3.10.6",
    "react-frame-component": "^4.1.3",
    "react-froala-wysiwyg": "^3.2.2",
    "react-highlight-words": "^0.16.0",
    "react-imgix": "^9.0.2",
    "react-intercom": "^1.0.15",
    "react-lazyload": "^3.0.0",
    "react-places-autocomplete": "^7.3.0",
    "react-player": "^2.6.2",
    "react-redux": "^7.2.1",
    "react-select": "^5.2.2",
    "react-slick": "^0.27.11",
    "react-test-renderer": "^17.0.2",
    "redux": "^4.1.2",
    "redux-thunk": "^2.3.0",
    "sanitize-html": "^2.7.0",
    "spectrum-colorpicker": "^1.8.1",
    "tailwindcss": "^2.2.17",
    "tsscmp": "^1.0.6",
    "typescript": "^4.3.5",
    "ui": "bangthetable/ui#v2.1.0",
    "unsplash-js": "^7.0.15",
    "url-loader": "^1.1.2",
    "winston": "^3.3.3"
  },
  "devDependencies": {
    "@commitlint/cli": "13.2.0",
    "@commitlint/config-conventional": "^12.1.4",
    "@commitlint/config-lerna-scopes": "^16.2.2",
    "@percy/cli": "^1.0.0-beta.52",
    "@percy/cypress": "^3.1.1",
    "@types/basic-auth": "^1.1.3",
    "@types/humps": "^2.0.1",
    "@types/jest": "^27.0.2",
    "@types/lodash": "^4.14.170",
    "@types/mjml": "^4.7.0",
    "@types/node": "^14.14.2",
    "@types/react": "^17.0.2",
    "@types/react-color": "^3.0.5",
    "@types/react-dom": "^17.0.9",
    "@types/react-redux": "^7.1.16",
    "@types/redux": "^3.6.31",
    "@types/redux-thunk": "^2.1.32",
    "@types/sanitize-html": "^2.6.2",
    "@types/styled-jsx": "^2.2.9",
    "@types/tsscmp": "^1.0.0",
    "@typescript-eslint/eslint-plugin": "^4.28.0",
    "@typescript-eslint/parser": "^4.29.1",
    "babel-eslint": "^10.1.0",
    "babel-plugin-import": "^1.13.3",
    "babel-plugin-module-resolver": "^4.1.0",
    "cypress-iframe": "^1.0.1",
    "cz-conventional-changelog": "^3.3.0",
    "eslint": "^7.29.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-simple-import-sort": "^7.0.0",
    "husky": "^7.0.0",
    "hygen": "^6.1.0",
    "jest": "^26.6.3",
    "lint-staged": "^11.0.0",
    "nodemon": "^2.0.7",
    "prettier": "^2.3.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-mock-store": "^1.5.4",
    "release-it": "^14.10.1",
    "standard": "^12.0.1",
    "start-server-and-test": "^1.12.5",
    "ts-jest": "^27.0.7",
    "webpack-bundle-analyzer": "^4.9.1"
  },
  "engines": {
    "node": "15.11.0",
    "yarn": "^1.22.1"
  },
  "resolutions": {
    "styled-jsx": "3.0.0",
    "@babel/parser": "7.7.5",
    "react-spring": "8.0.4",
    "@types/react": "17.0.2",
    "@types/react-dom": "17.0.2"
  },
  "standard": {
    "parser": "babel-eslint",
    "globals": [
      "atob",
      "HTMLCanvasElement",
      "fetch",
      "describe",
      "FormData",
      "expect",
      "it",
      "jest",
      "beforeEach",
      "afterEach",
      "localStorage",
      "test",
      "Blob",
      "$",
      "confirm",
      "MetisMenu",
      "xit"
    ]
  }
}

Additional information

Folder structure : -

app -
    - next.config.js
    - src
       - pages
       - component
       - server.js

The GET request for http://localhost:3000/_next/webpack-hmr?page=%2Fdevelopment%2Flogin continues to repeatedly hit the server without stopping.

Example

No response

[m-went]

Hi, is there am option to add node:{global:false} to next.config.mjs?

const nextConfig = {
  reactStrictMode: true,
  env: {
    apiKey: process.env.apiKey,
  },
  webpack: (config, { isServer }) => {
  
    // Important: return the modified config
    return config
  },
}

export default nextConfig

In this base webpack config i tried putting options like
config.node = { node: { global: false },
but unfortunately nothing works. Main problem is __webpack_require__ is not defined error when I'm trying to work with HERE Maps api, and by theirs docs (https://www.here.com/docs/bundle/maps-api-for-javascript-developer-guide/page/topics/react-practices.html) this solution should work, but by no means i'm unable to set this option in next :P Is there some other rule, how I should write it in my file? I also tried to write webpack5:false in next.config.mjs (like there: https://nextjs.org/docs/messages/webpack5), but received response that webpack5 is unrecognized Unrecognized key(s) in object: 'webpack5'. Can You help me and tell me, where I made a mistake?

[charlietlamb]

I'm using some external code in my application to compile latex. I've downloaded the code from this repo: https://github.com/SwiftLaTeX/SwiftLaTeX however when I use this code in my own application I get this error: 'SyntaxError: Cannot use 'import.meta' outside a module (at swiftlatexdvipdfm.a31b1cfc.js:3587:24)'. This is my next.config.js right now, I've tried to change it a couple of times, using varying webpack configurations, however this has not fixed the issue so right now my next.config.js is looking like this:

`// @ts-check

/**

• @type {import('next').NextConfig}
  */

const nextConfig = {
images: {
domains: ['avatar.iran.liara.run'],
},
}

export default nextConfig`

This is my package.json:

{ "name": "tracta", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "eslistConfig": { "extends": [ "next", "next/core-web-vitals" ] }, "dependencies": { "@babel/plugin-syntax-import-meta": "^7.10.4", "@hookform/resolvers": "^3.4.2", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-dialog": "^1.0.5", "@radix-ui/react-label": "^2.0.2", "@radix-ui/react-separator": "^1.0.3", "@radix-ui/react-slot": "^1.0.2", "@reduxjs/toolkit": "^2.2.5", "@supabase/ssr": "^0.3.0", "@supabase/supabase-js": "^2.43.4", "buffer": "^6.0.3", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "copy-webpack-plugin": "^12.0.2", "docx": "^8.5.0", "file-saver": "^2.0.5", "framer-motion": "^11.2.10", "fs": "0.0.1-security", "geist": "^1.3.0", "latex.js": "^0.12.6", "libreoffice-convert": "^1.5.1", "lucide-react": "^0.378.0", "mammoth": "^1.7.2", "next": "14.2.3", "next-transpile-modules": "^10.0.1", "office-script": "^1.7.0", "path": "^0.12.7", "pdfjs-dist": "^4.3.136", "puppeteer": "^22.10.0", "react": "^18.3.1", "react-dom": "^18", "react-fast-marquee": "^1.6.4", "react-hook-form": "^7.51.5", "react-redux": "^9.1.2", "react-resizable-panels": "^2.0.19", "tailwind-merge": "^2.3.0", "tailwindcss-animate": "^1.0.7", "url": "^0.11.3", "webpack": "^5.91.0", "zod": "^3.23.8" }, "devDependencies": { "@faker-js/faker": "^8.4.1", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "babel-plugin-transform-import-meta": "^2.2.1", "eslint": "^8", "eslint-config-next": "14.2.3", "eslint-config-prettier": "^9.1.0", "postcss": "^8", "prettier": "^3.2.5", "prettier-plugin-tailwindcss": "^0.5.14", "tailwindcss": "^3.4.1", "typescript": "^5" } }

There are some points in the js code in the project where import.meta.url is used however this is not my code so I'm not sure how to fix this, I've downloaded the code and inserted into my project as there was no npm package. Below is the code the error realtes to:

// Unconditionally accept an update to this module, we'll check if it's // still a Refresh Boundary later. // @ts-ignore importMeta is replaced in the loader import.meta.webpackHot.accept();

How can I fix this error, is there a way to change my next.config.js/mjs so that this is resolved, thanks.