解决react启动服务时source-map-loader插件报错找不到源文件“index.ts“的源映射文件

news/2024/11/14 14:23:53/

webpack 5: Failed to parse source map from “**********” 如下图所示:
在这里插入图片描述
The source map files links to the src/ - folder that is not distributed.

// node_modules/@mswjs/interceptors/lib/interceptors/utils/uuid.js.map
{"version":3,"file":"uuid.js","sourceRoot":"","sources":["../../-->src<--/utils/uuid.ts"] ...}

In the source-map-loader README it says: “The source-map-loader will extract from any JavaScript file, including those in the node_modules directory.”.
As for CRA 5: I think a change was added in this PR: facebook/create-react-app#8227 Commit: facebook/create-react-app@382ba21#diff-8e25c4f6f592c1fcfc38f0d43d62cbd68399f44f494c1b60f0cf9ccd7344d697 Current source: https://github.com/facebook/create-react-app/blob/9673858a3715287c40aef9e800c431c7d45c05a2/packages/react-scripts/config/webpack.config.js#L350
I’m seeing these warnings when starting the dev server using react-scripts start, If i exclude the above config by setting GENERATE_SOURCEMAP=false when starting the dev server the warnings disappear.

In case someone is lost on how to do it, just add the GENERATE_SOURCEMAP=false before the start script. In my case:

...
"scripts": {"start": "GENERATE_SOURCEMAP=false react-scripts start",...},

For Windows Users 🚀
1.Create an environment variables file named .env in the project root and add GENERATE_SOURCEMAP=false to it.

OR

2.Run npm i -D cross-env and then in the package.json file update the start script to the following:

"scripts": {"start": "cross-env GENERATE_SOURCEMAP=false react-scripts start"
}

http://www.ppmy.cn/news/1261322.html

相关文章

Boost:asio单io_service,多线程run

io_service相当于注册异步回调的一个上下文环境&#xff0c;而run相当于处理异步io的上下文&#xff08;通常是一个线程&#xff09;。 单io_service&#xff0c;多线程run&#xff0c;相当于多个线程同时来处理注册在一个io_service上的回调&#xff1a; //sio_mth.cpp #inc…

【征稿倒计时十天】第三届高性能计算与通信工程国际学术会议(HPCCE 2023)

【有ISSN、ISBN号&#xff01;&#xff01;往届均已完成EI检索】 第三届高性能计算与通信工程国际学术会议(HPCCE 2023) 2023 3rd International Conference on High Performance Computing and Communication Engineering (HPCCE 2023) 2023年12月22-24日 | 中国哈尔滨 第三…

微信小程序 跳转界面,选择货物之后,返回上一页带参数并判断参数是否存在

需求 当刚进来时选择货物&#xff0c;跳转到选择货物界面进行货物选择&#xff0c;如果货物重复&#xff0c;不再新增货物&#xff0c;如果不存在&#xff0c;则新增 prevPage.setData()用于在页面之间传递数据。它将数据设置到上一个页面&#xff08;即prevPage&#xff09;的…

如何在报表工具 FastReport Cloud 中使用 ClickHouse

FastReport Cloud 是一项云服务 (SaaS)&#xff0c;旨在为您的企业存储、编辑、构建和发送报告。您的整个团队可以从世界任何地方访问这些报告&#xff0c;并且无需创建自己的应用程序。 FastReport Cloud 试用&#xff08;qun&#xff1a;585577353&#xff09;https://chat8.…

你了解架构图吗?

技术界的扛把子架构图&#xff0c;你了解吗&#xff1f;今天我们就来聊聊它 什么是架构图呢&#xff1f; 系统架构是概念的体现&#xff0c;是对物/信息的功能与形式元素之间的对应情况所做的分配&#xff0c;是对元素之间的关系以及元素同周边环境之间的关系所做的定义。 架构…

学习IO的第五天

作业 &#xff1a;使用两个线程完成文件的拷贝写入&#xff0c;分线程1写入前半段&#xff0c;分线程2写入后半段&#xff0c;主线程用来回收资源 #include <head.h>void *sork(void *arg); void *sork2(void *arg);int file_copy(int start,int len) //拷贝的函数 {i…

分数到小数

题目链接 分数到小数 题目描述 注意点 denominator ! 0对于所有给定的输入&#xff0c;保证 答案字符串的长度小于 10000如果小数部分为循环小数&#xff0c;则将循环的部分括在括号内 解答思路 本题关键是要找到循环小数的部分并将其两侧加上括号&#xff0c;模拟除法运算…

Echarts运用之饼状图常见问题及案例代码

前言 ECharts 是一个使用 JavaScript 实现的开源可视化库,它可以帮助用户以简单的方式创建复杂的时间序列、条形图、饼图、地图等图形。 初学者,可参考下我的另外两篇文章,从基础到深入,解读饼状图的运用。 ECharts初始案例(入门) ECharts之饼图 常见问题及案例代码 数…