Cannot find module 'webpack/lib/node/NodeTemplatePlugin' after I updated to nextjs@10.4

user_7942242 0
Viewed 1765

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;
    }
}));
webpack next.js node.js javascript
2 Answers

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

user_70116720

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
user_181311460
Related