react-echarts icon indicating copy to clipboard operation
react-echarts copied to clipboard

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

Open renet opened this issue 1 year ago • 4 comments

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/[email protected]/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/[email protected]_@[email protected][email protected][email protected]/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/@[email protected][email protected][email protected]/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

  • [X] 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.

renet avatar Jan 09 '24 17:01 renet