Skip to content
This repository has been archived by the owner on May 19, 2022. It is now read-only.

Multiple fall back locations in paths do not get compiled #43

Open
honghainguyen777 opened this issue Dec 8, 2021 · 0 comments
Open

Comments

@honghainguyen777
Copy link

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant