I updated nextjs 12, but webpack shows an error

Question

I updated nextjs 12. As shown in the official version, react and react-dom have also been updated to the latest version, and webpack has also been updated to the latest version (5).

yarn add react@latest react-dom@latest
yarn add next@12
yarn add --dev webpack@latest

But I get the following error:

ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.

configuration[0].module.rules[7] 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[0].module.rules[6].loader should be a non-empty string. -> A loader request.

configuration[0].node has an unknown property 'fs'. These properties are valid: object { __dirname?, __filename?, global? } ....[too long]

Are there any additional things I need to do when updating webpack from 4 to 5? Nextjs 12 no longer supports webpack4, so you must update to 5 unconditionally.

node -v : v16.3.0
yarn -v : 1.22.10

next.config.js


   
const withTM = require("next-transpile-modules");
const withVideos = require("next-videos");
const withBundleAnalyzer = require("@zeit/next-bundle-analyzer");

const withMDX = require("@next/mdx")({
  extension: /\.mdx?$/,
});

const FIREBASE_ENV_VARS = {
  API_KEY: process.env.APIKEY,
};

module.exports = withBundleAnalyzer(
  withVideos(
    withMDX(
      withTM({
        pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
        webpack: function(config, { isServer }) {
          config.module.rules.push({
            test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
            use: {
              loader: "url-loader",
              options: {
                limit: 100000,
                name: "[name].[ext]",
              },
            },
          });
          config.module.rules.push({
            test: /\.md$/,
            use: "raw-loader",
          });
          if (!isServer) {
            config.node = {
              fs: "empty",
            };
          }
          return config;
        },
        transpileModules: ["lodash-es"],
        images: {
          domains: ["img.youtube.com", "via.placeholder.com"],
        },
        env: {
          ...FIREBASE_ENV_VARS,
        },
        analyzeServer: ["server", "both"].includes(process.env.BUNDLE_ANALYZE),
        analyzeBrowser: ["browser", "both"].includes(
          process.env.BUNDLE_ANALYZE,
        ),
        bundleAnalyzerConfig: {
          server: {
            analyzerMode: "static",
            reportFilename: "../../bundles/server.html",
          },
          browser: {
            analyzerMode: "static",
            reportFilename: "../bundles/client.html",
          },
        },
        async redirects() {
          return [
            {
              source: "/transform",
              destination: "/",
              permanent: false,
            },
          ];
        },
      }),
    ),
  ),
);

I updated nextjs 12, but webpack shows an error

0 Answers