React can't resolve .tsx files - reactjs

Question

I made a new react project using npx create-react-app app-name --template typescript and it ran fine until I imported another .tsx file. Now when I try to import another .tsx file it gives me an error: Module not found: Error: Can't resolve './components/component' in '/Users/benbaldwin/Desktop/project/frontend/teacher/src'
The only thing I'm doing differently than normal is the file structure. Since I have multiple react projects in the frontend folder that share dependancies I moved the node_modules to cover all of those subdirectories. my file structure looks like this:
- frontend
- node_modules
- project-1
- public
- src
index.tsx
react-app-env.d.ts
- components
component.tsx
- project-2
package.json
tsconfig.json
the component file looks like this:
import React from 'react';
const Component: React.FC = () => {
return <div>hello</div>;
};
export default Component;
and the index file looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import Component from './components/component';
import './index.css';
ReactDOM.render(
<React.StrictMode>
<Component />
</React.StrictMode>,
document.querySelector('#root')
);
do I need to eject create-react-app and write out my own web pack config or is there a better way to fix this?
the full source code is on my GitHub: https://github.com/baldwin-dev-co/mountaineer

Answer 1

I just came across this problem as well, with a brand new React project.
Temporarily downgrading react-scripts from version 5.0.0 to 4.0.3 solved it for me, because after invoking npm install and npm run start this added the missing tsconfig.json file - which was the actual cause of the problem.
After this I could safely go back to 5.0.0 and everything worked fine.

Answer 2

I've run into this issue as well upgrading a project to typescript, using react-scripts 5.0.1.
In an attempt to diagnose what was going on, since there are only a few hits on this searching the problem, I setup 2 new projects.
First, is the npx create-react-app myapp non-typescript-template project;
Let it run and install as is
Builds as expected
Run npm install --save typescript #types/node #types/react #types/react-dom #types/jest
Change a file to tsx, didn't matter which one, any change had the same result
No tsconfig.json generated (as spoken about in the documentation), build fails with errors Module not found: Error: Can't resolve './App' in 'E:\create-react-tsx\myappts\src'
Second, run npx create-react-app myappts --template typescript typescript-template project;
Let it run and install as is
Builds as expected
Observations;
Copying the generated tsconfig.json from the typescript-template project (myappts) to the non-typescript-template project (myapp) didn't resolve the issue. The errors relate to the svg import etc. Cannot find module './logo.svg' or its corresponding type declarations.
Additionally copying the typescript-template project (myappts) react-app-env.d.ts over to the non-typescript-template project (myapp) got the project to build.
As an alternative, downgrading to react-scripts#4 in the non-typescript-template project (myapp), then changing a file to tsx and run a build generates the two required files. A subsequent upgrade to react-scripts continues to generate successful builds.
There is a bug filed for this issue;
https://github.com/facebook/create-react-app/issues/10951
Further links;
What is the react-app-env.d.ts in a react typescript project for
https://create-react-app.dev/docs/adding-typescript/