TypeScript 不解析 react-native-web 代码

Question

Already tried suggestions here and here with no luck

I have a project with a directory structure like this:

.
  - /app
  - /web

app is a react native app (created manually, not with create-react-native-app ).

web is a react app created using create-react-app .

Both use TypeScript.

I'm trying to render a component from app in the web application using react-native-web , but TypeScript doesn't seem to be parsing the file as I get this error:

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
> export type Props = {

Given that TypeScript is working fine within app and web independently, I'm not sure what I'm missing. One slight quirk of the project is that, because create-react-app doesn't allow relative imports from outside its own src folder, I've had to symlink app using npm link app in the web directory in order to import the app components.

Not sure if that's causing the problem, but I'm pretty stumped so any suggestions would be greatly appreciated.

Answer 1

Solution ended up being to add ts-loader to the webpack config of my React for web app. This was made slightly harder by the fact that create-react-app doesn't allow modifying its config files, but I was able to do so using react app rewired

I also had to change TypeScript's noEmit to false to ensure tsc is used for compilation as well as type checking (had to do this in react-app-rewired too, because CRA overwrites that setting in tsconfig.json if you try to change it).

Still slightly confusing to me why this was needed, given TypeScript was being parsed perfectly fine in the web and mobile apps individually.