CRA appears to disallow tsconfig compilerOptions.paths

[devinrhode2]

It also appears to disallow changing isolatedModules, but that's unrelated. CRA forces certain tsconfig options to be set, even if you change them in tsconfig, cra will override whatever you did (I believe to prevent some issues those settings would cause)

So I will not use aliases, as I'm more interested in using typescript

We could use lerna and create packages, or just npm install a package folder npm install ./packages/my-package where my-package folder contains a package.json file

[devinrhode2]

CRA clearly prints out in the terminal that is is changing these options when running npm start.

[risen228]

@devinrhode2 Are you trying to specify these options directly in tsconfig.json? If so, you should create a separate file (for example named tsconfig.edit.json) and extend the main config from it.

Like that:

// tsconfig.json

{
  "extends": "./tsconfig.edit.json",
  ...
}

// tsconfig.edit.json

{
  "compilerOptions": {
    "baseUrl": "src", 
    "paths": {
      "@file-alias": ["./your/file.tsx"],
      "@folder-alias/*": ["./very/long/path/*", "./very/long/path/"]
    }
  }
}

[devinrhode2]

yep, followed the documentation... I am using latest version of react-scripts, 3.3.0

On Thu, Jan 2, 2020, 6:19 PM Evgeny Zakharov notifications@github.com wrote:

@devinrhode2 https://github.com/devinrhode2 Are you trying to specify these options directly in tsconfig.json? If so, you should create separate file (for example tsconfig.edit.json) and extend the main config from it.

Like that:

// tsconfig.json

{ "extends": "./tsconfig.edit.json", ... } // tsconfig.edit.json

{ "compilerOptions": { "baseUrl": "src", "paths": { "@file-alias": ["./your/file.tsx"], "@folder-alias/": ["./very/long/path/", "./very/long/path/"] } } }

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/risenforces/craco-alias/issues/5?email_source=notifications&email_token=AAEDZKEKWWLSVTP2LLYEUZTQ32AARA5CNFSM4KCHLRJKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEH74VOI#issuecomment-570411705, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEDZKETEVFBZOH6LRRO6ETQ32AARANCNFSM4KCHLRJA .

[risen228]

@devinrhode2 Just checked. Yes, there really is such a problem. I’ll try to figure out if there is an opportunity to do something with this in order to leave everything as it is. tsconfig without paths setting makes vscode not understand aliases correctly, it's very bad.

[risen228]

Currently you can specify aliases manually using the config source, but, as i said above, I'm not sure if VSCode and some other editors and IDEs understand aliases without proper tsconfig options. I think WebStorm has an option to specify aliases somewhere in the settings, but anyway it's bad.

[devinrhode2]

could consider using symlinks, or doing whatever lerna does, or just recommending some other method of creating aliases

[risen228]

Wait. I think everything should work as intended. craco-alias generates aliases and the CRA error means nothing for it. Using the separate tsconfig file disallows CRA to delete options from there. So VSCode and other editors still continue to suggest import paths, auto-imports and so.

I will check it again soon and close the issue if there is no problem.

In addition, I think readme part about tsconfig should be updated to be more convenient for understanding. I will edit it soon.

[risen228]

But anyway, if you want to use isolatedModules and other ts features, I don't think CRA is the best option. It really restricts config editing.

[axetroy]

@devinrhode2 Are you trying to specify these options directly in tsconfig.json? If so, you should create a separate file (for example named tsconfig.edit.json) and extend the main config from it.

Like that:

// tsconfig.json

{
  "extends": "./tsconfig.edit.json",
  ...
}

// tsconfig.edit.json

{
  "compilerOptions": {
    "baseUrl": "src", 
    "paths": {
      "@file-alias": ["./your/file.tsx"],
      "@folder-alias/*": ["./very/long/path/*", "./very/long/path/"]
    }
  }
}

I tried this solution and it is well recognized in the IDE/editor but doesn't work for craco

Here Is the debug information

Initial options:

{
  "debug": true,
  "source": "tsconfig",
  "baseUrl": "./src",
  "tsConfigPath": "./tsconfig.extend.json"
}

Normalized options:

{
  "source": "tsconfig",
  "baseUrl": "./src",
  "tsConfigPath": "./tsconfig.extend.json",
  "debug": true
}

Aliases:

{
  "@": "/path/to/project/folder/src/*"
}

Webpack Config:

{
  "react-native": "react-native-web",
  "@": "/path/to/project/folder/src/*"
}

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

[antonlashan]

@axetroy override webpack config in craco.config

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  plugins: [
    ...
    {
      plugin: {
        overrideWebpackConfig: ({ webpackConfig }) => {
          webpackConfig.resolve.plugins.push(new TsconfigPathsPlugin({}));
          return webpackConfig;
        }
      },
    }
  ],
};