[v5] export 'default' (imported as 'echarts') was not found in 'echarts'

Version

v5

Steps to reproduce

<template>
  <div id="main" style="width: 600px; height: 400px"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    // based on prepared DOM, initialize echarts instance
    const myChart = echarts.init(document.getElementById('main'))

    // specify chart configuration item and data
    const option = {
      title: {
        text: 'ECharts entry example',
      },
      tooltip: {},
      legend: {
        data: ['Sales'],
      },
      xAxis: {
        data: ['shirt', 'cardign', 'chiffon shirt', 'pants', 'heels', 'socks'],
      },
      yAxis: {},
      series: [
        {
          name: 'Sales',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20],
        },
      ],
    }

    // use configuration item and data specified to show chart
    myChart.setOption(option)
  },
}
</script>

<style lang="scss" scoped></style>

What is expected?

Works out of the box

What is actually happening?

Not working

---

Works in v4 though, how to import echarts ESM in v5?

[pissang]

import echarts from 'echarts' is not a recommanded usage for es modules and is deprecated in 5.0

Use import * as echarts from 'echarts' instead

[susiwen8]

@wenfangdu Maybe this article can give you an answer.