non-ts package referencing ts package causes error (dev mode)

[iamyoki]

1. I have a monorepo structure like this

create-react-app
└── src
    ├── ...
    └── index.jsx
packages
└── shared
    └── src
        ├── index.ts
        └── helpers.ts

2. shared is a dependency of create-react-app

shared/src/index.ts

export * from "./helpers"

create-react-app/src/index.jsx

import {xxxx} from "shared"

3. Error cause (Simplified)

Module not found: Error: Can't resolve './helpers' in 'shared/src'

4. Situations (✅no cause, ❌cause error)

• ✅ Both packages are ts based
• ✅ Both packages are js based
• ❌ One js package referecing ts package, which ts package have internal relative imports.

5. My guess
   preconstruct dev mode creates symlink for module so that if dependent cannot resolve ts file then error causes.

[emmatown]

From trying things myself, it looks like this issue is more "preconstruct dev doesn't work with create-react-app". I'm guessing you'll need to use one of the forks of react-scripts and make it compile files outside of the create-react-app project as well as what it already does compile (though only outside the directory and not in node_modules).

[iamyoki]

@mitchellhamilton Thank you for your answer~
I find out that the problem was caused because of non-ts create-react-app cannot compile a ts file from dependency.
In dev mode, the dist file xxx.esm.js is basically a symlink to source file, so that non-ts CRA compiler can't work on that.

My temp solution (turn on ts for CRA):

1. Add @craco/craco and ts-loader and typescript
2. Config ts-loader as a webpack loader
3. Add a tsconfig.json at root

But that's not perfect, I have an idea, use a hook loader or something to pre compile the symlink dist file, like what did on cjs file, is that possible?