时间戳

首页 > 解决方案 > 如何使用 Next.js 中的自定义 webpack 配置将“cmd”提供给 Sentry（@sentry/nextjs 包）的浏览器？

typescript - 如何使用 Next.js 中的自定义 webpack 配置将“cmd”提供给 Sentry（@sentry/nextjs 包）的浏览器？

问题描述

在我的包 json 中，我使用

"webpack": "5.58.1",
"@sentry/nextjs": "6.13.3",
"typescript": "4.0.5",
"next": "11.0.1",

我运行next build，它编译没有错误。

然后我运行next dev并在浏览器中查看 http://localhost:3000/

我在浏览器控制台中看到此错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'cwd')
    at eval (VM244 parsers.js:42)
    at Module../node_modules/@sentry/node/esm/parsers.js (_app.js?ts=1634221348526:3118)
    at Module.options.factory (webpack.js?ts=1634221348526:675)
    at __webpack_require__ (webpack.js?ts=1634221348526:37)
    at fn (webpack.js?ts=1634221348526:353)
    at eval (VM243 backend.js:9)
    at Module../node_modules/@sentry/node/esm/backend.js (_app.js?ts=1634221348526:2975)
    at Module.options.factory (webpack.js?ts=1634221348526:675)
    at __webpack_require__ (webpack.js?ts=1634221348526:37)
    at fn (webpack.js?ts=1634221348526:353)
    at eval (VM220 index.js:42)
    at Module../node_modules/@sentry/node/esm/index.js (_app.js?ts=1634221348526:3008)
    at Module.options.factory (webpack.js?ts=1634221348526:675)
    at __webpack_require__ (webpack.js?ts=1634221348526:37)
    at fn (webpack.js?ts=1634221348526:353)
    at eval (VM175 index.server.js:10)
    at Module../node_modules/@sentry/nextjs/esm/index.server.js (_app.js?ts=1634221348526:2909)
    at Module.options.factory (webpack.js?ts=1634221348526:675)
    at __webpack_require__ (webpack.js?ts=1634221348526:37)
    at fn (webpack.js?ts=1634221348526:353)
    at eval (sentry.client.config.js:2)
    at Module../sentry.client.config.js (_app.js?ts=1634221348526:2031)
    at Module.options.factory (webpack.js?ts=1634221348526:675)
    at __webpack_require__ (webpack.js?ts=1634221348526:37)
    at __webpack_exec__ (_app.js?ts=1634221348526:14966)
    at _app.js?ts=1634221348526:14967
    at Function.__webpack_require__.O (webpack.js?ts=1634221348526:86)
    at _app.js?ts=1634221348526:14968
    at webpackJsonpCallback (webpack.js?ts=1634221348526:1255)
    at _app.js?ts=1634221348526:9

在next.config.js我尝试通过将其添加到我的自定义 webpack 配置中来抑制错误：

config.resolve.fallback =  {
        "fs": false,
        "os": false,
        "path": false,
        "domain": false,
        "http": false,
        "https": false,
        "tty": false,
        "stream": false,
        "child_process": false,
        "process": false,
      };

我也尝试"process": "0.11.10",在我的 package.json 中安装，然后将其添加到我的自定义 webpack 配置中next.config.js：

plugins: [
        new webpack.ProvidePlugin({
            process: 'process/browser',
        })
    ],

这些都没有奏效。

关于如何在运行时解决此 TypeError 的任何想法？

标签： typescriptwebpacknext.jssentry

解决方案

我不得不这样做：

plugins: [
        new webpack.ProvidePlugin({
            'global.process': 'process/browser',
        })
    ],

并从中删除 "process":false

config.resolve.fallback =  {
        "fs": false,
        "os": false,
        "path": false,
        "domain": false,
        "http": false,
        "https": false,
        "tty": false,
        "stream": false,
        "child_process": false,
        "process": false,
      };

推荐阅读