craco-alias
craco-alias copied to clipboard
Multiple fall back locations in paths do not get compiled
Hey guys,
I have been trying for a while to solve the problem with paths
in tsconfig.paths.json. My compiler looks for files in the first location but not the "fall back location".
Here is my tsconfig.paths.json
:
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"*": ["*", "core-components/src/*"]
}
}
}
Note: the core components
folder is inside the root src
.
And my craco.config.js
:
const CracoAlias = require('craco-alias');
module.exports = {
plugins: [
plugin: CracoAlias,
options: {
source: 'tsconfig',
baseUrl: './src',
tsConfigPath: 'tsconfig.paths.json',
debug: true
},
]
}
What I get in the console when I let the debug
field true
:
Initial options:
{
"source": "tsconfig",
"baseUrl": "./src",
"tsConfigPath": "tsconfig.paths.json",
"debug": true
}
Normalized options:
{
"source": "tsconfig",
"baseUrl": "./src",
"tsConfigPath": "tsconfig.paths.json",
"debug": true,
"unsafeAllowModulesOutsideOfSrc": false
}
Initial aliases:
{
"*": "<path-to-root-folder>\\src\\*"
}
Aliases:
{
"*": "<path-to-root-folder>\\src\\*"
}
Webpack Config:
{
"react-native": "react-native-web",
"*": "<path-to-root-folder>\\src\\*"
}
The following changes are being made to your tsconfig.json file:
- compilerOptions.paths must not be set (aliased imports are not supported)
VSCode does not complain about anything. However, when I run npm start
(craco start
), I get the error Module not found: Can't resolve 'images/abcde.svg' in <path-to-root-folder>/src/images/abcde.svg
.
Note: the abcde.svg
file exists in src/core-components
but not in the src/images. However, I have specified the
"": ["", "core-components/src/*"], I would expect the compiler looks to the
src/imagesfirst. If the module/svg file is not there, it looks in the
core-components/src/images`. However, it does not.
From the console log, we can't see the "core-components/src/*"
added to the Aliases. According to the TS module-resolution, the path together with its fallback locations should be included.
I want to use paths
because I can't export hundreds of images in the root/src/core-components/src/images
folder and use them somewhere else or override some of them in the root/src/images
. The compiler will first look for matched files in this folder if the images exist.