React项目启动报错 ./src/reportWebVitals.js Module not found: Can‘t resolve ‘web-vitals‘ in ‘C:

最新推荐文章于 2025-01-14 10:57:20 发布

管乐明

最新推荐文章于 2025-01-14 10:57:20 发布

阅读量5k

点赞数 3

分类专栏：学习笔记文章标签： react npm

本文链接：https://blog.csdn.net/qq_18835599/article/details/117998999

版权

学习笔记专栏收录该内容

4 篇文章

订阅专栏

本文介绍了解决React项目中出现的web-vitals模块未找到错误的方法。通过npm安装web-vitals，确保项目能够正常编译。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

错误提示：

"/src/reportWebVitals.js Module not found: Can't resolve 'web-vitals' in 
'E:\ReactResources\RectProjects\test-app\src'"

原因：

无法编译 -/src/reportWebVitals.js 找不到模块：无法解析“web-vitals”。

解决办法：

需要安装 Web Vitals。打开终端并运行以下命令：
npm i web-vitals --save-dev

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

管乐明

关注关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

Module not found: Error: Can‘t resolve ‘./app‘ in ‘/home/user/Desktop/my_app/src‘

suiusoar

01-11

650

模块未找到：错误：无法解析 './app'，路径：'/home/user/Desktop/my_app/src'

node报错./node_modules/_history@4.10.1@history/esm/history.js Module not found: Can‘t resolve ‘@babel/

Kristen的博客

07-05

691

新拉取的项目在npm run的时候遇到了以下node报错报错的意思是没有找到4.10.1版本的history包没有找到babel依赖，所以无法运行。于是我们可以运行一下下方这个指令，来确认一下当前项目下history的版本：运行结果 history包的版本确实是4.10.1 那么为什么会出现找不到babel依赖的问题呢？我去GitHub上翻看了一下4.10.0的history包依赖版本，发现他们的babel依赖已经升级成7了，而我们项目使用的babel依赖还是6。最后查了一下，4.7.2的hist

参与评论您还未登录，请先登录后发表或查看评论

react中新增了reportWebVitals有什么作用

weixin_39838846的博客

02-07

5281

reportWebVitals.js 中有如下代码： const reportWebVitals = onPerfEntry => { if (onPerfEntry && onPerfEntry instanceof Function) { import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { getCLS(onPerfEntry); getF

Failed to compile./src/reportWebVitals.jsModule not found: Can‘t resolve ‘web-vitals‘ in ..

前端-尔嵘

11-15

1653

React 启动报错：解决办法：这是因为少安装了 web-vitals 模块，使用cnpm安装一下： cnpm i web-vitals --save-dev 重新启动一下： cnpm start

启动React项目 Module not found: Can‘t resolve ‘web-vitals‘ in ‘C:\Laboratory_train\my-app\src‘

比起未来可期，我更喜欢如约而至

09-04

5168

问题描述 npx create-react-app my-app 使用以上命令出错： npm start / yarn start 使用以上命令启动出错问题解决全局找到reportWebVitals.js文件，在index.js中注释掉这两句即可运行。因为笔者以前在一个项目里面使用过offline cache，按照以下方法试过没有用，还是贴出来供大家参考。 yarn 完整性检测失败 ...

【React】Module not found: Error: Can‘t resolve ‘web-vitals‘ in ‘H:\hello_react\hello-react\src‘

z_yikoujihui的博客

08-22

934

运行之后浏览器打开页面报错。找到index.js。

react项目找不到 web-vitals 模块

m0_72056325的博客

01-14

500

这个错误提示表明在你的 React 项目中，文件在第 5 行到第 24 行出现了问题，具体是找不到web-vitals模块。

【React + Antd 教程】Failed to compile. Module not found: Can't resolve 'antd/dist'完美解决

菜鸟的后花园

04-28

1万+

【React + Antd 教程】Failed to compile. Module not found: Can’t resolve 'antd/dist’完美解决今天在学习React + Antd时出了个不能编译的报错 Failed to compile. ./src/App.js Module not found: Can't resolve 'antd/dist' in 'G:\***...

Module not found: Error: Can’t resolve ‘path’ in ‘E:\credit-review-system\src\layout\components’

weixin_45503733的博客

09-08

859

Module not found: Error: Can’t resolve ‘path’ in ‘E:\credit-review-system\src\layout\components’

解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)

10-15

然而，在安装和使用antd的过程中，有时会遇到“Can't resolve './locale'”的错误，这个问题通常是由于与moment.js库的版本冲突所导致的。在本文中，我们将深入探讨这个问题的原因，并提供一种有效的解决方案。 ...

react项目启动报错 Can‘t resolve ‘web-vitals‘ in ‘C:\WorkSpace\demo\reactProjects\react-web\src‘ERROR in

striving_ze的博客

12-27

630

重新安装‘web-vitals’，执行命令。

ERROR in Entry module not found: Error: Can‘t resolve ‘./src‘ in ‘D:\contract\ipfs\go-ipfs\react_app

zqq_2016的博客

09-07

930

Can't resolve 'webpack/hot'

负数

02-20

888

报错： Can't resolve 'webpack/hot' 解决方案：需要把插件下载到本地

针对搭建[React]项目脚手架的报错问题npx create-react-app react-basic

weixin_46705294的博客

12-22

427

今天刚解决了,折磨了我一天.分享给大家!希望大家少走弯路.废话不说直接上报错代码,进入项目把 node_modules 文件夹删掉, 重新 npm i。然后重新执行 npm start。没关系,攻城狮永不言弃.

React脚手架安装

weixin_59089605的博客

01-05

812

1、错误信息 "Can't resolve 'web-vitals'" 通常出现在 JavaScript 模块打包器无法找到或解析名为 'web-vitals' 的模块或包时。2、 Module not found: Error: Can't resolve 'web-vitals' in 'D:\2023年\create\my-app\src'3、进入创建的文件夹。

Module not found: Error: Can‘t resolve “xxx“ in “xxx“导致该问题的解决方案

最新发布

03-24

<think>好的，用户遇到了一个错误：“Module not found: Error: Can't resolve './src/main.js’”。我需要先理解这个错误的原因，然后给出解决方案。首先，这个错误通常出现在使用Webpack或其他打包工具时，它们无法找到入口文件。首先，用户的项目结构中可能缺少了src目录下的main.js文件，或者路径不正确。需要检查项目根目录下是否有src文件夹，里面是否有main.js。如果用户使用的是类似Vue或React这样的框架，可能需要确认默认的入口文件是否存在，或者是否被错误地删除或重命名了。其次，可能是配置文件的问题，比如webpack.config.js中的entry属性指向了错误的路径。用户可能修改了配置，但路径没有更新，或者存在拼写错误。这时候需要检查配置文件中的入口路径是否正确，是否使用了相对路径，比如应该是entry: './src/main.js'而不是其他路径。另外，也有可能是因为文件扩展名的问题。比如，用户可能将文件保存为.main.jsx或者其他扩展名，但配置中没有指定，导致无法解析。这时候需要确认文件扩展名是否匹配，或者在配置中添加相应的扩展名解析。还有可能是node_modules的问题，虽然不太常见，但有时候依赖安装不正确会导致打包工具无法正常工作。这时候可以尝试删除node_modules和package-lock.json，然后重新运行npm install。用户的开发环境也是一个考虑因素。比如，使用Vue CLI或Create React App创建的项目，通常会有默认的入口文件配置。如果用户手动修改了配置，可能会引发问题。这时候建议用户检查是否无意中更改了配置文件，或者是否按照官方文档正确配置。另外，操作系统的大小写敏感问题也可能导致路径错误。例如，在Windows上路径不区分大小写，但在Linux或macOS上可能会，如果路径中的大小写与实际不一致，就会报错。需要检查路径中的src和main.js的大小写是否正确。最后，可能需要检查导入语句是否有误。例如，在项目的其他文件中是否有错误的import语句指向了不存在的main.js，或者在HTML文件中是否正确引用了打包后的文件。总结下来，解决步骤应该是：1. 确认文件路径和名称是否正确；2. 检查打包工具的配置文件；3. 检查文件扩展名和导入语句；4. 重新安装依赖；5. 考虑操作系统的大小写问题。需要逐步排查这些可能性，帮助用户找到问题所在。</think>遇到 `Module not found: Error: Can't resolve './src/main.js'` 错误时，通常表示项目构建工具（如 Webpack、Vite 等）无法找到入口文件。以下是逐步排查和解决问题的指南： --- ### 第一步：检查文件路径 1. **确认文件是否存在** - 检查项目根目录下是否有 `src` 文件夹。 - 检查 `src` 目录中是否包含 `main.js` 文件（或 `main.ts`、`main.jsx` 等变体）。 2. **验证路径大小写** - 在 Linux/macOS 系统中，路径区分大小写。确保路径 `./src/main.js` 与实际文件名完全一致。 --- ### 第二步：检查构建工具配置 1. **Webpack 配置** - 打开 `webpack.config.js`，检查 `entry` 配置项： ```javascript module.exports = { entry: './src/main.js' // 确保路径正确 }; ``` - 如果使用 `vue-cli` 或 `create-react-app`，默认入口文件通常为 `src/main.js`，无需手动配置。 2. **Vite 配置** - 检查 `vite.config.js` 中的 `root` 和入口文件设置： ```javascript export default { root: './src', // 确保根目录正确 build: { rollupOptions: { input: './src/main.js' // 入口文件路径 } } } ``` --- ### 第三步：检查依赖和项目结构 1. **验证 `package.json` 脚本** - 确保启动命令（如 `npm run dev`）指向正确的配置文件。例如： ```json { "scripts": { "dev": "vite serve src/main.js" } } ``` 2. **重新安装依赖** - 删除 `node_modules` 和 `package-lock.json`（或 `yarn.lock`）： ```bash rm -rf node_modules package-lock.json npm install ``` --- ### 第四步：特殊框架注意事项 - **Vue 项目** - 如果使用 `vue-cli`，默认入口文件为 `src/main.js`。若文件被删除，需手动创建或通过 `vue create` 重新生成项目。 - **React 项目** - `create-react-app` 的入口文件为 `src/index.js`。若错误指向 `main.js`，需调整配置或重命名文件。 --- ### 第五步：操作系统相关问题 - **Windows 路径分隔符** 确保配置中使用 `/` 而非 `\`（如 `./src/main.js` 而非 `.\src\main.js`）。 --- ### 总结解决方案 1. 确认 `./src/main.js` 文件存在且路径正确。 2. 检查构建工具配置文件（如 `webpack.config.js`）中的入口路径。 3. 重新安装依赖并重启开发服务器。 4. 若为框架生成的项目，避免手动修改入口文件路径。通过以上步骤，可系统性定位并解决模块未找到的问题。