Reactjs "Error: ENOENT: no such file or directory, open.." after converting jsx file to tsx

Question

I have a create-react-app app and I am translation files from jsx to typescript. For example, one file is called /code/app_react/src/common/Action.jsx and I renamed it to /code/app_react/src/common/Action.tsx. I made the necessary changes to successfully convert it to tsx, but I am getting an error related to the name change:

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

• rebuilding the does not help
• for some reason, the old version of the file is expected

The file importing this file is a jsx file, but now I am importing a tsx file into it.

This is a CRA app, so is there a correct way to clear this error?

SOLUTION: I had to remove them from the git repository, using the git rm command, like this:

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

Once I did that, it removed the jsx from the committed files and then I was able to use the new tsx files

Solution 1

Killed my yarn process running, killed vscode, re-started both and it works

Solution 2

I had same issue, no need to remove node_modules or remove target file, you just have to kill the node process.

If you're on windows:

• ctrl+alt+delete to run task manager
• find node
• end process

If you're on linux:

• probably something like pkill node, etc.

After I killed the node process and ran npm start again, it finds the target file.

Solution 3

I was having this problem (though I had renamed js to jsx, rather than jsx to tsx), and the solution added to the question (running git rm on the original file) didn't work for me.

What did work was suggested by this r/reactjs Reddit thread: deleting and reinstalling node_modules:

rm -rf node_modules && npm i

Solution 4

It is happening because of the pre-built cache. A simple solution would be to restart your nodejs and react app.

In Linux

$ pkill node   

$ killall node  

$ kill -9 <pid>

In Windows

C:\>taskkill /im node.exe

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

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

In MacOs

$sudo killall -9 node

And then start your React application again.

npm start

Solution 5

Maybe you have not imported the file. You need to import the file to use it.

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

Also add this to your webpack.config.js.

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

You're good to go!

View more solutions