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 > app-web@0.1.0 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.