babel升级,踩坑!Error: Cannot find module '@babel/core'

Error: Cannot find module '@babel/core'
[e-mail] requires Babel 7.x (the package '@babel/core'). If you'd like to use Babel 6.x ('babel-core'), you should install '[e-mail]'.
    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)
    ....

在这里插入图片描述

没找到@babel/core，需要把babel-core卸载掉，从新安装@babel/core
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.
...

上面是我的旧版本代码

---

下面是你需要更新的代码

• @babel/preset-env
• @babel/preset-react
  babel舍弃了以前的 babel-- 的命名方式，改成了@babel/-
  修改依赖和.babelrc文件后就能正常启动项目了。
  webpack不用修改（除非你是webpack 3.X 升webpack 4.X）

package.json

{
  "name": "reactjs",
  "version": "1.0.0",
  "description": "",
  "main": "components/虚拟DOM.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "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",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "react": "^16.8.6",
    "@babel/runtime": "^7.0.0",
    "react-dom": "^16.8.6"
  }
}

.babelrc

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

webpack.config.js

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin') // 导入 在内存中自动生成 index 页面的插件

// 创建一个插件的实例对象
const htmlPlugin = new HtmlWebPackPlugin({
    template: path.join(__dirname, '/src/index.html'), // 源文件
    filename: 'index.html' // 生成的内存中首页的名称
})


// 向外暴露一个打包的配置对象；   因为 webpack 是基于Node构建的；所以 webpack 支持所有Node API 和语法
// webpack 默认只能打包处理 .js 后缀名类型的文件； 像 .png .vue 无法主动处理，所以要配置第三方的loader；
module.exports = {
    mode: 'development', // development   production
    // 在 webpack 4.x 中，有一个很大的特性，就是 约定大于配置  约定，默认的打包入口路径是 src -> index.js
    plugins: [
        htmlPlugin
    ],
    module: { // 所有第三方 模块的配置规则
        rules: [ // 第三方匹配规则
            { test: /\.js|jsx$/, use: 'babel-loader', exclude: /node_modules/ }, // 千万别忘记添加 exclude 排除项
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json'], // 表示，这几个文件的后缀名，可以省略不写
        alias: { // 表示别名
            '@': path.join(__dirname, './src') // 这样，@ 就表示 项目根目录中 src 的这一层路径
        }
    }
}

如果说还没有解决你的问题,你可以把node-modules删除了. 不要用cnpm下载包了,换npm试试