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 thecore-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.
Hey guys,
I have been trying for a while to solve the problem with
pathsin 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 componentsfolder is inside the rootsrc.And my
craco.config.js:What I get in the console when I let the
debugfieldtrue:VSCode does not complain about anything. However, when I run
npm start(craco start), I get the errorModule not found: Can't resolve 'images/abcde.svg' in <path-to-root-folder>/src/images/abcde.svg.Note: the
abcde.svgfile exists insrc/core-componentsbut not in the src/images. However, I have specified the"": ["", "core-components/src/*"], I would expect the compiler looks to thesrc/imagesfirst. If the module/svg file is not there, it looks in thecore-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
pathsbecause I can't export hundreds of images in theroot/src/core-components/src/imagesfolder and use them somewhere else or override some of them in theroot/src/images. The compiler will first look for matched files in this folder if the images exist.