Error with v5, nextjs, can't import minimal bundle

[hoangtrung99]

Version

echarts 5.1.1 echarts-for-react v3.0.1

Steps to reproduce

import * as echarts from 'echarts/core' got SyntaxError: Unexpected token 'export'

What is expected?

I hope to enter echart from core

What is actually happening?

But I got error: SyntaxError: Unexpected token 'export' environment:

• Nextjs 10.2.0
• Typescript
• No next config file

---

My tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

My code

import { useTheme } from '@material-ui/core'
import { BarSeriesOption } from 'echarts'
// import ReactECharts from 'echarts-for-react'
import ReactEChartsCore from 'echarts-for-react/lib/core'
import * as echarts from 'echarts/core'
import { useMemo } from 'react'

type ECOption = echarts.ComposeOption<BarSeriesOption>

const RestReportChart: React.VFC = () => {
  const theme = useTheme()

  const options: ECOption = useMemo(() => {
    return {
      xAxis: {
        type: 'value',
        show: false,
      },
      yAxis: {
        type: 'category',
        data: ['売上実績', 'Aヨミ', 'Aヨミ', 'Aヨミ', 'Aヨミ', 'Aヨミ', 'Aヨミ'],
      },
      series: [
        {
          data: [
            {
              value: 20000,
              itemStyle: {
                color: '#a90000',
              },
            },
            15000,
            8000,
            7000,
            11000,
            13000,
            14000,
          ],
          type: 'bar',
        },
      ],
    }
  }, [])
  return <ReactEChartsCore echarts={echarts} option={options} notMerge={true} lazyUpdate={true} />
}

export default RestReportChart

[hoangtrung99]

if import like

import ReactECharts from 'echarts-for-react'
import * as echarts from 'echarts/core'

is not faulty, is there any conflict here?

[hustcc]

Too little information！

Try

import ReactECharts from 'echarts-for-react/esm/core'
import * as echarts from 'echarts/core'

[hoangtrung99]

Too little information！

Try

import ReactECharts from 'echarts-for-react/esm/core'
import * as echarts from 'echarts/core'

try it got error

/Users/hoangtrung/solashi/graph-web/node_modules/echarts-for-react/esm/core.js:1
import { __assign, __extends } from "tslib";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at compileFunction (<anonymous>)
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.echarts-for-react/esm/core (/Users/hoangtrung/solashi/graph-web/.next/server/pages/dashboard.js:554:18)
    at __webpack_require__ (/Users/hoangtrung/solashi/graph-web/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/Dashboard/GroupRestReport/RestReportChart.tsx:9:84)
    at Object../src/components/Dashboard/GroupRestReport/RestReportChart.tsx (/Users/hoangtrung/solashi/graph-web/.next/server/pages/dashboard.js:33:1)
    at __webpack_require__ (/Users/hoangtrung/solashi/graph-web/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/Dashboard/GroupRestReport/GroupRestReport.tsx:7:74)
    at Object../src/components/Dashboard/GroupRestReport/GroupRestReport.tsx (/Users/hoangtrung/solashi/graph-web/.next/server/pages/dashboard.js:22:1)
    at __webpack_require__ (/Users/hoangtrung/solashi/graph-web/.next/server/webpack-runtime.js:33:42)
/Users/hoangtrung/solashi/graph-web/node_modules/echarts-for-react/esm/core.js:1
import { __assign, __extends } from "tslib";
^^^^^^

[hoangtrung99]

@hustcc Detail error SyntaxError: Unexpected token 'export'

/Users/hoangtrung/solashi/graph-web/node_modules/echarts/charts.js:27
export * from './lib/export/charts';
^^^^^^

SyntaxError: Unexpected token 'export'
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.echarts/charts (/Users/hoangtrung/solashi/graph-web/.next/server/pages/dashboard.js:565:18)
    at __webpack_require__ (/Users/hoangtrung/solashi/graph-web/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/Dashboard/GroupRestReport/RestReportChart.tsx:11:72)
    at Object../src/components/Dashboard/GroupRestReport/RestReportChart.tsx (/Users/hoangtrung/solashi/graph-web/.next/server/pages/dashboard.js:33:1)
    at __webpack_require__ (/Users/hoangtrung/solashi/graph-web/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/Dashboard/GroupRestReport/GroupRestReport.tsx:7:74)
    at Object../src/components/Dashboard/GroupRestReport/GroupRestReport.tsx (/Users/hoangtrung/solashi/graph-web/.next/server/pages/dashboard.js:22:1)
    at __webpack_require__ (/Users/hoangtrung/solashi/graph-web/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./src/components/Dashboard/GroupRestReport/index.ts:2:74)
/Users/hoangtrung/solashi/graph-web/node_modules/echarts/charts.js:27
export * from './lib/export/charts';
^^^^^^

[MYKEU]

Experiencing the same issue with:

import ReactEChartsCore from 'echarts-for-react/lib/core';

Seems to only happen during server side rendering (I think)

[mihaildu]

Hello, I had the same issue. I don't think you can import echarts/core.js or echarts/charts.js or anything from lib directory inside echarts in the next.js app since it runs in a node environment and the code is transpiled to ES2015 (it needs CommonJS). For example, for lib: https://github.com/apache/echarts/blob/master/build/pre-publish.js#L78 https://github.com/apache/echarts/blob/master/build/pre-publish.js#L120

You can check inside node_modules/echarts/core.js that it's ES2015 javascript.

In v4 it was transpiled to CommonJS. Not sure what a good fix is here. Importing like this worked for me

import * as echarts from 'echarts';
// no need to register any charts e.g. echarts.use(...)

I think this will import everything, so tree-shaking is not enabled. Based on what you do you might not need tree-shaking at all. For example I just build the graph and serve it via an api, so it doesn't load in a browser where the bundle has to be minimal.

[finkrer]

You have to wrap your config with next-transpile-modules in next.config.js. Mine is wrapped with require('next-transpile-modules')(['echarts', 'zrender']), then it works.

[Adonis0123]

you can try to use dynamic to fix it

import dynamic from 'next/dynamic'
const EchartsLineChart = dynamic(
  () => import('@/components/EchartsLineChart'),
  { ssr: false },
)

EchartsLineChart

import ReactEChartsCore from 'echarts-for-react/lib/core'
import { LineChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
  DatasetComponent,
} from 'echarts/components'
import * as echarts from 'echarts/core'
import { SVGRenderer } from 'echarts/renderers'
import React, { useEffect, useRef } from 'react'

// Register the required components
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  // CanvasRenderer,
  DatasetComponent,
  SVGRenderer,
])

It's useful to me

[ranlix]

you can try to use dynamic to fix it

import dynamic from 'next/dynamic'
const EchartsLineChart = dynamic(
  () => import('@/components/EchartsLineChart'),
  { ssr: false },
)

EchartsLineChart

import ReactEChartsCore from 'echarts-for-react/lib/core'
import { LineChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
  DatasetComponent,
} from 'echarts/components'
import * as echarts from 'echarts/core'
import { SVGRenderer } from 'echarts/renderers'
import React, { useEffect, useRef } from 'react'

// Register the required components
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  // CanvasRenderer,
  DatasetComponent,
  SVGRenderer,
])

It's useful to me

Does this config be added into _app.ts?

[aurevae]

you can try to use dynamic to fix it

import dynamic from 'next/dynamic'
const EchartsLineChart = dynamic(
  () => import('@/components/EchartsLineChart'),
  { ssr: false },
)

EchartsLineChart

import ReactEChartsCore from 'echarts-for-react/lib/core'
import { LineChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  TitleComponent,
  DatasetComponent,
} from 'echarts/components'
import * as echarts from 'echarts/core'
import { SVGRenderer } from 'echarts/renderers'
import React, { useEffect, useRef } from 'react'

// Register the required components
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LineChart,
  // CanvasRenderer,
  DatasetComponent,
  SVGRenderer,
])

It's useful to me

Does this config be added into _app.ts?

Hi, I understood. He means you create a component file for echarts content. and where you use where you dynamic import it.

[Eng-Fouad]

Import:

import EChartsReactCore from 'echarts-for-react/esm/core.js';

not:

import ReactEChartsCore from 'echarts-for-react/lib/core.js';

[lxiiiixi]

Try this:

yarn add next-transpile-modules

And add in next.config.js

/** @type {import('next').NextConfig} */
const path = require('path');
const withTM = require("next-transpile-modules")(["echarts", "zrender"]);

const nextConfig = withTM({
  reactStrictMode: true,
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')],
  },
})

module.exports = nextConfig

[xgovernor]

next-transpile-modules is no longer required. It officially marged to NextJS 13.1.

Here check this: https://github.com/martpie/next-transpile-modules/releases/tag/the-end

[finkrer]

Correct, just make sure to include transpilePackages: ['echarts', 'zrender'] in your config.