echarts: Error in mounted hook: “TypeError: Cannot read properties of undefined (reading ‘init‘)“

created at 03-21-2022 views: 10

solution

It may have been written like this

import echarts from 'echarts'

After changing to this import, there will be no error

import * as echarts from 'echarts'

reason

My personal feeling is related to the way we import. If we use this import echarts1 from 'echarts' to import, it is a simple form of import import, which means that the default exposure in echarts exists in the variable echarts1 inside, and the error is reported because we refer to the init method in echarts, which shows that it is not defined, so it is guessed that the init method in echarts is not exposed by default.

the way to extend the --import import:

  1. Universal way
import * as m1 from "./js/demo.js"; // means to store all the exposed data in demo.js in variable m1
console.log(m1);
console.log(m1.default.skill()); // When exposed by default, call the properties or methods in it with an extra layer of default
  1. Structure assignment method
import {
             school,
             name
         } from "./js/demo.js"; //The content assigned by the structure corresponds to the exposed data set in demo.js
         import {
             school as school1,
             name as name1
         } from "./js/demo2.js"; //The content assigned by the structure is in one-to-one correspondence with the exposed data set in demo.js, and the content assigned by deconstruction can be named differently
  1. A convenient way, only for the form exposed by default
import m3 from "./js/demo3.js"; //All data in m3 is exposed by default
created at:03-21-2022
edited at: 03-21-2022: