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

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"

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:

run npm init next-app to create an app. Name your project anything you like.
change dev command on package.json file to: dev:"NODE_PATH=. next"
run npm run dev
access the site. You should see a blank page instead the introduction page.
open the JavaScript console on your browser. The error should be there.

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

All components are up to date:

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

nodejs version: v12.16.3

Example of absolute paths use:

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

回答1:

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;
    },
}

来源：https://stackoverflow.com/questions/61857093/json-parse-unexpected-character-at-line-1-column-1-of-the-json-data-when-runing

标签

node.js

Webpack

next.js

vercel

zeit