Error: Cannot find module './App' at webpackMissingModule - reactjs

Question

I'm converting my .js files to .tsx because I want to work with TypeScript.
I added TypeScript with yarn add typescript #types/node #types/react #types/react-dom #types/jest and started to convert index.tsx then App.tsx
With tsx extension I get this error :
Error: Cannot find module './App'
at webpackMissingModule (bundle.js:16:50)
at ./src/index.tsx (bundle.js:16:130)
at options.factory (react refresh:6:1)
at __webpack_require__ (bootstrap:24:1)
at startup:7:1
at startup:7:1
With .js extension, everything works fine.
Here is my package.json
{
"name": "workout_generator",
"version": "0.1.0",
"private": true,
"dependencies": {
"#emotion/react": "^11.10.0",
"#emotion/styled": "^11.10.0",
"#headlessui/react": "^1.6.6",
"#mui/material": "^5.9.3",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^14.4.2",
"#types/jest": "^28.1.6",
"#types/node": "^18.6.4",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.4.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"autoprefixer": "^10.4.8",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.8"
}
}
Any idea where is my mistake ?

Answer 1

You need to inform webpack it needs to parse tsx files as well. I'm not familiar with Create-React-App, but if you run yarn eject you will have access to the webpack.config.js file.
In the field resolvejust add tsx:
resolve: {
extensions: [".ts", ".tsx", ".js", "jsx", ".json"]
}
You will also need a tsconfig.json file. It generally looks like this:
{
"compilerOptions": {
"outDir": "./build/",
"baseUrl": "./",
"skipLibCheck": true,
"noEmit": true,
"noImplicitAny": false,
"downlevelIteration": true,
"lib": ["es6", "es2019.array", "dom"],
"rootDir": "src",
"module": "commonjs",
"target": "es5",
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
"jsx": "react",
"allowJs": true
},
"include": ["./src/**/*", "./custom.d.ts"],
"exclude": ["node_modules"]
}
Last but not least, you will need to use #babel/preset-typescript in your .babelrc file.
{
"presets": [
"#babel/preset-env",
"#babel/preset-typescript",
"#babel/preset-react"
],
"plugins": [
"#babel/plugin-proposal-class-properties",
[
"#babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
}
If it sounds like too much trouble, I'd recommend using alright-react-app, or to recreate a project from scratch with the --typescript flag.