Skip to content
This repository has been archived by the owner on May 19, 2022. It is now read-only.

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

Open
ReshaSD opened this issue May 30, 2021 · 2 comments
Open

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

ReshaSD opened this issue May 30, 2021 · 2 comments

Comments

@ReshaSD
Copy link

ReshaSD commented May 30, 2021

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
Copy link
Author

ReshaSD commented May 30, 2021

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
Copy link
Owner

risen228 commented Jun 9, 2021

@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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants