React项目报错 : Missing class properties transform

最新推荐文章于 2024-07-10 15:17:12 发布
原创 最新推荐文章于 2024-07-10 15:17:12 发布 · 4.7k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#babel #react

本文介绍了一种在使用create-react-app过程中遇到的配置错误及其解决方法。通过调整.babelrc文件中的preset顺序，即env配置放置在stage-0之后，可以有效避免错误的发生。

如果你报了这个错误，并且你使用的是create-react-app的脚手架，你一定是运行了yarn run eject这个命令。
其实这个配置环境与我而言一直是一个比较玄幻的事情，一步只差就能让你的错误持续很久也解决不出来，目前的版本，推荐大家按照这个配置来搭建自己的项目，如果自己时间比较充足，也可以自己一步一步的试水。
下面来说一下我的解决方式，几乎不怎么费力我就把问题锁定到了.babelrc这个文件，然后我采取了单一变量法，我把好用的.babelrc文件拷贝过来，果然就不会报这个错误了，然后我把配置一个一个删掉，运行。最后我发现居然是在presets中的两个配置导致的，我把env这个配置写到了state-0的后面，然后我把他们两个的顺序倒过来，果然就不会报这个错了。
在这里多说两句，官方文档已经明确表示过了，env已经囊括了es2015,es2016等配置，所以写了这一个，其他的就不再需要了。

{ "presets": [
    "react",
    "env",
    "stage-0"   //这个要写在env的后面
    ], "plugins": ["transform-decorators-legacy"]}
vue-cli3搭建的项目遇到Syntax Error: **/path/：Missing class properties transform.
haoyanyu_的博客
08-03 2612
事情经过是这个样子的：???? 有一天下午，天气晴朗，肚子有点饿，但是还不到下班时间，没心思敲业务代码了，于是灵机一动，在vue-cli3搭建的项目里动手实现一个event bus类吧。 于是一顿猛敲 class EventBus { constructor() { this._events = this._events ?? new Map(); } // 触发事件 fire = (event, ...args) => { // ... } // 添加事件监听
使用 webpack 无法解析 jsx 语法 Module build failed
大涛子的博客
12-27 1521
报错信息 大概意思：模块构建失败，无法解析 jsx. Module build failed: SyntaxError: /Users/yiming/Desktop/ReactTest/webpack2/app/main.js: Unexpected token webpack@v4 设置： webpack.config.js: module: { rules: [ { ...
笔记笔记笔记
热门推荐
liuhm的博客
03-26 1万+
https://www.cnblogs.com/imstudy/p/10423239.html java 聊天时间处理
vue2项目 monaco-editor 使用心得
valsedefleurs的博客
04-26 3043
现总结一下在vue2项目安装使用monaco-editor走过的一些弯路。
React 项目报错 “Syntax error: Missing class properties transform.“
简桐
02-23 4636
项目场景： 在上 React 开发过程中我遇到了一个小问题，在使用 Class 的时候会报出 Syntax error: Missing class properties transform. 这个错误，我们先来看一下这句话的意思 原因分析： 可以看到这里提到是缺少类的属性转换，那么应该就是我们的 babel 配置问题了 解决方案： 在我们的 babel 解析中加上 [ "@babel/preset-env", { targets: "> 1% in AU and not dead", shippe
React Missing class properties transform.
weixin_42481234的博客
11-06 5855
Missing class properties transform. 描述: ERROR in ./app/components/MsgComponent/msgAdd.js Module build failed: SyntaxError: Missing class properties transform. 73 | } 74 | > 75 | handle...
Missing class properties transform
07-18
- Babel配置中缺少必要的插件（如`@babel/plugin-proposal-class-properties`）。 - TypeScript配置中未开启相关特性（如`useDefineForClassFields`等）。 - 构建工具（如Webpack）的配置问题导致插件未正确应用...
error: index.js: Cannot find module '@babel/plugin-transform-class-properties' Require stack: - D:\AwesomeProject\node_modules\@babel\core\lib\config\files\plugins.js - D:\AwesomeProject\node_modules\@babel\core\lib\config\files\index.js - D:\AwesomeProject\node_modules\@babel\core\lib\index.js - D:\AwesomeProject\node_modules\metro-transform-worker\src\index.js - D:\AwesomeProject\node_modules\metro\src\DeltaBundler\Worker.js - D:\AwesomeProject\node_modules\jest-worker\build\workers\processChild.js Make sure that all the Babel plugins and presets you are using are defined as dependencies or devDependencies in your package.json file. It's possible that the missing plugin is loaded by a preset you are using that forgot to add the plugin to its dependencies: you can workaround this problem by explicitly adding the missing package to your top-level package.json. BUNDLE ./index.js error: index.js: Cannot find module '@babel/plugin-transform-class-properties' Require stack: - D:\AwesomeProject\node_modules\@babel\core\lib\config\files\plugins.js - D:\AwesomeProject\node_modules\@babel\core\lib\config\files\index.js - D:\AwesomeProject\node_modules\@babel\core\lib\index.js - D:\AwesomeProject\node_modules\metro-transform-worker\src\index.js - D:\AwesomeProject\node_modules\metro\src\DeltaBundler\Worker.js - D:\AwesomeProject\node_modules\jest-worker\build\workers\processChild.js Make sure that all the Babel plugins and presets you are using are defined as dependencies or devDependencies in your package.json file. It's possible that the missing plugin is loaded by a preset you are using that forgot to add the plugin to its dependencies: you can workaround this problem by explicitly adding the missing package to your top-level package.json. 这是报错 module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ [ 'import', { 'libraryName': '@ant-design/react-native', }, ], [ '@babel/plugin-transform-private-methods', { loose: true } ], [ '@babel/plugin-transform-class-properties', { loose: true } ], [ '@babel/plugin-transform-private-property-in-object', { loose: true } ], ], }; 这是我刚改的
最新发布
08-15
error: index.js: Cannot find module '@babel/plugin-transform-class-properties' ``` 说明你没有安装 `@babel/plugin-transform-class-properties` 这个插件，而你的 Babel 配置中却引用了它。 --- ## ✅ 解决...
The requested module '/@fs/D:/dp-project/internationalDep/dragonpass-intl-web/node_modules/.pnpm/void-elements@3.1.0/node_modules/void-elements/index.js' does not provide an export named 'default' The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them: Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation. storybook报错
06-12
'@babel/plugin-proposal-class-properties', '@babel/plugin-transform-modules-commonjs' ] }; ``` 如果项目中未包含上述配置，请尝试添加以解决模块导出问题。 #### 4. 检查 Storybook 的主配置文件 ...
Vue项目报错：Missing class properties transform.
weixin_46361785的博客
07-10 820
Vue项目报错：Missing class properties transform.
《Webpack 报错》Missing class properties transform
前端技术
03-20 1002
《Webpack 报错》Missing class properties transform
关于es6 class里的 “＝”
rljzp123的博客
04-02 423
今天在看代码的时候突然发现在class里面见到了“＝”，很诧异，后来网上搜，才发现是一个实验属性想要使用得在安装babel-plugin-transform-class-properties然后在.babelrc里配置 "plugins": ["transform-class-properties"] 特此记录一下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值