2

I'm trying to add some pages in typescript, and since I can only import .ts files in .ts or .tsx files, I renamed "Index.js" to "Index.tsx" and "App.js" to "App.tsx".

Now I'm getting the following error:

ERROR in ./src/index.tsx 7:0-24
Module not found: Error: Can't resolve './App'

Index.tsx

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById("root")
);

App.tsx

function App() {
  return (
    <Provider store={store}>
      <div>hi</div>
    </Provider>
  );
}

export default App;

Why can't Index.tsx resolve App.tsx? I created the project with create-react-app and I'm using React 17.0.2.

SJ19
  • 1,933
  • 6
  • 35
  • 68
  • 1
    Does this answer your question? [React: Can't import .tsx file](https://stackoverflow.com/questions/61218279/react-cant-import-tsx-file) – pilchard Dec 26 '21 at 14:48

2 Answers2

2

1: Create file tsconfig.json in the src directory.

paste this code.

{
  "compilerOptions": {
    "target": "ES6",
    "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"
  },
  "include": [
    "src"
  ]
}

2: install npm I cra-template-typescript

3: import App from './App.tsx'; instead of import App from './App';

jayway
  • 7
  • 3
Syed Bilal Haider
  • 37
  • 6
1

That's because webpack config in CRA is not set up for typeScript.

If you wanna use typeScript in your React project, you should begin with "CRA typescript template"!

install CRA typeScript template and then make code in there.

the template npm site is here https://www.npmjs.com/package/cra-template-typescript

I hope you find an answer :D

Dae Hyeon Mun
  • 521
  • 4
  • 7
  • Hey thanks for the info. I installed the template and restarted my development server, but the problem remains unfortunately. – SJ19 Dec 26 '21 at 15:29
  • Did you check app path is correct? I think that problem is a wrong path or just a webpack problem but you installed the CRA Ts template and move all code files into the new template and then npm run start right? and it still doesn't work. check if the extensions of App and index file rename from tsx or ts to js or jsx, are they working? – Dae Hyeon Mun Dec 26 '21 at 15:37
  • Wait, how do I move my code into the new template? :D – SJ19 Dec 26 '21 at 16:26
  • The path is correct, it was working before I renamed it. All I did was install the template and restart the server. Sorry I'm new to this haha. – SJ19 Dec 26 '21 at 16:26
  • You started your project with CRA first and you remeber when you installed CRA, it made a folder with public, src and other files? It's the same wheb you creat a new project folder with CRA typescript template. You can move your code files into the new typescript CRA template project folder and run it. – Dae Hyeon Mun Dec 26 '21 at 16:36
  • I'm sure isn't "path" or "import" issue. It's a webpack issue. the CRA template without typescript is not set up for ts and tsx file but CRA with typescript template is for it. The reason you don't need to put extension like /.App is that webpack put the extension if the path doesn't contain extension name but CRA template doesn't set up for ts or tsx file and it can't compile typescript file as long as you set up typescript config and set up libraries. but CRA TypaScript template is all set up to use typescript. Try it in the right way with the guide again! – Dae Hyeon Mun Dec 26 '21 at 16:41
  • And if you find a solution from my answer, pls select my answer :D Thx have a good night! – Dae Hyeon Mun Dec 26 '21 at 16:41
  • I've selected your answer. Thanks for the help :) – SJ19 Dec 27 '21 at 15:36