将jsx文件转换为tsx后Reactjs“错误：ENOENT：没有这样的文件或目录，打开..”

Posted 2023-02-22

【中文标题】将jsx文件转换为tsx后Reactjs“错误：ENOENT：没有这样的文件或目录，打开..”

【英文标题】：Reactjs "Error: ENOENT: no such file or directory, open.." after converting jsx file to tsx

【发布时间】：2019-07-27 15:47:33

【问题描述】：

我有一个create-react-app 应用程序，我正在翻译从jsx 到typescript 的文件。例如，一个文件名为/code/app_react/src/common/Action.jsx，我将其重命名为/code/app_react/src/common/Action.tsx。我进行了必要的更改以成功将其转换为 tsx，但我收到与名称更改相关的错误：

./src/common/Action.jsx 错误：ENOENT：没有这样的文件或 目录，打开 '/code/src/common/Action.jsx'

重建没有帮助 由于某种原因，需要使用旧版本的文件

导入此文件的文件是jsx 文件，但现在我正在将tsx 文件导入其中。

这是一个 CRA 应用程序，那么有没有正确的方法来清除这个错误？

解决方案： 我必须使用git rm 命令从git 存储库中删除它们，如下所示：

git rm /code/src/common/Action.jsx

一旦我这样做了，它就会从提交的文件中删除jsx，然后我就可以使用新的tsx 文件

【问题讨论】：

您导入文件了吗？ import Action from '/code/app_react/src/common/Action.tsx'

是的，当扩展名是jsx时，这工作得很好

我也有这个问题。我正在导入没有扩展名的文件，并且在扩展名更改后我总是得到 ENOENT 并且必须重新启动开发服务器。非常令人沮丧，因为该脚本启动速度太慢了。重命名后我会尝试使用显式扩展名导入，看看是否能解决。

@thehme 你找到解决这个问题的方法了吗？

是的，我必须运行git rm /code/src/common/Action.jsx

【参考方案1】：

杀死我正在运行的纱线进程，杀死vscode，重新启动两者并且它可以工作

【讨论】：

如何杀死纱线进程？有什么命令吗？寻找 ubuntu

一个简单的服务器重启工作......

谢谢！这对我有用。重新加载 VS 代码后，它显示 tsconfig.json 文件，问题已解决。

【参考方案2】：

我有同样的问题，不需要删除node_modules或删除目标文件，你只需要杀死节点进程。

如果你在windows:

ctrl+alt+delete运行任务管理器 找到node 结束进程

如果你在linux:

可能类似于pkill node 等。

我杀死node进程并再次运行npm start后，它找到了目标文件。

【参考方案3】：

我遇到了这个问题（尽管我已将 js 重命名为 jsx，而不是将 jsx 重命名为 tsx），并且添加到问题的解决方案（在原始文件上运行 git rm）没有不适合我。

this r/reactjs Reddit thread 建议的工作是什么：删除并重新安装node_modules：

rm -rf node_modules && npm i

【参考方案4】：

这是由于预建缓存而发生的。一个简单的解决方案是重新启动你的 nodejs 并响应应用程序。

在 Linux 中

$ pkill node   

$ killall node  

$ kill -9 <pid>

在 Windows 中

C:\>taskkill /im node.exe

C:\>taskkill /f /im node.exe

C:\>taskkill /pid <PID of node>

在 MacO 中

$sudo killall -9 node

然后再次启动您的 React 应用程序。

npm start

【讨论】：

我们真的需要在每次删除或移动文件时重新启动react-scripts 吗？我已经厌倦了等待 1 分钟让 react-scripts 启动并编译我的项目：/

不是每次都需要，但如果你有缓存问题，有时重启和缓存失效会有所帮助。

重启服务器解决了我的问题，就这么简单

【参考方案5】：

也许您还没有导入文件。您需要导入文件才能使用它。

import Action from '/code/app_react/src/common/Action.tsx';

也将它添加到你的 webpack.config.js。

resolve: 
    extensions: [".ts", ".tsx", ".js", ".jsx"]
,

你可以走了！

【讨论】：

使用create-react-app 创建的应用中没有webpack.config.js。除非您弹出或使用 react-rewired 或类似的工具。

【参考方案6】：

我正在使用 redux，然后遇到了这个错误！！

我尝试杀死节点，删除节点模块，重新启动笔记本电脑，但仍然出现同样的错误，然后我开始调试 index.js

我注释了每一行并从顶部开始取消注释以查看代码在哪里中断然后观察

我没有安装

还原

我只安装了 react-redux

【参考方案7】：

只需重启你的 npm 服务器，它会自动检测 typescript 文件并进行调整

【参考方案8】：

我在将 .jsx 转换为 .tsx 时遇到了同样的问题。如果您使用 Parcel 构建您的应用程序，请删除 .cache 文件夹。这就是 Parcel 缓存构建文件的地方。这为我解决了问题。

【参考方案9】：

我手动删除了node_modules 文件夹并通过运行npm i 重新安装了它们，这个技巧对我有用。

【参考方案10】：

一个简单的服务器重启就可以了。

例如：NPM RUN DEV 或任何对我有用的启动脚本