Cannot upgrade to next@11 - Unexpected token / in JSON at position 0

[MaximeBernard]

What version of Next.js are you using?

11.0.0

What version of Node.js are you using?

16.3.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Docker

Describe the Bug

After installing next@11 & eslint-config-next, I can't build nor dev anymore.

$ next build
...
info  - Creating an optimized production build
Failed to compile.

./node_modules/next/dist/client/next.js
SyntaxError: Unexpected token / in JSON at position 0
    at JSON.parse (<anonymous>)


> Build error occurred
Error: > Build failed because of webpack errors
    at /Users/XXX/YYY/packages/website/node_modules/next/dist/build/index.js:15:924
    at async Span.traceAsyncFn (/Users/XXX/YYY/packages/website/node_modules/next/dist/telemetry/trace/trace.js:6:584)
error Command failed with exit code 1.

$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
error - ./node_modules/next/dist/client/dev/amp-dev.js
SyntaxError: Unexpected token / in JSON at position 0
    at JSON.parse (<anonymous>)
event - build page: /next/dist/pages/_error
wait  - compiling...
error - ./node_modules/next/dist/client/dev/amp-dev.js
SyntaxError: Unexpected token / in JSON at position 0
    at JSON.parse (<anonymous>)
Error: Cannot find module '/Users/XXX/YYY/packages/website/.next/server/pages-manifest.json'

Expected Behavior

Should work without issues

To Reproduce

I can't share my project but I had TS, ESlint & Jest already setup and working in next@10.

Error is not very explicit, maybe you can guide me through some try...catch that would be more helpful?

[jacobdubail]

I was running into this as well. Here's how I just fixed it.

I have a few imports that are arrays of data:
export const colors = [ { id: 'all', title: 'All colours', icon: null, }, ... ]

The file extension was .ts. That worked fine in Next 10. I was finally able to get error output that pointed to this as an issue. Renaming to .tsx didn't work. Only .js will work and I don't know why.

[MaximeBernard]

Thanks to #26203 I found out that downgrading

webpack5: false

solves the issue.

This seems like a regression (or at least a breaking change) to me as webpack5 configuration worked very fine in next10.

[jwilsson]

This sounds like the same issue as #26163. A possible fix is out in v11.0.1-canary.2.

[timneutkens]

Yeah duplicate of #26163

[MaximeBernard]

Tried with 11.0.1-canary.4, problem seems to be solved. Thank you 🙏

[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.