charting-library-examples: Nextjs v11 with webpack5 doesn't work in dev mode
I followed this tutorial: https://github.com/tradingview/charting-library-examples/tree/master/nextjs-javascript
When using npm run build
and npm run start
it works without problems. However, when using npm run dev
tradingview isn’t showing.
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 2
- Comments: 19 (6 by maintainers)
It looks like this is a bug with Next.js/Webpack and resolving ESM files. I have created a minimal reproduction here https://github.com/edew/nextjs-webpack-module-bug.
Until this is fixed in Next.js you can try one of these workarounds:
"type": "module"
line in Charting Library’s package.json to force Webpack to resolve the file as a CommonJS module https://github.com/tradingview/charting_library/blob/master/charting_library/package.json#L4https://github.com/vercel/next.js/discussions/23498#discussioncomment-1686704
is anyone working on making the chart compatible with webpack 5?
I experienced the same issue.
But this is related to the newest versions of Next.js which defaults to Webpack 5. It will work if you revert to Webpack 4:
I just opened and it seems that it works fine:
Can you please share what exact steps you did?
@icy-meteor why are you asking to provide a fix here? For me it looks like an issue of next.js as we found out in https://github.com/tradingview/charting-library-examples/issues/224#issuecomment-913567920. Maybe you would like to create an issue in nextjs repo and fix it there? Alternatively you still have the second option, have you tried it?