Cannot import modules in my React Typescript project

Question

I am writing a basic React/Express application with TS, as I haven't used it much before and want to learn. I am running into an issue where I attempt to import a component into another component, but I receive a "module not found" error.

It works for imports from node modules so I suspect it's an issue with my TS configuration, but Google and SO haven't had any helpful info yet.

This happens with every component I have defined, not just the Counter component in the example below.

The error message:

[0] ERROR in ./src/App.tsx 5:0-51
[0] Module not found: Error: Can't resolve './components/Counter/Counter' in '/home/name/Git/project/client/src'
[0] 
[0] webpack compiled with 1 error

The code in question:

App.tsx

import { Outlet } from "react-router";
import Counter from "./components/Counter/Counter"; // The problem line

const App = () => {
  return (
    <div>
      <Outlet />
      <Counter />
    </div>
  );
};

export default App;

Counter.tsx

function Counter() {

  return (
    <div>
      <button>Increment 1</button>
    </div>
  );
}

export default Counter;

tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "ts-node": {
    "esm": true,
    "experimentalSpecifierResolution": "node"
  }
}

Project Setup:

├─ tsconfig.json
├─ (express-related files)
└─ client
    ├─ public
    └─ src
        ├─ App.tsx
        ├─ index.tsx
        ├─ (other react-related files/dirs)
        └─ components
            └─ Counter
                └─ Counter.tsx

I have tried explicitly including directories in the tsconfig.json file, similar to this:

"include": ["./client/src"]

I have a temporary fix by adding the following to react-app-env.d.ts:

declare module "*.tsx";
declare module "*.ts";

With this, I can change my import statements to import Counter from "./components/Counter/Counter.tsx"; (adding the file extension) and it will work. However, this is different from other TS projects I've seen, so I don't think it is correct.

Does this answer your question? [How do I include a JavaScript file in another JavaScript file?](https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file) — Randy Casburn, Mar 17 '23 at 16:38
Have you tried `import Counter from './components/Counter'` while renaming Counter.tsx to index.tsx? — Vlad Vladov, Mar 17 '23 at 16:45
@RandyCasburn Unfortunately no, as I am already doing much of what is included in the linked question. I have "type": "module" in my package.json file. I have another project with the exact same setup without TypeScript which works as written. — PirateCody, Mar 17 '23 at 17:22

score 0 · Accepted Answer · answered Mar 18 '23 at 03:59

After some further experimenting, I seem to have found an answer. It may not be the most correct answer, but it works.

A quirk of this project is that it is actually 2 node projects. The express node project has another react node project contained within. I believe it was originally setup with this configuration for reasons related to deployment, so I don't know if this is a common way to configure projects.

However, I was able to fix my issue by adding a tsconfig.json file to the client folder.

├─ tsconfig.json
├─ (express-related files)
└─ client
    ├─ tsconfig.json // Added this because client is a separate project
    ├─ public
    └─ src
        ├─ App.tsx
        ├─ index.tsx
        ├─ (other react-related files/dirs)
        └─ components
            └─ Counter
                └─ Counter.tsx

Cannot import modules in my React Typescript project

1 Answers1