babel version reason run error, solution

Problem encountered while learning babel, run error after installing with old version of Babel naming rule. Preliminary find reason is because there are compatibility problems between different versions of Babel preset and plugin, prompting that npx babel-upgrade can be upgraded automatically, but my upgrade failed, prompting parsing error, later saw this article, the problem was solved.Now I'm picking up my notes as they were meant to be (duplicate, mainly lazy [manual dog])

Summary of babel upgrade to 7.X pit

Recently I have been busy with my work and haven't played on the front end for a while.Today I try to build a project and find pits. Previously very good configuration files made various errors.After investigation, we found that the original babel upgraded to a large version, which has reached 7.X. Here I summarize the pits that were trampled during the upgrade process.

Error: Cannot find module '@babel/core'
babel-loader@8 requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    ....

No @babel/core was found, you need to uninstall babel-core and install @babel/core again
npm un babel-core
npm i -D @babel/core

ERROR in ./src/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.
...

Uninstall babel-preset-*, reinstall @babel/preset-*, and modify presets in.babelrc

Like mine

npm:
- babel-preset-env
+ @babel/preset-env
- babel-preset-react
+ @babel/preset-react
- babel-preset-stage-0

.babelrc:
- "presets": ["react", "env", "stage-0", "mobx"]
+ "presets": ["@babel/preset-react", "@babel/preset-env", "mobx"]

In addition to the above preset, I also used babel-preset-mobx
But @babel/preset-mobx was not found, from babel-preset-mobx git submission log Looking up, the author already supports the latest babel.In subsequent tests, it was found that the functionality of mobx could work as well.
In addition, stage-* is deprecated

ERROR in ./src/index.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: this.setDynamic is not a function
    at PluginPass.pre
    ...

This time it's a plugin. Just uninstall babel-plugin-* and reinstall @babel/plugin-*
Then modify the.babelrc file
Specific package names can be found in npm warehouse Find in

Final File

.babelrc:

{
    "presets": ["@babel/preset-env", "@babel/preset-react", "mobx"],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-transform-runtime"
    ]
}

package.json:

"devDependencies": {
    "@babel/core": "^7.1.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2"
    "babel-preset-mobx": "^2.0.0",
    ...
  },
  "dependencies": {
    "@babel/runtime": "^7.0.0",
    ...
  }

summary

For this upgrade, I am not writing about any functional changes. You can search for them yourself

In general, Babel abandons the previous naming of babel-*-* and changes to @babel/*-*
After modifying the dependencies and.babelrc files, the project will start properly.
The webpack does not need to be modified (unless you are a webpack 3.X L webpack 4.X)

The above is only my problem, if there are other problems, you can refer to the materials Upgrade to Babel 7 Upgrade Guide

 

The author of this work: Shurlormes Original, Adopt the Signature-Non-Commercial Use-Prohibited Deduction 4.0 International License Agreement

 

From: https://segmentfault.com/a/1190000016458913 Author: Shurlormes

Tags: Javascript React Webpack npm REST

Posted on Mon, 11 May 2020 11:17:00 -0700 by duckduckgoose