[pluginviteimport-analysis] vite 提示jsx语法报错

矫情吗；* 2024-04-21 08:11 64阅读 0赞

### 参考文章 ###

*  [https://segmentfault.com/q/1010000043499356][https_segmentfault.com_q_1010000043499356]
 *  https://blog.csdn.net/kkkkkkgg/article/details/131168224

### 报错内容 ###

内容类似如下：

![image-20231209032112054][]

03:16:26 [vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

### 报错解决 ###

其实是我的代码写错位置了，原本template中的代码写在了外面

![image-20231209032536787][]

\*\*注意：\*\*我也找到文章中许多关于这个报错的解决方案是添加一个依赖，具体解决方案我也放在下面

*  安装vite的jsx包
    
        npm i @vitejs/plugin-vue-jsx --save
 *  在vite.config.ts中配置
    
        import {
               defineConfig } from 'vite';
        import vue from '@vitejs/plugin-vue';
        import vueJsx from '@vitejs/plugin-vue-jsx';
        export default defineConfig({
              
          plugins：[vue(),vueJsx()]
        }

[https_segmentfault.com_q_1010000043499356]: https://segmentfault.com/q/1010000043499356
[image-20231209032112054]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/b1f91751443f4d6b82211abf95efa2cc.png
[image-20231209032536787]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/21/4c69c983ea444c819cc70f0218128fbf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，64人围观）

还没有评论，来说两句吧...

相关阅读

相关 [pluginviteimport-analysis] vite 提示jsx语法报错

*注意：**我也找到文章中许多关于这个报错的解决方案是添加一个依赖，具体解决方案我也放在下面。其实是我的代码写错位置了，原本template中的代码写在了外面。在vite...

矫情吗；*/ 2024年04月21日 08:11/ 0 赞/ 65 阅读

相关 vite+jsx/tsx

安装jsx npm install @vitejs/plugin-vue-jsx 配置 `vite.config.js` import {

蔚落/ 2024年03月31日 12:22/ 0 赞/ 49 阅读

相关 react jsx语法

//调用react下面的createElement方法，传入第一个参数是tag //第二个是属性，第三个是子元素集合 import React

港控/mmm°/ 2023年07月06日 11:34/ 0 赞/ 30 阅读

相关 JSX语法规则

> jsx语法规则： > 1.定义虚拟DOM时，不要写引号。 > 2.标签中混入JS表达式时要用\{\}。 > 3.样式的类名指定不要用class，要用classN

冷不防/ 2023年01月04日 14:32/ 0 赞/ 168 阅读

相关 JSX语法入门学习

JSX语法入门学习 1、特点 > 1. JSX只是高级语法糖, 最终执行时还是会被转成原生js, 通过babel等方式; > 2. 更加语义化, 更加直观, 代

- 日理万妓/ 2022年11月19日 04:10/ 0 赞/ 241 阅读

相关 vite 使用tsx,jsx

使用官方提供的插件@vitejs/plugin-vue-jsx ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

梦里梦外;/ 2022年10月07日 06:47/ 0 赞/ 195 阅读

相关 mysql语法报错

select id,command,description,content from message where 1=1 and command = ? 上面一条sq

墨蓝/ 2022年05月24日 03:21/ 0 赞/ 288 阅读

相关 JSX语法使用

深入了解JSX 什么是JSX？事实上JSX就是React.createElement()方法的语法糖。 JSX的优点： 1. JSX 执行更快，因为它在编译

╰半橙微兮°/ 2022年05月10日 04:34/ 0 赞/ 280 阅读

相关 JSX语法简介

React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。 JSX简介 JSX就是Javascrip

深碍√TFBOYSˉ_/ 2022年04月24日 06:38/ 0 赞/ 244 阅读

相关 react jsx语法

jsx语法 (1)遇到{}按照js语法解析,无<>时也按照js语法解析 (2)遇到<>按照html语法解析 (3)遍历时,每一个

ゝ一世哀愁。/ 2021年07月24日 15:17/ 0 赞/ 489 阅读