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)

Most upvoted comments

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:

  1. Revert to Webpack 4, or
  2. Try deleting the "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#L4

https://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:

module.exports = {
   future: {
      webpack5: false,
   },
};

I just opened and it seems that it works fine:

image

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?