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 项目。

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

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

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

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

<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

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

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

Answer 2

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

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