React + TS: Cannot add private shared project references to react project

Question

I have a react project that is fully working and recently I have decided to extract the reusable code into a shared react library.

REACT-PROJECT tsconfig.json:

"compilerOptions": {
  "module": "commonjs",
  "declaration": true,
  "removeComments": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "allowSyntheticDefaultImports": true,
  "target": "ES2017",
  "lib": ["ES2021", "DOM", "DOM.Iterable", "ESNext"],
  "sourceMap": true,
  "outDir": "./dist",
  "baseUrl": "./",
  "incremental": true,
  "skipLibCheck": true,
  "strictNullChecks": false,
  "noImplicitAny": false,
  "strictBindCallApply": false,
  "forceConsistentCasingInFileNames": false,
  "noFallthroughCasesInSwitch": false,
  "esModuleInterop": true,
  "strict": true,
  "moduleResolution": "node",
  "resolveJsonModule": true,
  "isolatedModules": true,
  "noEmit": true,
  "jsx": "react-jsx",
  "noErrorTruncation": true,
  "paths": {
    "@shared/common/*": ["../../shared/shared-common/src/*"],
    "@shared/react/*": ["../../shared/shared-react/src/*"]
  }
},
"references": [
  { "path": "../../shared/shared-common/" },
  { "path": "../../shared/shared-react/" }
]

REACT-SHARED tsconfig.json:

"compilerOptions": {
  "module": "commonjs",
  "declaration": true,
  "removeComments": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "allowSyntheticDefaultImports": true,
  "target": "ES2017",
  "lib": ["ES2021", "DOM", "DOM.Iterable", "ESNext"],
  "sourceMap": true,
  "outDir": "./dist",
  "baseUrl": "./",
  "incremental": true,
  "skipLibCheck": true,
  "strictNullChecks": false,
  "noImplicitAny": false,
  "strictBindCallApply": false,
  "forceConsistentCasingInFileNames": false,
  "noFallthroughCasesInSwitch": false,
  "jsx": "react-jsx",
  "noErrorTruncation": true,
  "composite": true,
  "paths": {
    "@shared/common/*": ["../shared-common/src/*"],
  }
},
"references": [
  { "path": "../shared-common/" },
]

REACT-PROJECT package.json:

"scripts": {
  "start": "react-scripts start --exec 'npm run config:paths'",
  "config:paths": "ts-node -r tsconfig-paths/register ./src/index.tsx"
},
"dependencies": {
  "react": "^18.2.0",
  "react-router-dom": "^6.3.0",
  "typesafe-actions": "^5.1.0",
  "react-dom": "^18.2.0",
  "react-scripts": "5.0.0",
  "redux": "^4.1.2"
},
"devDependencies": {
  "@types/node": "^18.0.6",
  "@types/react-dom": "^18.0.6",
  "tsconfig-paths": "^4.0.0",
  "typescript": "^4.7.4",
  "@types/react": "^18.0.15",
  "@types/react-router-dom": "^5.3.3"
},

REACT-SHARED package.json:

"dependencies": {
  "react": "^18.2.0",
  "react-router-dom": "^6.3.0",
  "typesafe-actions": "^5.1.0"
},
"devDependencies": {
  "@types/node": "^18.0.6",
  "@types/react-dom": "^18.0.6",
  "tsconfig-paths": "^4.0.0",
  "typescript": "^4.7.4"
}

When I run tsc -b on both projects they compile successfully, but when I run the react project, it shows MANY errors related to webpack. I understand that react uses webpack under the hood but I don't have it on my project.

ERROR in ./src/stores/panel.store.ts 4:0-68
Module not found: Error: Cant resolve '@shared/react/stores/panel.store' in '/home/myuser/react-project/src/stores'
 @ .[...PATH]
 @ ./src/index.tsx 7:0-70 10:33-53

ERROR in ./src/panel/panel.types.ts 3:0-65
Module not found: Error: Cant resolve '@shared/common/utils/panel.utils' in '/home/myuser/react-project/src/panel'
 @ .[...PATH]
 @ ./src/index.tsx 7:0-70 10:33-53

166 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.73.0 compiled with 166 errors in 5449 ms
No issues found.

Does anybody know what's causing this error and how to fix it?

Answer 1

I found out that the problem was that I created my app using create-react-app and it does a lot of things under the hood that constrict the programmer like not allowing path aliases and forbidding path references that fall outside of the root src folder.

I have created a new app using webpack and placed the code inside it and now it works like I wanted.

If you have the same error and needs a more detailed explanation on how to create a Typescript + React app without create-react-app, this is where I based my new app configuration: https://dev.to/alekseiberezkin/setting-up-react-typescript-app-without-create-react-app-oph