前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何在Vite项目的Js文件内写JSX?

如何在Vite项目的Js文件内写JSX?

原创
作者头像
赢难而上
发布2024-02-05 01:08:40
2640
发布2024-02-05 01:08:40

React项目一般只有组件会写.jsx,而路由routes目录下引入组件后,需要设置文件router.js后缀为router.jsx,才能正确编译不报错,如果不写为jsx文件,会爆如下错误:

代码语言:javascript
复制
Uncaught SyntaxError: Unexpected token '<' 

这对使用create-react-app创建react项目的老铁是难以想象的,webpack几乎不会出现这种错误,原因是webpack配置有关于babel的配置——加载器(babel-loader)可以识别。

解决方法:

vite.config.js文件内添加如下代码:

代码语言:javascript
复制
esbuild: {
    loader: 'jsx',
    include: /src\/.*\.jsx?$/,
    exclude: []
},

上述代码是简单但不完备的,仅是在创建项目后,添加了上述代码,也可以进行性能优化~

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档