Nextjs v11 with webpack5 doesn't work in dev mode

[SimonVillage]

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.

[timocov]

I just opened and it seems that it works fine:

Can you please share what exact steps you did?

[mkromann]

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

[Tokenspec]

The problem is repeated at random whenever I'm installing a new package and I'm force to override the node modules folder with a working copy every time this happens, does anyone have a fix? changing the next.config.js did not work for me.

[mnkhod]

is anyone working on making the chart compatible with webpack 5?

[tlrjs]

I am using Next.js v 11.1 and the trading view charts also aren't rendering in dev mode. After doing a yarn build and deploying to production they show.

This didn't use to be an issue on Next.js 9.

My guess is it's a problem with webpack 5 though. Previous versions of Next used webpack 4.

[tlrjs]

I just opened and it seems that it works fine:

Can you please share what exact steps you did?

Can you try with Next.js 11 and let us know if it's working for you?

[edew]

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

vercel/next.js#23498 (comment)

[asharimh97]

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

I tried this, it works when I revert the webpack to v4, but I have another module that only works when I use the webpack 5. So I tried another workaround, but after I deleted the type: "module" while using webpack 5 the chart won't show up.

*PS: I use NextJS 10

[rahulsuresh-git]

Any update on this issue? Nextjs 12 doesn't support going back to webpack 4 anymore.
So the only way out is to drop to Nextjs 11. Does anyone have a workaround?

[timocov]

@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 #224 (comment). 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?

[rahulsuresh-git]

@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 #224 (comment). 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?

Hey, thanks for the reply.
I had tried the second method first but ran into a lot of errors. Then I tried the first method, and I seemed to get it working at the cost of downgrading several other packages as well that were dependant on Next.js 12 or webpack 5.
Now I upgraded all my packages to latest version and tried method 2 again, and it seems to work perfectly with Next.js 12 and webpack 5.
Just took a while to tinker around and hit the right configuration to get it working! Thanks for your help @timocov 💯

Appreciate it :)

[matthewlilley]

@timocov this is still an issue with both solutions given and Next.js 12, which is unfortunately not allowing us to make use of this library despite paying. Are you unable to distribute this in a normal fashion via NPM?

[timocov]

Unfortunately we're unable to publish charting library as a npm package so far.

We'll try to fix the issue caused by esm and will go back as far as we get anything.

[skedzior]

has anyone tried using dynamic imports?

import dynamic from 'next/dynamic';

const TradingViewChart = dynamic(() => import('../components/charts/TradingViewChart'), {
  ssr: false
});

[timocov]

It seems the issue has been fixed by nextjs team and now it works with the latest nextjs version. Please check it out and say if it doesn't work for you.

[tukuyoma]

@timocov I am still having the same issue I use nextjs11.1.2 and if I use webpack 5 I get this error module is not defined ReferenceError: module is not defined at Module../public/static/charting_library/charting_library.esm.js (http://localhost:3000/_next/static/chunks/src_components_spot-trading_TVChartContainer_index_tsx.js:839:30) at Module.options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1645630009449:677:31) at __webpack_require__ (http://localhost:3000/_next/static/chunks/webpack.js?ts=1645630009449:29:33) at fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1645630009449:346:21) at Module../src/components/spot-trading/TVChartContainer/index.tsx (http://localhost:3000/_next/static/chunks/src_components_spot-trading_TVChartContainer_index_tsx.js:23:89) at Module.options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1645630009449:677:31) at __webpack_require__ (http://localhost:3000/_next/static/chunks/webpack.js?ts=1645630009449:29:33) at Function.fn (http://localhost:3000/_next/static/chunks/webpack.js?ts=1645630009449:346:21)

[timocov]

@tukuyoma It is not supposed to work with v11. The minimal nextjs version that works is 12.1.0.

[tukuyoma]

@timocov thanks it worked

[achepukov]

Upgrade nextjs to v 12.1 fix the issue for me as well! Thanks a lot, I spent 3 days to figure it out!