当前位置: 首页 > article >正文

webpack+react中问题解决

一,Compiled with problems

1,依赖问题

首先确认我们是否下载了react的依赖,就算在package.json中查看有react依赖,也不一定会好使,所以,我们需要在安装一次依赖:pnpm install react react-dom

2,typescript配置问题

确保 tsconfig.json 文件中包含了对 JSX 的正确配置。

 "jsx": "react-jsx" // 或者 "react",取决于你的 TypeScript 版本

将此配置打开,这种转换方式允许你在 React 组件中使用 JSX,这样webpack就可以翻译react组件了

3,安装 @babel/preset-react(处理兼容问题)

如果你使用了 Babel 来转译代码,确保安装了 @babel/preset-react 并正确配置了 .babelrcbabel.config.json 文件:

json文件:

{
  "presets": ["@babel/preset-react"]
}

4,检查webpack配置

确保 webpack.config.js 中包含了对 TypeScript 和 React 的正确配置

比如:使用 ts-loaderbabel-loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.jsx?$/,
        use: 'babel-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};

5,安装类型定义

npm install @types/react @types/react-dom

目的:

为 React 的每个版本提供了稳定的类型定义。安装这些类型定义包后,你就可以在 TypeScript 项目中充分利用 React,

二, EADDRINUSE: address already in use 127.0.0.1:8082

错误 EADDRINUSE: address already in use 127.0.0.1:8082 表示端口 8082 已经被其他进程占用

这表示我们在另一个程序中占用了该端口,需要我们关闭占用端口的程序

三WARNING in DefinePlugin Conflicting values for 'process.env

表明WARNING in DefinePlugin Conflicting values for 'process.env'问题·

说明:'process.en的值被多次声明并赋值,

四 Webpack 配置文件中的 devtool 配置不符合 Webpack 5 的新规范

表明你的 Webpack 配置文件中的 devtool 配置不符合 Webpack 5 的新规范

解决:

开发模式下

// 有效的 devtool 配置示例
  devtool: 'inline-source-map', 
  devtool: 'cheap-module-source-map', 
  devtool: eval-cheap-module-source-map (推荐)

生产模式下

devtool: ' ' (推荐)

五:编译时报错

解决:

原因:在loader配置中css处理前缀的postcss 与 styl-loader 和style-loader起冲突


http://www.kler.cn/a/373416.html

相关文章:

  • C++学习:类和对象(二)
  • 【jvm】jvm对象都分配在堆上吗
  • 前端组件化
  • 快速入门HTML
  • Golang反射在实际开发中的应用场景
  • DGUS屏使用方法
  • 大模型,多模态大模型面试问题记录【时序,Qformer,卷积,感受野,ControlNet,IP-adapter】
  • Redis-事务、锁
  • Upload-labs靶场Pass-20
  • mfc | mfc集成opencv,实现摄像头监控、拍照、视频图像处理(亮度、对比度、色调、饱和度)功能
  • android OpenGL ES详解——双缓冲区、默认缓冲区和帧缓冲区
  • BeaverTail恶意软件在针对开发人员的恶意npm包中重新出现!研究人员发现开源人工智能和人工智能模型的漏洞 | 安全周报1031
  • Python学习的自我理解和想法(22)
  • 使用ubuntu On windows安装docker
  • C语言基本概念----字节与对齐
  • 计数问题[NOIP2013]
  • traceroute或tracepath区别
  • SpringCloud笔记
  • 网络自动化02:基于xlsx传入设备信息与所需执行备份配置命令,使用netmiko自动化登录分发
  • Oracle SQL 使用 ROWNUM 分页查询速度太慢的问题及解决方案!
  • apisix高性能网关实现一机一密
  • Java 文件操作详解
  • 双向链表(数据结构与算法)
  • 用for循环实现计算1+1/2!+1/3!+...的前20项之和
  • 初级python代码编程学习----简单的查看当前ip地址的图形化工具
  • Vision-Language Models for Vision Tasks: A Survey阅读笔记