Reference Typescript project outside of the source folder
Add
customize-cra
andreact-app-rewired
packagesAdd to referenced
tsconfig.json
:
{
"compilerOptions": {
...
"composite": true,
"declaration": true,
"declarationMap": true
}
- Create
tsconfig.paths.json
in the base project
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@alias/*": ["..relative/to/base/url/path/*"]
}
}
}
- In
tsconfig.json
add such lines:
{
"extends": "./tsconfig.paths.json",
"compilerOptions": {
"baseUrl": "<the same value as in paths file>"
},
"references": [
{ "path": "../relative/path/to/referenced/project/tsconfig.json/file" }
]
- Create
config-override.js
file in the project root
const { override, removeModuleScopePlugin, getBabelLoader, addWebpackAlias } = require("customize-cra");
const path = require("path");
const fs = require('fs');
const updateAliases = (config) => {
const aliases = {
"@alias": ["absolute/path/to/base/url"]
};
return addWebpackAlias(aliases)(config);
};
const updateIncludes = (config) => {
const loader = getBabelLoader(config, false);
const commonPath = path.normalize(path.join(process.cwd(), "../relative/path/to/referenced/project/tsconfig.json/file")).replace(/\\/g, "\\");
loader.include = [loader.include, commonPath];
return config;
};
module.exports = override(
updateAliases,
updateIncludes,
removeModuleScopePlugin()
);
- Use
react-app-rewired
instead ofreact-scripts
inpackage.json
Note: This is the modified code, so some minor changes may be required.
dr11
Updated on June 17, 2022Comments
-
dr11 almost 2 years
I have 2 CRA projects in a mono-repo - P1 and P2.
root/ projects/ p1/ package.json tsconfig.json src/ shared/ **/*.ts p2/ package.json tsconfig.json src/ **/*.ts
P1
contains some shared infrastructure source files, which I want to reuse inP2
.Note: I know about the disadvantages and negative sides of this approach, but...
What I tried:
-
Include
P1
fromP2
and import:-
P1 tsconfig.json
modified with"include": [..., "root/projects/p1/src/shared/**/*.ts]
-
P2
source file imports .ts files by relative path
Result:
You attempted to import <path> which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/
-
-
Use yarn workspaces
This one is easy. Yarn does not allow to have workspaces outside of the project root
You cannot and must not reference a workspace that is located outside of this filesystem hierarchy.
-
Typescript 3.0+ projects references:
- Update
p1 tsconfig.json
with
"compilerOptions": { "composite": true }
- Add reference to
P1 tsconfig.json
references: [ { "path": "{...}/p1/" ]
Build
P1
withtsc -b
to produce declaration files-
now I need to import it somehow.
create
tsconfig.paths.json
to configurepaths
sectionadd
rootDir
tpP1 tsconfig.json
to point toroot/
folderadd paths
"@lib/*": ["<relative-path-to-p1>/p1/src/shared/*"]
Result:
Cannot find module: '@lib/....'. Make sure this package is installed
Also I see that VSCode recognizes my configuration properly and
import
intellisense works properly - Update
-
Use
react-app-rewired
in my
config-overrides.js
I added something likemodule.exports = function override(config, env) { config.resolve.alias = { "@lib": path.resolve(__dirname, '...p1/src/shared/') } }
This works for all aliases inside the project. But in my case it fails with
You attempted to import <root>/p1/src/shared... which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project's node_modules/
-