Gatsby - 错误 #98123 WEBPACK 我无法构建我的应用程序答案

【问题标题】：Gatsby - ERROR #98123 WEBPACK I cant build my appGatsby - 错误 #98123 WEBPACK 我无法构建我的应用程序
【发布时间】：2022-10-14 14:03:37
【问题描述】：

所以我无法构建我的 gatsby 应用程序，因为它对 window.xml 有很多依赖。许多组件是根据浏览器窗口的宽度构建的。在“gatsby build”命令之后，我得到了 WebpackError: ReferenceError: window is not defined。我在互联网上找到了将以下代码粘贴到 gatsby-node.js 中的解决方案：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === 'build-html' || stage === 'develop-html') {
    actions.setWebpackConfig({
        module: {
            rules: [
                {
                    test: /node_modules/,
                    use: loaders.null(),
                },
            ],
         },
     });
   }
};

但是在重建应用程序时出现此错误：

<w> [webpack.cache.PackFileCacheStrategy] Skipped not serializable cache item 'Compilation/modules|json|C:\Users\Damian\Documents\Ossolinsky\app\node_modules\null-loader\dist\cjs.js??ruleSet[1].rules[13].use!C:\Users\Damian\Documents\Ossolinsky\app\node_modules\gatsby\package.json': No serializer registered for JSONParseError

 ERROR #98123  WEBPACK

Generating SSR bundle failed

Unexpected end of JSON input while parsing empty string

File: node_modules\gatsby\package.json

not finished Building HTML renderer - 1.257s

【问题讨论】：

标签： reactjs webpack gatsby

【解决方案1】：

我在互联网上找到了一个解决方案，将以下代码粘贴到盖茨比-node.js

这是魔鬼的秘方。使用以下 sn-p：
{
    test: /node_modules/,
    use: loaders.null(),
},
您正在向所有 node_modules 文件夹添加一个空加载器，这里的想法是添加只要需要在服务器中忽略的实例，因为它们具有 window 依赖项。由于 rules 是一个数组，您可以执行以下操作：
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === 'build-html' || stage === 'develop-html') {
    actions.setWebpackConfig({
        module: {
            rules: [
                {
                    test: /some_package_1/,
                    use: loaders.null(),
                },
                {
                    test: /some_package_2/,
                    use: loaders.null(),
                },
                {
                    test: /some_package_3/,
                    use: loaders.null(),
                },
            ],
         },
     });
   }
};
请记住，/some_package_3/ 是一个正则表达式（因此是 test 键，这就是为什么在斜杠之间）需要匹配 node_modules 中的文件夹名称。

要知道应该将哪个字符串放置为正则表达式，通常如果您import { some_package_1 } from 'some_package_1' 意味着some_package_1 是需要添加的node_modules 内的文件夹。

some_package_1 有可能没有使用 window本身，并且它是依赖项的依赖项：在这种情况下，您需要找出它是哪一个并应用相同的推理忽略它。

【讨论】：