react 进行babel转化jsx运行之后报错

最新推荐文章于 2025-06-18 22:34:15 发布

impossible1994727

最新推荐文章于 2025-06-18 22:34:15 发布

阅读量4.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react 文章标签： react

15 篇文章

订阅专栏

本文详细记录了解决React项目中因Babel加载器版本过高导致的JSX转换错误的过程。通过安装指定版本的Babel-loader并配置.babelrc文件，最终实现了项目的正常运行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在进行react的项目搭建的过程中，搭建到babel转化jsx语法，然后就爆了如下的各种错误：

比如：

终端运行：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

cnpm i babel-preset-env babel-preset-stage-0 babel-preset-react -D

之后运行npm run dev

大体查询到的原因是babel-loader要使用7.几版本的，我终端运行上面命令的时候装的是8.几版本的，删除原本的babel-loader又报错，，

在解决这个问题的过程中爆出了各种错误，，，心很累啊；；；；

之前写过react的项目，在之前的react的项目用了yarn托管，所以尝试一了一把，用yarn装指定版本的babel-loader，在查询关于这个错误的时候貌似要用到@babel/core，所以顺手装了一个；

解决方式如下：

在搭建了基本的react项目之后，先装yarn ,命令是：npm install yarn -g

然后用yarn装@babel/core： yarn add @babel/core --dev

之后再装所需要的，我装了这些：

yarn add babel-loader@7.1.5

yarn add babel-plugin-transform-runtime

yarn add babel-preset-env babel-preset-stage-0 babel-preset-react

yarn add babel-core

在项目根目录新建.babelrc文件夹，写入：

{
    "presets": [
        "env",
        "stage-0",
        "react"
    ],
    "plugins": [
        "transform-runtime"
    ]
}

在webpack.config.js中写入：

module: {
        //所有第三方 模块匹配规则
        rules: [
            { test: /\.js|jsx?$/, use: 'babel-loader', exclude: /node_modules/ },
        ]
    }

装上这些项目运行无误了；