JSON.parse:运行nextjs时，JSON数据的第1行第1列出现意外字符 [英] JSON.parse: unexpected character at line 1 column 1 of the JSON data when runing nextjs

问题描述

访问任何页面时，我的项目突然开始出现以下错误:

My project suddenly start to give the following error, when accessing any page:

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

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

After rebuild the project from scratch i found out that the cause is the node path set on dev command, like this:

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

这是描述此处，用于启用具有Typescript启用功能的nextjs项目的导入时使用绝对路径.

This is a common solution describe here to enable use of absolute paths on imports, for nextjs projects with typescript enable.

要进行复制，请按照以下步骤操作:

To reproduce, follow the steps:

1. 运行npm init next-app来创建一个应用.根据您的喜好为您的项目命名.
2. 将package.json文件上的dev命令更改为:dev:"NODE_PATH =.next"
3. 运行npm运行开发
4. 访问该站点.您应该看到空白页，而不是简介页.
5. 在浏览器上打开JavaScript控制台.错误应该在那里.

这是我发现的唯一在本地和Vercel云中都可以使用的解决方案. 保持此绝对路径的任何修复方法都很好

This is the only solution i found that works so far locally and also in Vercel cloud. Any fix/way to keep this absolute paths is good

在这里堆栈.不会增加太多，但是可以通过任何方式添加:

Here the stack. Doesn't add much, but any 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

推荐答案

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

I was able to keep paths exactly the same by changing webpack configuration:

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

这篇关于JSON.parse:运行nextjs时，JSON数据的第1行第1列出现意外字符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！