将jsx文件转换为tsx后出现"Error: ENOENT: no such file or directory, open.."错误

Question

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

./src/common/Action.jsx Error: ENOENT: no such file or directory, open '/code/src/common/Action.jsx'

• 重新构建无法解决问题
• 由于某种原因，期望旧版本的文件

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

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

解决方案： 我不得不使用 git rm 命令将它们从 git 存储库中删除，像这样：

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

我这样做之后，它将从提交的文件中删除jsx，然后我就能使用新的tsx文件了。

- thehme

---

你导入了这个文件吗？import Action from '/code/app_react/src/common/Action.tsx' - Akshay Mulgavkar

当文件扩展名为jsx时，这个程序可以完美地运行。 - thehme

我也遇到了这个问题。我正在导入没有扩展名的文件，但是在更改扩展名后，我总是会收到ENOENT错误，并且必须重新启动开发服务器。非常令人沮丧，因为那个脚本启动得非常慢。我将尝试在重命名后使用显式扩展名进行导入，看看是否可以解决它。 - Glenn Jorde

@thehme，你找到这个问题的解决方案了吗？ - Gmv

是的，我不得不运行 git rm /code/src/common/Action.jsx。 - thehme

嗨，请不要在问题中提供解决方案。请提供答案。@thehme - TOPKAT

Answer 1

我杀掉了正在运行的yarn进程，也杀掉了vscode，然后重新启动两者，现在它们都能正常工作了。

- Code Wiget

---

如何终止Yarn进程？有没有相应的命令？在Ubuntu中寻找。 - maverick

一个简单的服务器重启就可以解决问题... - Lemayzeur

谢谢！这对我有用。重新加载VS Code后，它显示了tsconfig.json文件，问题得到了解决。 - Sanushi Salgado

Answer 2

我遇到了同样的问题，不需要删除node_modules或删除目标文件，只需要结束node进程。

如果你在Windows系统上：

• ctrl+alt+delete打开任务管理器
• 找到node
• 结束进程

如果你在Linux系统上：

• 可能是pkill node等命令。

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

- Pedram

Answer 3

我遇到过类似的问题（虽然我是将 js 重命名为 jsx，而非将 jsx 重命名为 tsx），但是在该问题中提到的解决方案（在原始文件上运行 git rm）对我不起作用。

解决方法是在 r/reactjs Reddit 帖子 中建议的：删除并重新安装 node_modules。

rm -rf node_modules && npm i

- Aaron

Answer 4

由于预构建的缓存，这种情况正在发生。一个简单的解决方案是重新启动你的Node.js和React应用程序。 在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>

在MacOs中

$sudo killall -9 node

接着重新启动你的React应用程序。

npm start

- Umanda

---

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

不需要每次都这样做，但如果您遇到缓存问题，重新启动和缓存失效可能会有所帮助。 - Umanda

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

Answer 5

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

- jpolete

Answer 6

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

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

同时，在你的webpack.config.js中添加以下内容。

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

您已经准备就绪！

- Akshay Mulgavkar

---

使用 create-react-app 创建的应用程序中没有 webpack.config.js 文件，除非你弹出（eject）或使用 react-rewired 或类似的工具。 - Glenn Jorde

Answer 7

花了我一整天的时间，结果只需要重新启动 Docker 就好了 :) 每次修改 tsx 文件后都需要重新启动 Docker。

- Mantas Sadauskas

Answer 8

如果您在父文件夹或其他非当前文件夹中，则会出现此错误。 只需使用命令进入该目录即可

cd folder-name 
npm start

它会工作的

- vishal

Answer 9

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

我尝试杀掉node进程，删除node模块，重新启动电脑，但仍然出现相同的错误，后来我开始调试index.js。

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

我没有安装redux，我只安装了react-redux。

- Ankit Tiwari

Answer 10

只需重新启动npm服务器，它将自动检测typescript文件并进行调整。

- theNaukiMatic