0

I have a React project with TypeScript. I'm trying to import types from an external folder - outside of the React folder. However, React does not seem to allow this. I'm using craco on top of CRA to run the app.

Project: https://github.com/accord-dot-app/app

types/
- ...
- deps.types.ts

frontend/
- ...
- src/
-- index.tsx

types/deps.types.ts:

// ... imports

export interface Deps {
...
}

frontend/src/index.tsx:

import { Deps } from '.../deps.types.ts';

...

This is the error I get when running craco start.

File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
You may need an additional loader to handle the result of these loaders.
| import ChannelLeave from '@accord/backend/ws/ws-events/channel-leave';
|
> declare interface Deps {
|   channels: Channels;
|   /** @deprecated */

If I comment out the lines, I just get another error in a another similar type file.

How can the errors be removed?

ADAMJR
  • 1,880
  • 1
  • 14
  • 34
  • 1
    It's a bit annoying that React imposes this behavior, but you can overcome it by converting your `types` folder into a local npm package, and then `install` it from your React project. [This question](https://stackoverflow.com/a/38417065/438273) is somewhat related. Let me know if this'll work for you and you'd like for me to compose it into an answer. – jsejcksn Dec 22 '21 at 00:30
  • I've done that and it's installed as `file:../types` and then imported as `@accord/types`. This creates a symlink to `../types`, behind the scenes, in the `node_modules/` folder. Maybe the symlink is what causes React to think it's an external folder - even when it's in `node_modules/`. – ADAMJR Dec 22 '21 at 00:33
  • 1
    You can also just do the inverse: Store the types file in your React `src` dir and import it from the other outside modules / symlink it to an external location which React won't care about. – jsejcksn Dec 22 '21 at 00:36
  • This has worked so far, but there should be away to exclude a specific directory from being type checked. I tried another solution but I could not get it to work with my setup: https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory. – ADAMJR Dec 23 '21 at 15:56

1 Answers1

0

Try Using:

const C1: React.FC<CProps> = (props) => { }

Instead of:

const C2 = (props: CProps) => {};
éniocarlos
  • 69
  • 1
  • 3