risen228 / craco-alias

A craco plugin for automatic aliases generation for Webpack and Jest
MIT License
109 stars 11 forks source link

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

Open honghainguyen777 opened 2 years ago

honghainguyen777 commented 2 years ago

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-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 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.