时间戳

首页 > 解决方案 > TypeError：升级到 Nextjs 11 后无法读取未定义的属性“forEach”

next.js - TypeError：升级到 Nextjs 11 后无法读取未定义的属性“forEach”

问题描述

已将我的项目升级到 nextjs 11，不幸的是我的一些代码出错了。

我同样将 React 从 16.0.0 版本升级到 17.0.0，所以我可以升级到 next.js。

这是出错的代码片段，它位于我的 next.config.js 文件中：

config.module.rules[1].oneOf.forEach((moduleLoader, i) => {
            Array.isArray(moduleLoader.use) && moduleLoader.use.forEach((l) => {
                if (l.loader.includes("css-loader") && l.options.modules && l.options.modules.exportLocalsConvention) {
                    l.options = {
                        ...l.options,
                        modules: {
                            ...l.options.modules,
                            exportLocalsConvention: "camelCase",
                        }
                    }
                }
            });
        });

如果我完全删除代码，则会弹出与同一文件上的 svg config 相关的不同错误：

webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
            // svg to react component loader 
            config.module.rules.push({
                test: /\.svg$/,
                use: [{
                    loader: '@svgr/webpack',
                    options: {
                        "svgoConfig": {
                            "plugins": [{ "cleanupIDs": false }]
                        }
                    }
                }],
            })

关于正在发生的事情有什么想法吗？

我知道他们有新的相关功能，但不完全确定如何去做并确保我的项目运行类似。

谢谢

标签： next.js

解决方案

Next.js 11 现在在后台使用 webpack 5，因此您需要相应地更新 webpack 配置。

这里有一个小的迁移指南，但它显然没有涵盖所有的变化。

我认为你现在也可以选择退出 webpack 5，如果你想更新 Next.js 但现在不想弄乱 webpack 配置：

// add this key in your next.config
module.exports = {
  webpack5: false,
}

推荐阅读