删除Vue2残留配置文件解决异常：Cannot find module ‘@vue/babel-plugin-transform-vue-jsx‘

于 2024-08-26 15:50:15 发布
阅读量449 收藏
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_17328759/article/details/141565425
版权

背景

完成Vue2代码升级为Vue3后，将新代码上传至代码库。在修改源代码库代码后，启动项目，提示：Cannot find module ‘@vue/babel-plugin-transform-vue-jsx‘，尝试安装该第三方库后仍然无效。

解决方案：

删除Vue2项目配置文件：

  • .babelrc (babel依赖的配置文件，在Vue3中已替换为babel.config.js）
  • .postcssrc.js
    在这里插入图片描述
Qredsun
关注
详解Vue如何支持JSX语法
01-21
通常开发vue我们使用的是模板语法，其实还有和react相同的语法，那就是render函数，同样支持jsx语法。 Vue 的模板实际是编译成了 render 函数。 1.传统的createElement方法 createElement( 'anchored-heading', { props: { level: 1 } }, [ createElement('span', 'Hello'), ' world!' ] ) 渲染成下面这样 <anchored level=1> 　　<span>Hello</span> world! &lt;/
npm包的安装与卸载
ClassicSong的博客
03-18 6661
项目中只要知道npm installl就行了！可多了解点嘛，如果自己知道了的，别人不知道，那不就是你潜在的技能么！！ 全局、局部npm包的安装、卸载相关内容都在里边了。
babel-plugin-transform-vue-jsx:vue 2.0 jsx的babel插件
05-02
babel-plugin-transform-vue-jsx Vue 2.0 JSX的Babel插件 Babel相容性说明 如果使用Babel 7，请使用4.x 如果使用Babel 6，请使用3.x 要求 假设您将Babel与模块捆绑器（例如Webpack）一起使用，因为扩展合并帮助器已作为模块导入以避免重复。 这与babel-plugin-transform-react-jsx 。 用法 npm install\ babel-plugin-syntax-jsx\ babel-plugin-transform-vue-jsx\ babel-helper-vue-jsx-merge-props\ babel-preset-env\ --save-dev 在您的.babelrc ： { " presets " : [ " env " ], " plugin
Vue如何支持JSX语法
Tankic的博客
04-16 4735
文章目录介绍传统的createElement方法使用jsx语法使用示例写法注意 介绍 通常开发vue我们使用的是模板语法，其实还有和react相同的语法，那就是render函数，同样支持jsx语法。 Vue 的模板实际是编译成了 render 函数。 以下是普遍的说明文档，文末是作者的示例。 参考文献：vue.js官网 传统的createElement方法 createElement( 'anc...
用 jsx 写 vue 组件
Jack, what else can you do besides holding your little darling?
11-02 1751
前言 我们平常写 vue 的组件时，一般都是用的是模版，这种方式看起来比较简洁，而且 vue 作者也推荐使用这个方式，但是这种方式也有一些它的弊端，例如模版调试麻烦，或者在一些场景下模版描述可能没那么简单和方便。 下面我们要讲的是如何在 vue 里面写 jsx，知道 react 的人应该都知道 jsx，jsx 的一个特性就是非常灵活，虽然有的人觉得 jsx 很丑陋，把逻辑都写到模版的感觉，但萝卜青菜各有所爱，适合自己适合团队的就是最好的。 在使用 jsx 之前我们需要安装一个 babel 插件（b
探索Vue 2.0的JSX魅力：babel-plugin-transform-vue-jsx
最新发布
gitblog_00094的博客
05-12 853
探索Vue 2.0的JSX魅力：babel-plugin-transform-vue-jsx 项目地址:https://gitcode.com/vuejs/babel-plugin-transform-vue-jsx 项目简介 babel-plugin-transform-vue-jsx 是一个专为Vue 2.0设计的Babel插件，它允许开发者在Vue组件中使用类似React的JSX语法，从而提...
前端启动报错解决, Cannot find module ‘@vue/babel-plugn-transform-vue-jsx‘
陪你成为更好的自己
10-26 9802
第一步:cnpm install或者yarn install,当前所有命令必须当前工程目录下进行，目录结构如下： 第二步: 在控制台输入命令：npm run dev，控制台打印出如下画面，恭喜表示本项目启动成功拉。 第三步:启动报错 第四步: 解决方案: npm install @vue/babel-plugin-transform-vue-jsx --save-dev ...
jsx-next:JSX for Vue 3
03-19
适用于Vue 3.0的Babel插件JSX 添加Vue JSX支持。 English | 安装 使用以下命令安装插件： npm install @vue/babel-plugin-jsx -D 然后将插件添加到.babelrc中： { "plugins" : [ "@vue/babel-plugin-jsx" ] } ...
vite-plugin-vue2:Vite的Vue2插件
03-31
vite-plugin-vue2 用法 运行yarn add vite-plugin-vue2 --dev 将插件添加到vite.config.js // vite.config.js const { createVuePlugin } = require ( 'vite-plugin-vue2' ) module . exports = { plugins : [ ...
vue-next-jsx:一个Babel插件，为vue3提供jsx语法
03-22
plugin-vue-next-jsx -D# oryarn add @hcysunyang/babel-plugin-vue-next-jsx -D Babel配置{ " presets " : [ " @babel/env " ], " plugins " : [ " @hcysunyang/vue-next-jsx " ]}对于打字稿用户
babel-plugin-vue-css-modules:babel-plugin-vue-css-modules
05-28
@zebing/babel-plugin-vue-css-modules @zebing/babel-plugin-vue-css-modules 是一个vue css modules智能转化插件。让你在使用vue css modules的同时，无需通过:class="$style.cssname", class={styles.cssname}等...
Cannot find module @vue/babel-preset imported from babel-virtual-resolve-base.js
weixin_43466258的博客
08-02 3459
@vue/babel-preset 在 babel-virtual-resolve-base.js文件里面没找到。
前端启动项目的时候报错误: Error: Cannot find module ‘babel-plugin-transform-vue-jsx‘。
Slpyy的博客
12-02 4990
启动报错
babel开发环境报错
学习小窝
12-20 422
问题小记 记录日常开发中碰到的问题，避免下次依旧无法结局 最近在进行vue开发的时候，总是遇到bable的某一个module无法加载，后来通过百度后将babel的版本调整至一下 “@babel/preset-env”: “^7.8.7” ...
Vue JSX 快速上手指南【语法篇】
Dreamy_LIN的博客
12-30 2537
在 Javascript 里写 XML，同时拥有 Javascript 的灵活性和 HTML 的语义化。
vite项目中找不到模块“./***.vue”或其相应的类型声明——解决方案
m0_74320816的博客
09-20 931
找不到模块./App.vue”或其相应的类型声明。
Syntax Error: Error: Cannot find package ‘@vue/babel-plugin-transform-vue-jsx‘ imported from D:\code
qq_33240556的博客
04-18 800
语法错误：错误：无法从 D:\codeNew\mall\mall-admin-ui\babel-virtual-resolve-base.js 寻找导入的包 ‘@vue/babel-plugin-transform-vue-jsx’。对于使用Vue CLI创建的项目，请确认该插件被CLI正确引用并加载。这个错误信息表明在构建Vue.js项目的过程中，系统试图在D盘下的指定目录下找到并使用名为。如果你在修改这些配置时正在运行开发服务器，请重启服务器以确保新的配置生效。的包，但是未能成功定位到该包。
提示 Cannot find module ‘@vue/babel-plugin-transform-vue-jsx‘
levi_work的博客
08-24 3886
./src/main.js Module build failed (from ./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js): Error: Cannot find module '@vue/babel-plugin-transform-vue-jsx' Require stack: 解决方案 npm install @vue/babel-plugin-transform-.
@vue/babel-plugin-jsx 插件的配置
05-19
@vue/babel-plugin-jsx 是一个用于在 Vue.js 项目中使用 JSX 语法的 Babel 插件。配置它的步骤如下： 1. 安装 @vue/babel-plugin-jsx 插件。 ```bash npm install --save-dev @vue/babel-plugin-jsx ``` 2. 在 babel.config.js 或 .babelrc 文件中添加插件。 ```javascript // babel.config.js module.exports = { presets: ['@vue/cli-plugin-babel/preset'], plugins: [ [ '@vue/babel-plugin-jsx', { // 配置项 } ] ] } ``` ```json // .babelrc { "presets": ["@vue/cli-plugin-babel/preset"], "plugins": [ [ "@vue/babel-plugin-jsx", { // 配置项 } ] ] } ``` 配置项可以参考官方文档：[https://github.com/vuejs/jsx/tree/dev/packages/babel-plugin-jsx#options](https://github.com/vuejs/jsx/tree/dev/packages/babel-plugin-jsx#options)。 注意：如果你使用的是 Vue CLI 3.x 版本创建的项目，那么 babel.config.js 文件已经存在，你只需要在 plugins 数组中添加插件即可。 3. 在组件中使用 JSX 语法。 ```javascript export default { render() { // 使用 JSX 语法 return <div>Hello, World!</div> } } ``` 以上就是 @vue/babel-plugin-jsx 插件的配置步骤。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值