TypeError [ERR_INVALID_ARG_TYPE]: "path" 参数必须是字符串类型。启动反应应用程序时收到未定义的类型

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app

我正在用 React 做一个项目,运行 遇到了一个让我难过的问题。

每当我 运行 yarn start 我得到这个错误:

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

我不知道为什么会这样,如果有人经历过,我将不胜感激。

我在安装和删除一些 npm 包后遇到了这个问题,我花了将近 5 个小时才弄清楚发生了什么。

我所做的基本上是将我的 src/components 复制到不同的目录中,然后删除所有节点模块和 package-lock.json(如果你是 运行 你的应用程序在 Docker 容器,删除图像并重建它只是为了安全);然后将其重置为我的最后一次提交,然后放回我的 src/components 然后 运行 npm i.

希望对您有所帮助。

要解决此问题,只需升级 react-scripts 包(使用 npm info react-scripts version 检查最新版本):

  1. 将您的 package.json "react-scripts": "^3.x.x" 替换为 "react-scripts": "^3.4.1"(或最新可用版本)
  2. (对某些人来说是可选的)删除您的 node_modules 文件夹
  3. 运行 npm installyarn install

有些人报告说这个问题是由 运行 npm audit fix 引起的(避免它!)。

我也遇到过这个问题,通过将 react-scripts 软件包从 "react-scripts": "3.x.x" 升级到 "react-scripts": "^3.4.1"(或最新可用版本)来解决这个问题。

  1. 删除 node_modules\ 文件夹
  2. 删除package-lock.json个文件
  3. package.json 文件从 "react-scripts": "3.x.x" 重写为 "react-scripts": "^3.4.1"
  4. 再次安装节点包npm i
  5. 现在,开始项目npm start

而且有效!!

我们从 react-scripts 中退出,因此不能简单地升级 package.json 条目来解决这个问题。

相反,我们这样做了:

  1. 在一个新的目录下,新建一个项目 -> $> npx create-react-app foo-project
  2. 然后弹出 -> cd ./foo-project && npm run eject
  3. 现在将 /foo-project/config 中的文件复制到我们主应用程序的配置目录中并启动您的开发服务器

希望这对处于类似困境的其他人有所帮助。

  1. 去找你package.json

  2. 将依赖中的"react-scripts": "3.x.x" 改为 "react-scripts": "^3.4.0"

  3. 重新安装反应脚本:npm I react-scripts

  4. 开始你的项目:npm start

如果你有弹出 create-react-app,我建议:

  1. 通过 create-react-app 创建一个新的 React 应用程序。
  2. 通过npm run ejectyarn eject弹出。
  3. 安装 package.json.
  4. 中缺少的所有包
  5. 复制您的 src 文件夹,假设您的所有代码都位于此文件夹中。
  6. 如果需要,请重做 configscript 文件夹中的更改。

为我工作。

我尝试了上述的各种方法,但其中 none 有效,因为我 弹出了 我的 css。最后应用以下步骤有所帮助:

  1. 升级react-scripts"react-scripts": "3.x.x""react-scripts": "^3.4.0"
  2. 降级 react-dev-utils"react-dev-utils": "^10.x.x""react-dev-utils": "10.0.0"
  3. 删除 node-modules 文件夹和 package-lock.json/yarn.lock
  4. 重新安装软件包 npm install/yarn install

如果您弹出并好奇,CRA 存储库中的 this change 就是导致错误的原因。

要修复它,您需要应用他们的更改;即最后一组文件:

  • packages/react-scripts/config/paths.js
  • packages/react-scripts/config/webpack.config.js
  • packages/react-scripts/config/webpackDevServer.config.js
  • packages/react-scripts/package.json
  • packages/react-scripts/scripts/build.js
  • packages/react-scripts/scripts/start.js

就我个人而言,我认为您应该手动应用更改,因为除非您一直保持所有更改的最新状态,否则您可能会在您的 webpack 包中引入另一个错误(因为依赖项不匹配或其他原因) .

,您可以按照 Geo Angelopoulos 的建议进行操作。这可能需要一段时间,但至少您的项目将与 CRA 存储库同步(并获得他们所有最新的增强功能!)。

运行 npm i react-dev-utils@10.0.0 解决了我的问题。

按照以下步骤操作。我也遇到了同样的问题。

  1. 删除整个 node_modules 文件夹。
  2. 删除包-lock.json 文件。
  3. 运行命令npm install npm-install如图:

  4. 我们开始了.. npm start...wao

就我而言,这是因为我(曾一度)安装了 reactn,其中还包括它自己的 React 版本(出于某种原因)。

安装后(再次卸载后),出现这个错误

我只是再次删除了 node_modules 和 运行 npm install,它起作用了。

如果您已经弹出,这是解决此问题的正确方法:

找到这个文件config/webpackDevServer.config.js,然后在这个文件中找到下面一行:

app.use(noopServiceWorkerMiddleware());

您应该将其更改为:

app.use(noopServiceWorkerMiddleware('/'));

对我(可能还有你们中的大多数人)来说,service worker 是在项目的根部提供服务的。如果您的情况有所不同,您可以改为传递基本路径。

只需将 react-scripts 更新到最新版本即可。

yarn add react-scripts@latest

或者如果使用 NPM

npm install react-scripts@latest

只需要删除和re-install react-scripts

删除 yarn remove react-scripts 加上 yarn add react-scripts

然后是rm -rf node_modules/ yarn.lock && yarn

  • 切记不要手动更新react-scripts版本

我在我的管道中遇到了同样的问题运行。

对我来说,问题是我在 docker 容器中使用 node 版本 v10.0.0

更新为 v14.7.0 帮我解决了这个问题

None 其他解决方案对我有用。

但是,将此添加到我的 package.json 解决了我的问题:

"resolutions": {
  "react-dev-utils": "10.0.0"
},

将 HOME 环境变量设置为适当的值可以解决这个问题。

我通过在 nvm 中将较新版本的节点设置为默认版本解决了这个问题,即:

nvm alias default 12.XX.X

不想升级react-scripts,所以用第三方reinstall npm module重装,成功了

npm i -g npm-reinstall
reinstall react-scripts

我在 gatsby 博客上遇到了完全相同的问题。无法升级依赖项,只能在 npm 版本 10.22.1 上 运行。

以下对我有用:

#!/bin/bash
rm -rf .cache
rm -rf public
gatsby build
gatsby serve

基本上完全重建一切,这个错误就没有了。非常烦人,但至少它可以构建。

更奇怪的是,如果我调整博客的图像 post,例如稍微调整一下大小,它就会生成。我完全不知道为什么。但至少这是一个线索。

如果你有一个被弹出的 CRA,webpack-dev-server 配置有一些变化,如果保持不变会抛出这个错误。将新弹出的 CRA 4.x 配置与我的 CRA 3.x 配置进行比较,显示了对以前不接受现在接受参数的函数的一些更改。

就我而言,其中一项重大更改是为 noopServiceWorkerMiddleware 函数添加了一条路径。添加缺少的路径 noopServiceWorkerMiddleware(paths.publicUrl) 为我解决了这个问题。

如果您发现很难在 react.js 文件中显示图像,我尝试在 youtube 上搜索。 它建议在 'public' 文件夹(而不是 'src' 文件夹)中添加图像。

虽然仍在寻找在 'src' 文件夹中添加图像没有成功的原因。

link:

https://www.youtube.com/watch?v=taMJct5oeoI&ab_channel=EsterlingAccime

https://daveceddia.com/react-image-tag/

我遇到了同样的问题,运行 npm install react-scripts@latest 解决了我的问题。

只需升级 react-scripts 版本即可解决我的问题。 react-scripts 包从 "react-scripts": "3.x.x""react-scripts": "^3.4.1"(或最新可用版本)。 避免直接删除 package-lock.json。先试试这个,如果不行再继续。

从 powershell 切换到 bash 为我解决了这个问题。

这与react无关,因为指定的错误,undefined 不被接受为路径参数。确保您没有将碰巧未定义或为空的变量传递给 path.join。 例如:

const {path} = require('path'); 
let arg = undefined;
let mypath = path.join(__dirname, arg);

// The same error would occur.