Cannot find module 'webpack/lib/node/NodeTemplatePlugin' after I updated to [email protected]

Question

After I updated to nextjs 10.1.3 I had an error when I launch yarn dev.

error - ./public/static/style.scss
Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
Require stack:
- /path_to/node_modules/mini-css-extract-plugin/dist/loader.js
- /path_to/node_modules/next/dist/compiled/webpack/bundle4.js
- /path_to/node_modules/next/dist/compiled/webpack/webpack.js
- /path_to/node_modules/next/dist/next-server/server/config-utils.js
- /path_to/node_modules/next/dist/next-server/server/config.js
- /path_to/node_modules/next/dist/next-server/server/next-server.js
- /path_to/node_modules/next/dist/server/next.js
- /path_to/node_modules/next/dist/server/lib/start-server.js
- /path_to/node_modules/next/dist/cli/next-dev.js
- /path_to/node_modules/next/dist/bin/next

Could not find files for /[lang] in .next/build-manifest.json
Could not find files for /[lang] in .next/build-manifest.json
event - compiled successfully

I found that similar issue but it did not solve my problem.

I removed packages and lock files, and also tried to install webpack etc reading this.

Which drove me to another error about tap what drove me to this so I remove what I just did, so back to the first error above.

Here is my next.config.js

const withSass = require('@zeit/next-sass');
const withCSS = require("@zeit/next-css");

module.exports = withCSS(withSass({
    webpack(config, options) {
        config.module.rules.push({
            test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100000
                }
            }
        });
        return config;
    }
}));

Answer 1

so I have similar setup as what you have i.e Next.js with Antd and Less. I got this error recently after upgrading to the latest version of nextjs (10.2.0). Fortunately for me, I stumbled on this question and clicked on the Similar issue link you attached and I got the solution from there. I resolved this by installing webpack

npm i webpack@webpack-4 --save-dev

Hopefully this would save someone else's time :). Cheers

Answer 2

In my case the project to be maintained consists of Next.js (9.3.2), Antd, Less, Typescript.

Simply REVERT what you have done to fix this problem first, and then run the command:

yarn upgrade next 10.2.3
yarn add webpack@webpack-4 --dev 

Patience is one of the keys I got in this journey.

The scenario of updating next.js version breakdown is here:

• static export;
• getStaticPaths NEEDS the fetch() method in my case, even someone says it should not be done;
• fetch() is browser dependent, which suppose not to be work server-side;
• installing yarn add isomorphic-unfetch will not aid anything, thus upgrade next.js version is the only option
• next >= 10.0.0 has the handy fix, after several hours researching, next 10.2.3 does the best, no need to change the version of typescript (^3.7.5), etc;
• finally when running the command: next build && next export, the top stack mini-css-extract-plugin/dist/loader.js locates the error Cannot find module 'webpack/lib/node/NodeTemplatePlugin'
• run yarn add webpack@webpack-4 --dev;
• re-run next build && next export