create-react-app Typescript 3.5, Path Alias

Question

I am trying to setup Path alias in my project by adding these values to tsconfig.json:

  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@store/*": ["store/*"]
    },

And if I create an import, neither IntelliJ or VSCode bother me:

import { AppState } from '@store/index';

But when I compile the application I get this warning:

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

And it bombs saying it cannot find the reference:

TypeScript error in C:/xyz.tsx(2,26):
Cannot find module '/store'.  TS2307

Is there any workaround or it is not supported by create-react-app --typescript?

do you using custom webpack?

Juraj Kocan
– Juraj Kocan

2019-07-17 07:23:29 +00:00
Commented Jul 17, 2019 at 7:23 — Juraj Kocan
– Juraj Kocan, Commented Jul 17, 2019 at 7:23
Yes, I do use react-app-rewired to customize webpacks

Raffaeu
– Raffaeu

2019-07-17 07:26:19 +00:00
Commented Jul 17, 2019 at 7:26 — Raffaeu
– Raffaeu, Commented Jul 17, 2019 at 7:26

mukuljainx · Accepted Answer · 2022-11-30 23:06:24Z

54

In my case ,i solved this issue using craco and craco-alias

Install craco and craco-alias : npm install @craco/craco --save && npm i -D craco-alias

Create tsconfig.paths.json in root directory

{
    "compilerOptions": {
        "baseUrl": "./src",
        "paths": {
           "@components/*" : ["./components/*"]
         }
    }
}

Extend tsconfig.paths.json in tsconfig.json

{
    "extends": "./tsconfig.paths.json",
    //default configs...
}

Create craco.config.js in root direcory

  const CracoAlias = require("craco-alias");

  module.exports = {
     plugins: [
       {
          plugin: CracoAlias,
          options: {
             source: "tsconfig",
             // baseUrl SHOULD be specified
             // plugin does not take it from tsconfig
             baseUrl: "./src",
             /* tsConfigPath should point to the file where "baseUrl" and "paths" 
             are specified*/
             tsConfigPath: "./tsconfig.paths.json"
          }
       }
    ]
  };

in package.json swap "start": "react-scripts start" with "start": "craco start"

edited Nov 30, 2022 at 23:06

mukuljainx

7161 gold badge6 silver badges17 bronze badges

answered Aug 12, 2020 at 21:46

Иван Яковлев

9941 gold badge9 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Jon G Over a year ago

And then you should be able to use e.g: import Bla from '@components/Bla';? Where I have created a file at ./components/Bla.tsx.

Jon G Over a year ago

I turned your steps into a script: pastebin.com/KkPUjZBU with the addition of my above comment. Unfortunately it fails with Can't resolve '@components/Bla'. Did I make a mistake?

Иван Яковлев Over a year ago

did you create components dir in src directory? If not , you need change absolute path in configs "baseUrl": "./src"

Иван Яковлев Over a year ago

or 61 line cat > components/Bla.tsx change on cat > src/components/Bla.tsx

Jon G Over a year ago

Ah, got it, thanks. Yes, I am trying to have a components package outside of src. I will try editing "baseUrl".

|

oklas · Accepted Answer · 2022-03-05 11:06:12Z

19

The alias solution for craco or rewired create-react-app is react-app-alias for systems as: craco, react-app-rewired, customize-cra

According docs of mentioned systems replace react-scripts in package.json and configure next:

react-app-rewired

// config-overrides.js
const {aliasWebpack, aliasJest} = require('react-app-alias')

const options = {} // default is empty for most cases

module.exports = aliasWebpack(options)
module.exports.jest = aliasJest(options)

craco

// craco.config.js
const {CracoAliasPlugin} = require('react-app-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {}
    }
  ]
}

all

Configure aliases in json like this:

// tsconfig.paths.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "example/*": ["example/src/*"],
      "@library/*": ["library/src/*"]
    }
  }
}

And add this file in extends section of main typescript config file:

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

edited Mar 5, 2022 at 11:06

answered Mar 9, 2020 at 9:56

oklas

8,2702 gold badges31 silver badges42 bronze badges

3 Comments

Son Nguyen Over a year ago

react-app-rewire-alias also requires you to modify the npm scripts in package.json. Here is my code example if anyone interested: github.com/GW-Web-Enterprise/ReactJS/commit/…. This code example removes the baseUrl compiler option and still keeps back the relative import for files at the src/* root to prevent any confusion might have such as import routes from 'src/routes' instead of import routes from './routes'. Because 'src' might make you think there is an external NPM package named 'src'

Topsy Over a year ago

It compiles but it does not resolve in vscode

oklas Over a year ago

Seems "Not resolve in vscode" is not related to react-app-rewire-alias or creact-react-app etc. Check what is (ts/js)config.json - may be something wrong with it or vscode options.

Abraham · Accepted Answer · 2021-09-08 20:06:39Z

14

Path aliases no longer work in tsconfig.json

you can do this instead, to directly import files relative to the src directory

go to your tsconfig.json file add base URL to be "."

"compilerOptions": {
    "baseUrl":".",
    ...

then you can directly import stuff from the src directory

import Myfile from "src/myfile.js"

edited Sep 8, 2021 at 20:06

answered Aug 13, 2021 at 22:35

Abraham

16.3k12 gold badges91 silver badges124 bronze badges

1 Comment

AirKoKo Over a year ago

The problem here is that VS Code highlight the import line as an error as it isn't able to make the connection.

Marcus · Accepted Answer · 2020-03-20 15:59:59Z

11

Edit - 20/3/20 - Above answer has a solution with a plugin.

Had the same problem. At the time of posting it is currently not supported as is.

This feature is still in development with the CRA team: https://github.com/facebook/create-react-app/pull/6116

If you edit the tsconfig CRA removes changes: https://github.com/facebook/create-react-app/issues/6269

There are some hacks in this thread: https://github.com/facebook/create-react-app/issues/5118 to get aliases working however require customization to the CRA setup which isn't suitable for my use case (using CRA as is).

edited Mar 20, 2020 at 15:59

answered Oct 25, 2019 at 11:53

Marcus

1,94820 silver badges27 bronze badges

Comments

Jalal · Accepted Answer · 2021-03-10 19:13:55Z

5

@oklas. I've resolved using the following in config-overrides.js which is the same as above. But Thanks a lot for sharing this answer:

const { alias, configPaths } = require("react-app-rewire-alias");

module.exports = function override(config) {
  alias({
    ...configPaths("base-tsconfig.json"),
  })(config);
  return config;
};

edited Mar 10, 2021 at 19:13

Jalal

3,7144 gold badges38 silver badges46 bronze badges

answered May 13, 2020 at 4:33

Brad

3113 silver badges11 bronze badges

1 Comment

Mike Vargas Over a year ago

Thanks this working only need add base-tsconfig.json path! testing with React 16.13.1

Poyoman · Accepted Answer · 2021-10-07 09:37:51Z

4

This is an old post, but i've found an extremly simple solution using only package.json features.

"dependencies": {
  "@yourAlias": "file:./path/to/your/folder"
}

It works both in node.js and webpack projects

answered Oct 7, 2021 at 9:37

Poyoman

2,0031 gold badge24 silver badges34 bronze badges

5 Comments

Qwertiy Over a year ago

At least it seems working :)

Thijmen Over a year ago

Could you elaborate on how you did this? It does not seem to work for me!

Poyoman Over a year ago

@Thijmen from tests i did, this is working fine with node.js using require, and webpack using import. This is not working fine with node.js using import. Is this your case ?

Thijmen Over a year ago

I eventually managed to get it working as illustrated in the comment by @Иван Яковлев!

Michael B. Over a year ago

For cra with typescript, works togehter the paths option in tsconfig, tho those "packages" are also under src.

Niklas Kraßnig · Accepted Answer · 2023-01-12 20:17:01Z

1

Another workaround is just naming a folder inside ./src @ and setting the baseURL in the tsconfig.json to src.

Imports will then have a leading @/ like import { MyComponent } from "@/components/MyComponent"; or import { TodoEndpoint } from "@/endpoints/TodoEndpoint";. Since there is no library named @ in NPM this will not lead to conflict with other node_modules imports.

tsconfig.json

{
  "compilerOptions": {
    ...
    "baseUrl": "src"
  }
}

folder structure

+src
| +@
| | + components
| | +-  MyComponent.tsx
| | + endpoints
| | +-  TodoEndpoint.ts
| index.tsx

answered Jan 12, 2023 at 20:17

Niklas Kraßnig

356 bronze badges

Comments

Zeeshan · Accepted Answer · 2020-08-23 10:05:33Z

0

Have also solved the solution using craco with ts-loader - described here: https://stackoverflow.com/a/63545611/10813908

The stated setup essentially allows CRA to be extended upon by overidding the build-in webpack config via craco and also allows CRA code to directly reference typescript files in the external/shared packages in your mono-repo.

answered Aug 23, 2020 at 10:05

Zeeshan

1,2851 gold badge11 silver badges12 bronze badges

Comments

Valentine Shi · Accepted Answer · 2022-06-04 07:32:44Z

In 2022 for those who works with the ejected TypeScript create-react-app you can set aliases via webpack in config/webpack.config.js with the following:

    // ... the other keys of webpack config;
    resolve: {
        alias: {
            // ... here set your aliases among ones the CRA sets itself
            // NB: __dirname will refer to ./config so you have to put '../src' to move up from ./config folder and set @src tp ./src, not ./config/src;
            '@src': path.join(__dirname, '../src')
            // Here set your other aliases if needed.
        }
    }

Then use the alias in your ts/tsx files like this:

import logo from '@src/assets/logo.svg';

Here is webpack resolve docs for basics.

Note, that the only alias CRA sets itself is src, so you can use import logo from 'src/assets/logo.svg'; with no changes to webpack config. If the alias works in non-ejected app you have to check yourself.

Collectives™ on Stack Overflow

create-react-app Typescript 3.5, Path Alias

9 Answers 9

9 Comments

react-app-rewired

craco

all

3 Comments

Path aliases no longer work in tsconfig.json

1 Comment

Comments

1 Comment

5 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

9 Comments

react-app-rewired

craco

all

3 Comments

Path aliases no longer work in tsconfig.json

1 Comment

Comments

1 Comment

5 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related