Cannot find module 'react' or its corresponding type declarations.

[ReshaSD]

Hi.

Faced with the problem starting the project:

Failed to compile.

/home/SOMEPATH/cra+craco/frontend/shared/src/Hello/index.tsx
TypeScript error in /home/SOMEPATH/cra+craco/frontend/shared/src/Hello/index.tsx(1,38):
Cannot find module 'react' or its corresponding type declarations.  TS2307

  > 1 | import React, { FC, useEffect } from 'react'
      |                                      ^
    2 | import icon from './icon.svg'
    3 | 
    4 |

The repo to reproduce the problem: https://github.com/ReshaSD/cra-craco. Use yarn start from the cra+craco/frontend/app-web/ folder

The idea was to use shared components that are not in the src folder:

Folder structure

cra+craco
  - frontend
    - app-web
      - src
          - App.tsx // with `import { Hello } from '@shared'`
          - index.ts
      - package.json // <- scripts: { start: 'craco start'
    - shared
      - src
          - Hello
              - index.tsx // not used in this example
              - index.web.tsx // Hello component
      - index.ts // export * from './src/Hello
      - // no package.json, no tsconfig.json, ....

So I used unsafeAllowModulesOutsideOfSrc option. The error You attempted to import /home/SOMEPATH/cra+craco/frontend/shared which falls outside of the project was gone but anyway I got new error about react module.

Not sure if this issue should be addressed to this repo ... but maybe you know what is going on.

P.S. Run with debug=true

/usr/bin/node /usr/lib/node_modules/npm/bin/npm-cli.js run start --scripts-prepend-node-path=auto

> [email protected] start /home/SOMEPATH/cra+craco/frontend/app-web
> craco start

Initial options:

{
  "source": "tsconfig",
  "baseUrl": "./src",
  "tsConfigPath": "./tsconfig.extends.json",
  "unsafeAllowModulesOutsideOfSrc": true,
  "debug": true
}

Normalized options:

{
  "source": "tsconfig",
  "baseUrl": "./src",
  "tsConfigPath": "./tsconfig.extends.json",
  "debug": true,
  "unsafeAllowModulesOutsideOfSrc": true
}

Initial aliases:

{
  "@shared": "/home/SOMEPATH/cra+craco/frontend/shared"
}

Aliases:

{
  "@shared": "/home/SOMEPATH/cra+craco/frontend/shared"
}

Webpack Config:

{
  "react-native": "react-native-web",
  "@shared": "/home/SOMEPATH/cra+craco/frontend/shared"
}

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)


Process finished with exit code 0

[ReshaSD]

UPD: If I will add

      "react": ["../node_modules/react/", "../node_modules/@types/react/"],
      "react/*": ["../node_modules/react/*", "../node_modules/@types/react/*"]

into tsconfig.extends.json -> compilerOptions -> paths it will work but ... in this case i have to map all packages i will use.

[risen228]

@ReshaSD maybe you need something like monorepo? I don't think it's a good idea to solve this on alias-level. The monorepo tools like yarn/lerna provide that type of functionality.