babel-plugin-component imports components on demand and reports an error Parsing error: Cannot find module "babel-preset-es2015" solution

Install the babel-plugin-component plugin

npm install babel-plugin-component -D

or

yarn add babel-plugin-component

In the .babelrc file in the root directory (at the same level as the src file) (if there is no one, create it, if it is, modify it) [can be merged into babel.config.js, please see below]

.babelrc

Add the following code

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

Error message: Parsing error: Cannot find module 'babel-preset-es2015'

Solution: Change es2015 in the .babelrc file to @babel/preset-env

{
  "presets": [["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

Note: The configuration items of .babelrc can be written into the babel.config.js file, and the .babelrc file is no longer needed.

Because the .babelrc file is only available in the old version of scaffolding, the new version is the babel.config.js file.

The merged babel.config.js file is as follows

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}