vite 创建React中遇到的坑
bug收集:专门解决与收集bug的网站
网址:www.bugshouji.com
最近,使用vite创建react项目,
将遇到的一些问题总结了一下,分享给大家
问题1:vite中运行无法使用外部ip访问
解决方法:
方法一:
运行npx vite --host 0.0.0.0
npm run dev --host
方法二:
在vite.config.js中增加配置server:
export default defineConfig({
plugins: [react()],
server:{
host:"0.0.0.0"
}
})
问题2:不会对 js 做 jsx 的语法转换
报错:[plugin:vite:import-analysis] 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.
解决方案:
1. 安装 @babel/plugin-transform-react-jsx 的插件 npm i @babel/plugin-transform-react-jsx 2. 再配置 vite.config.js文件
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react({
babel: {
plugins: ['@babel/plugin-transform-react-jsx'],
},
})],
server: {
host: "0.0.0.0"
}
})
问题3:Uncaught ReferenceError: React is not defined
解决方案:只需要在提示错误的文件中引入React即可 代码如下: import React,{ useState } from 'react'
问题4:使用@loadable/component动态路由的实现方法
Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块
代码:
import React from 'react';
import loadable from '@loadable/component'
const modules = import.meta.glob('./*/*.js')
function bindRouter(list) {
let arr = [];
list.map((item) => { const path = `./${item.componentPath}.js`
const ComponentNode = loadable(async () => {
return modules[path]();
});
if (item.menuChilds && item.menuChilds.length > 0) {
if (item.isContainChildren) {
arr.push({
path: item.pathRoute,
element: <ComponentNode />,
children: [...bindRouter(item.menuChilds)]
})
} else {
arr.push({
path: item.pathRoute,
//element:<ComponentNode/>
children: [...bindRouter(item.menuChilds)]
})
}
} else {
arr.push({
path: item.pathRoute,
element: <ComponentNode />
})
}
})
return arr;
}
modules 打印效果如下:
modules为一个对象,对应键名为路径名,对应值为一个函数返回import导入的组件
苟有恒 , 何必三更眠五更起
相关文章
- React 新特性 React Hooks 的使用
- react完成井字棋小游戏
- react 路由守卫
- react项目的@路径配置
- React + Typescript: 开启 HMR/Hot Loader
- 「使用 webpack 5 从0到1搭建React + TypeScript 项目环境」3. 资源模块
- React魔法堂:echarts-for-react源码略读
- 前端工程师的20道react面试题自检
- React 的 setState 是同步还是异步?
- react的jsx和React.createElement是什么关系?面试常问_2023-02-27
- 阿里前端二面react面试题_2023-02-28
- react源码分析--深度理解React.Context
- 从react源码角度看React-Hydrate原理
- React源码学习进阶(六)completeWork究竟做了什么
- react源码之hooks
- react源码分析:深度理解React.Context
- react源码分析:实现react时间分片
- react的jsx和React.createElement是什么关系?面试常问5
- React源码分析4-深度理解diff算法_2023-02-20
- 创建 React 应用的 7 种方式,你用过几种?
- React/ReactNative 状态管理: rematch 如何使用
- React 许可证虽严苛,但不必过度 react