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

矫情吗；* 2024-04-21 08:11 80阅读 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 条评论，80人围观）

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

相关阅读

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

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

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

相关 vite+jsx/tsx

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

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

相关【React】JSX语法

目录一、前言二、JSX介绍三、JSX原理 1、DOM结构示例 2、HTML的JSX结构示例 3、编译之后的

桃扇骨/ 2023年10月16日 14:08/ 0 赞/ 66 阅读

相关 react jsx语法

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

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

相关 jsx 基本语法

JSX 是一种 JavaScript 的语法扩展，运用于 React 架构中，其格式比较像是模版语言，但事实上完全是在 JavaScript 内部实现的。元素是构成 React

快来打我*/ 2023年02月25日 03:43/ 0 赞/ 19 阅读

相关 JSX语法规则

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

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

相关 vite 使用tsx,jsx

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

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

相关 JSX语法使用

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

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

相关 JSX语法简介

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

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

相关 react jsx语法

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

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