我正在尝试在非弹出模式下的create-react-app中实现TypeScript代码共享,但我遇到了臭名昭著的限制:不允许在src
之外导入文件:
You attempted to import ../../common/src/lib.ts which falls outside of the project src/ directory. [...]
对于非TypeScript的情况,已经有一个问答解决方案,但我无法使任何解决方案与TypeScript一起工作。具体来说,提出的解决方案的问题是:
在
ts-config.json
中设置baseDir
:这里create-react-app会抱怨:您的项目的baseUrl
只能设置为src
或node_modules
。 Create React App此时不支持其他值。基于react-app-rewired的方法:更有前途。禁用
ModuleScopePlugin
可以让我通过"attempted import outside src"错误,但现在的问题是typescript文件的loader不协作:我已经验证了
.ts
本身没有问题:将其复制到./src
并从那里导入可以正常工作。我还在
ts-config.json
中的includes
列表中添加了../../common/src
文件夹。我的猜测是,webpack loader配置具有阻止TypeScript加载器转译不符合预期路径模式的文件的规则。如何使用react-app-rewired修复此问题?
符号链接源也无效--同样存在相同的问题。可能是因为webpack在内部解析符号链接并在普通loader规则不适用的路径中查看文件。
弹出式解决方案:目前我不想弹出式,但我尝试过,基本上又遇到了同样的问题。
我还发现其他听起来相关但未回答问题的问题:
- Create React App + Typescript In monorepo code sharing:基本上听起来和同一个问题,但实际上不是,因为它要求弹出式React应用程序。
- Sharing code between projects using TypeScript and webpack:也解决了代码共享问题,但不是针对create-react-app的特定解决方案,我不知道该解决方案是否可以转移到create-react-app中,因为它需要手动控制webpack配置。
在monorepo中重用TypeScript类型定义似乎是一种相当合理的模式。我错过了什么,或者为什么create-react-app会使这变得如此困难?
要复现:我的代码基本上就是从
npx create-react-app my-app --template typescript
添加了一个进口到外部。
../something
,您可以将模块作为本地的node_modules
文件夹中的模块导入:import { YourType } from 'your-local-module'
。 - aziumsrc
之外导入TypeScript。 - bluenote10