Next.js 脚本错误：找不到模块 '../../webpack-runtime.js'

Question

我想使用 Next.js 创建 RSS 脚本。

所以我在根文件夹scripts/的子文件夹中放置了一个脚本，并将其命名为build-rss.js

下一步.config.js

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

        if (!options.dev && options.isServer) {
            const originalEntry = config.entry

            config.entry = async () => {
                const entries = { ...(await originalEntry()) }
                entries['./scripts/build-rss'] = './scripts/build-rss.js'
                return entries
            }
        }

        if (!options.isServer) {
            config.resolve.fallback.fs = false
        }

        return config
    },
}

当我尝试运行我的脚本npm run build:development时，它在package.json中代表：

"scripts": {
    "clean": "rimraf .next",
    "dev": "next dev",
    "export": "next export",
    "start": "next start",
    "lint": "next lint",
    "build:development": "next build && npm run export && npm run rss:development",
    "build": "next build && npm run export && npm run rss",
    "rss:development": "node ./.next/server/scripts/build-rss.js",
    "rss": "node ./.next/serverless/scripts/build-rss.js"
}

它抛出一个错误说：

错误：找不到模块 '../../webpack-runtime.js'

但我查过了。 该文件确实存在。

错误是这以前工作过。 可能在几个版本之前，当我的其他项目使用相同的组合时。

我做了一个完整的复制品来展示错误 → https://github.com/deadcoder0904/next-script-rss-error

只需克隆它，安装它并尝试在终端中运行脚本npm run build:development以查看错误。

Answer 1

根据我们的谈话：

entry: path.join(__dirname, '..', 'path/to/file')

这就是 webpack 条目的样子。 它也可以是数组或对象：

entry: [
  path.join(__dirname, '..', 'path/to/file'),
  // other entries here
]

而您已经获得了整个 webpack 配置：

webpack: (config, options)

这样做：

const originalEntry = config.entry

config.entry = async () => {
  const entries = { ...(await originalEntry()) }
  entries['./scripts/build-rss'] = './scripts/build-rss.js'
  return entries
}

如果你可以这样做，对我来说毫无意义：

config.entry.push('./scripts/build-rss')
// config.entry['./scripts/build-rss'] = './scripts/build-rss.js'

除非我错过了 nextjs 加载 webpack 配置的方式。

即便如此，我还是建议您使用path.join以确保将其加载到正确的位置，因为该相对根将从编译 webpack 的任何位置执行。

除此之外，在你的第一个项目中你使用了 nextjs v10，现在你正在使用 nextjs v11，它从 webpack 4 升级到 5，这是一个重大升级。 我不知道细节，我只能推测，但在任何情况下，您都不应假设“因为您以前的项目正在运行，因此该项目应该使用相同的东西”，但不一定（尤其是在这种情况下）。

我认为的第一个直观的事情是 webpack 应该默认将所有内容捆绑到一个输出文件中，除非 nextjs 更改了它的配置（我不知道）。 因此，使用您添加到条目中的脚本对我来说没有意义，因为它不存在。 但是你说它确实存在，所以我只能假设 webpack 被配置为进行代码拆分并将每个条目输出到不同的文件。 在这种情况下，我不知道。 据我所知，在 webpack 5 中（我不知道 webpack 4）代码拆分在开发中被禁用并在生产中启用，因此您的问题可能是开发和生产之间的差异。

也许您可以尝试的最后一件事是更改您的!options.dev ，因为现在您只是在生产时添加该脚本，但您正在尝试使用开发运行该脚本。

如果你真的只需要让它工作，你可以将你的 nextjs 降级到你使用的以前的版本 (v10)，即使这不是一个真正的解决方案。

除此之外，我没有想法。

Answer 2

不确定您是否仍在寻找答案，但简单地更改 webpack 条目如下似乎已解决问题。

entries['scripts/build-rss'] = './scripts/build-rss.js';
// instead of entries['./scripts/build-rss']

Answer 3

我有同样的错误！ 我删除了.next文件夹并做了npm run dev ，它开始为我工作！