Unexpected token } in JSON

[maccman]

What version of Next.js are you using?

11

What version of Node.js are you using?

v14.16.1

What browser are you using?

Chrome

What operating system are you using?

macOs

How are you deploying your application?

Vercel

Describe the Bug

I've just upgraded to Next 11 from 10.2.3. When I try and run yarn dev I get:

alex@m1 reflect % yarn dev
yarn run v1.22.10
$ next
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/alex/repos/reflect/.env.local
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
> [PWA] PWA support is disabled
error - ./node_modules/next/dist/client/dev/amp-dev.js
SyntaxError: Unexpected token } in JSON at position 460
    at JSON.parse (<anonymous>)

Expected Behavior

Server should run.

To Reproduce

I'm assuming it's a babel issue - here's my babelrc file:

{
  "presets": [
    "@babel/preset-typescript",
    "@babel/preset-react",
    "@babel/preset-env",
    [
      "next/babel",
      {
        "preset-env": {
          "useBuiltIns": false,
          "targets": "Chrome >= 60, Safari >= 10.1, iOS >= 10.3, Firefox >= 54, Edge >= 15"
        }
      }
    ]
  ],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "dynamic-import-node",
    ["@babel/plugin-proposal-decorators", { "legacy": true }]
  ],
}

[davidye]

Seems babelrc must be a valid JSON now - you have a trailing comma at the end.

[jwilsson]

Babel uses JSON5 to parse .babelrc-files, I think it would make sense to do the same here. I'd be happy to submit a PR for it.

[maccman]

Fix that, now getting this error:

ReferenceError: regeneratorRuntime is not defined
    at eval (webpack-internal:///./app/models/book/book-store.ts:141:59)
    at _class2.books (webpack-internal:///./app/models/book/book-store.ts:202:6)
    at eval (webpack-internal:///./app/models/book/book-store.ts:206:2)
    at Object../app/models/book/book-store.ts (/Users/alex/repos/reflect/.next/server/pages/_app.js:2714:1)
    at __webpack_require__ (/Users/alex/repos/reflect/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./app/models/index.ts:12:74)
    at Object../app/models/index.ts (/Users/alex/repos/reflect/.next/server/pages/_app.js:2813:1)
    at __webpack_require__ (/Users/alex/repos/reflect/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./services/api/meetings.ts:6:68)
    at Object../services/api/meetings.ts (/Users/alex/repos/reflect/.next/server/pages/_app.js:4732:1)

[maccman]

I can't reproduce this on a bare instance of nextjs though, so I'm going to close this until I have more information.

[maccman]

If anyone come across the same issue, I solved it by deleting my .next cache. Perhaps should be part of the upgrade guide if it isn't.

[GorvGoyl]

I had a commented line in .babelrc file, removing that worked for me.

[timneutkens]

This has been solved in next@canary.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.