CODEWITHSUNDEEP
reactjstypescriptwebpackcreate-react-app
Ben Baldwin
Ben Baldwin

Reputation: 497

React can't resolve .tsx files

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

Upvotes: 12

Views: 20140

Answers (2)

Niall
Niall

Reputation: 30624

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;

Further links;

Upvotes: 0

Johannes Charra
Johannes Charra

Reputation: 29953

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.

Upvotes: 18

Related Questions