JSON.parse：运行 nextjs 时 JSON 数据的第 1 行第 1 列出现意外字符

Question

我的项目在访问任何页面时突然出现以下错误：

JSON.parse: unexpected character at line 1 column 1 of the JSON data

从头开始重建项目后，我发现原因是在 dev 命令上设置的节点路径，如下所示：

//package.json file
"NODE_PATH=. next"

这是一个常见的解决方案，描述了 here 以允许在导入时使用绝对路径，用于启用 typescript 的 nextjs 项目。

要重现，请按照以下步骤操作：

运行 npm init next-app 创建应用。随意命名您的项目。
将 package.json 文件上的开发命令更改为：dev:"NODE_PATH=. next"
运行 npm 运行 dev
访问网站。您应该看到一个空白页面而不是介绍页面。
在浏览器上打开 JavaScript 控制台。错误应该在那里。

这是迄今为止我发现的唯一可以在本地和 Vercel 云中使用的解决方案。任何 fix/way 保持此绝对路径都是好的

这里是堆栈。不会增加太多，但无论如何：

<anonymous> platform.js:14
    NextJS 3
        js
        __webpack_require__
        fn
    <anonymous> detect-focus.js:19
    NextJS 3
        js
        __webpack_require__
        fn
    <anonymous> supports.js:21
    NextJS 3
        js
        __webpack_require__
        fn
    <anonymous> valid-tabindex.js:55
    NextJS 3
        js
        __webpack_require__
        fn
    <anonymous> tabindex-value.js:22
    NextJS 3
        js
        __webpack_require__
        fn
    <anonymous> focus-relevant.js:19
    NextJS 3
        js
        __webpack_require__
        fn
    <anonymous> focusable.js:7
    NextJS 3
        js
        __webpack_require__
        fn
    <anonymous> focusable.strict.js:8
    NextJS 3
        js
        __webpack_require__
        fn
    <anonymous> focusable.js:42
    NextJS 3
    <anonymous> disabled.js:37
    NextJS 3
    <anonymous> Overlay.js:29
    NextJS 3
    <anonymous> index.js:3
    NextJS 3
    <anonymous> Errors.js:81
    NextJS 3
    <anonymous> ReactDevOverlay.js:44
    NextJS 3
    <anonymous> client.js:87
    NextJS 3
    <anonymous> hot-dev-client.js:1
    <anonymous> hot-dev-client.js:375
    NextJS 3
    <anonymous> webpack-hot-middleware-client.js:1
    <anonymous> webpack-hot-middleware-client.js:107
    NextJS 3
    <anonymous> next-dev.js:1
    <anonymous> next-dev.js:149
    NextJS 5

所有组件都是最新的：

//package.json
"dependencies": {
"next": "9.4.1",
"react": "16.13.1",
"react-dom": "16.13.1"
}

nodejs version: v12.16.3

绝对路径使用示例：

import TopBar from 'components/TopBar' // for components
import "public/baseLine.css" // for any public resources

Answer 1

通过更改 webpack 配置，我能够使路径完全相同：

//next.config.js file
module.exports = {  
    webpack(config) {
      config.resolve.modules.push(__dirname)
      return config;
    },
}

Answer 2

Next 9.4 现在支持并内置此功能

如果您在更新到 Next 9.4 后通过谷歌搜索来到这里，请务必使用 jsconfig.json 文件并且您没有任何地方 NODE_PATH=.。我在 PHPStorm 中找到了它，不得不深入挖掘才能找到问题的根源。

JSON.parse：运行 nextjs 时 JSON 数据的第 1 行第 1 列出现意外字符

JSON.parse: unexpected character at line 1 column 1 of the JSON data when runing nextjs

node.js

webpack

next.js

vercel