Error when using in Next.js: Unexpected token 'export'

[renet]

Description

When I added react-echarts to my Next.js 14 project using the pages router, I get the following error message when calling a page that imports an EChart component:

 ⨯ /Users/M305642/dev/mtrust/mtrust-portal/node_modules/.pnpm/echarts@5.4.3/node_modules/echarts/core.js:20
export * from 'echarts/lib/export/core.js';
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at mod.require (/Users/M305642/dev/mtrust/mtrust-portal/node_modules/.pnpm/next@14.0.1_@babel+core@7.23.2_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/require-hook.js:64:28)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/Users/M305642/dev/mtrust/mtrust-portal/node_modules/.pnpm/@kbox-labs+react-echarts@1.0.3_echarts@5.4.3_react@18.2.0/node_modules/@kbox-labs/react-echarts/dist/index.js:41:19)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19) {
  page: '/project/651feaa07bf885750abf7b68/metering'
}

Link to Reproduction

https://github.com/renet/next-echarts-repro

Steps to reproduce

1. Checkout
2. run pnpm i
3. run pnpm dev
4. Open http://localhost:3000
5. See error message

JS Framework

Next.js / React TS

Version

1.0.3

Browser

Safari

Operating System

• macOS
• Windows
• Linux

Additional Information

The sandbox did not work, throwing an pnpm-specific error, but it works just fine locally with a clean pnpm install. The error does not occur, when the app router is used.

[hugocxl]

Hi @renet, thanks for commenting on the issue.

It seems that is not related to this React wrapper but the way Next is transpiling ECharts modules. I'm treating ECharts as external so I am not exactly sure about what is causing it.

Could you dig deeper into the issue? (like is happening in other React wrappers libs around ECharts, or is it reported in the ECharts repo) I'm a little bit short of time these days but I'm glad to help as far as I can.

[renet]

I stumbled upon a workaround while evaluating an alternative library than echarts for usage with the Next.js pages router: Nivo.

So the same thing happened there and the fix works for echarts, as well. Just add the following to your next.config.js:

transpilePackages: [
  "@kbox-labs/react-echarts",
  "echarts",
],

As you see, I had to add both dependencies to the transpilePackages prop. Removing either one of them breaks it again. Also, I've started my journey with the echarts-for-react lib that is no longer maintained. It causes a client-side error in dev mode, but actually renders. So, as the "Unexpected token" error does not occur with that package, I assume it's possible for you to fix this error within @kbox-labs/react-echarts.

[hugocxl]

That's great @renet! Precious feedback. I'll give it a look as soon as I got some time and sorry for the inconveniences. Thanks!

[YuriGor]

Hi @renet if you don't need server-side rendering of echarts - dynamic importing works well for me:

import dynamic from 'next/dynamic';
const Echarts = dynamic(() => import('../Echarts'), { ssr: false }); 

Where ../Echarts is my wrapper component with my defaults. Direct dynamic import of next-echarts should also work.

[renet]

At least with the latest version of echarts (v5.5.1) and Next.js v14.2.10, this problem is occurring again, this time with a little different error message, but I guess the same root cause:

Failed to compile.

../../node_modules/.pnpm/@kbox-labs+react-echarts@1.4.0_echarts@5.5.1_react@18.2.0/node_modules/@kbox-labs/react-echarts/dist/index.js
Module not found: ESM packages (echarts/core) need to be imported. Use 'import' to reference the package instead. https://nextjs.org/docs/messages/import-esm-externals

https://nextjs.org/docs/messages/module-not-found

Neither the transpilePackages config, nor the dynamic import were able to fix it for me. :(
But it works with the latest Version of @kbox-labs/react-echarts (v1.4.0) + v5.4.3 of echarts.
It would be awesome if you could take another attempt at fixing this. Preferably I'd love to not having to explicitly transpile both packages anymore.