5

I generated React app using npx create-react-app my-app --template typescript. I wanted to move all my generated files to /src/client and my backend made in Express to /src/server. So after moving react app and running it I get this error.

Could not find a required file.
  Name: index.js

It's cased by moving index.tsx from /src to /src. So now the question is how do I change my destination file in app config?

Here is my package.json

package.json:

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@types/jest": "^26.0.15",
    "@types/node": "^12.19.1",
    "@types/react": "^16.9.53",
    "@types/react-dom": "^16.9.8",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "typescript": "^4.0.3",
    "web-vitals": "^0.2.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"
    ]
  }
}

And my ts config

tsconfig.json:

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

I've searched through the stackoverflow but none of the answers worked for me. If someone can help I would really appreciate it! Thanks in advice.

ProbDed
  • 159
  • 1
  • 3
  • 11

1 Answers1

9

Add this line in you package.json:

  "main": "src/index.tsx",

This tells it to look for a index with extension .tsx instead of .js.

Linda Paiste
  • 38,446
  • 6
  • 64
  • 102
  • 2
    I still get the same error about missing file after adding this – ProbDed Oct 24 '20 at 19:36
  • You mentioned having two separate folder for client and server. Is "src/index.tsx" the right path for the entry file, relative to the location of package.json? I'm confused by your structure (are there two separate package.json files for frontend and backend?), but maybe it should be `"main": "src/client/index.tsx"` – Linda Paiste Oct 24 '20 at 19:42
  • 2
    `package.json` is in root. The path to `index.tsc` is `/src/client/index.tsc` but it also doesn't work for some reason – ProbDed Oct 24 '20 at 19:44
  • Is there any other good practice for creating server and client project in the same directory? – ProbDed Oct 24 '20 at 19:48
  • 2
    [Here's a good answer](https://stackoverflow.com/a/51128385/10431574) about that. They seem to know what they are talking about (definitely more than I know) and they are recommending that you structure them as two separate apps with separate package.json files. – Linda Paiste Oct 24 '20 at 19:53