Using the tsconfig file to configure the alias does not take effect #8909

VitaminCtea · 2020-04-26T15:09:49Z

The project was generated using the create-react-app scaffolding, and the paths option was removed when I used the tsconfig.json file to configure the path alias! Then I tried to use the extends property in the tsconfig.json file to connect to the external path configuration file, but it didn't work either! Using the customize-cra plug-in in conjunction with the above configuration file does not take effect. How do I configure it? Why doesn't the scaffolding support?

React version: 16.13.1
react-scripts version: 3.4.1

{
  "extends": "./tsconfig.paths.json", // Subsequent configuration options
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

The tsconfig.paths. json path file configuration:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@/*": ["src/*"],
      "actions/*": ["src/actions"],
      "api/*": ["src/api"],
      "common/*": ["src/common"],
      "components/*": ["src/components"],
      "containers/*": ["src/containers"],
      "helper/*": ["src/helper"],
      "icon/*": ["src/icon"],
      "reducers/*": ["src/reducers"]
    }
  }
}

Customize -cra configuration file:

const { override, addDecoratorsLegacy, addWebpackAlias } = require("customize-cra")
const path = require("path")

module.exports = override(
  addDecoratorsLegacy(),
  addWebpackAlias({
      "@": path.resolve(__dirname, 'src'),
      "actions": path.resolve(__dirname, 'src/actions'),
      "api": path.resolve(__dirname, 'src/api'),
      "common": path.resolve(__dirname, 'src/common'),
      "components": path.resolve(__dirname, 'src/components'),
      "containers": path.resolve(__dirname, 'src/containers'),
      "helper": path.resolve(__dirname, 'src/helper'),
      "icon": path.resolve(__dirname, 'src/icon'),
      "reducers": path.resolve(__dirname, 'src/reducers')
  })
)

Sample file contents:
import App from 'components/App'
Warning message:

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

Error message:

./src/index.tsx
Module not found: Can't resolve 'components/App' in 'D:\code\my-music\src'

Please help me thank you!

The text was updated successfully, but these errors were encountered:

lnwu · 2020-04-27T03:44:02Z

And the hit "compilerOptions.paths must not be set (aliased imports are not supported)"
will disable your paths settings, so vscode will not detect it even it works with Customize -cra.

VitaminCtea · 2020-04-27T05:02:54Z

@lnwu The editor is webstorm! The problem has been resolved and you need to install react-app-rewired and configure both the ts path alias Settings and the webpack alias Settings

lnwu · 2020-04-28T17:20:48Z

Found that can do it just using baseurl in tscofig, so we can using

Import Button from "components"

that refs src/components

VitaminCtea · 2020-04-29T01:00:50Z

@lnwu If "src/" is added to each introduction, it is still not convenient, and it is better to use the shortest path. I am not sure why the create-react-app scaffolding removes the paths option when compiling, is this the default? For this reason, most people use react-app-rewired to change the path configuration!

JounQin · 2020-05-06T14:26:22Z

It is definitely bad to modify user's custom tsconfig.json without options!

I found a workaround:

Move current tsconfig.json to tsconfig.base.json, and add a new file tsconfig.json:

{
  "extends": "./tsconfig.base.json"
}

3stacks · 2020-05-09T06:23:05Z

@JounQin if I do what you proposed I get You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file when trying to import another .ts file.

Have you encountered this error?

JounQin · 2020-05-09T06:53:49Z

@3stacks I didn't get this error.

fahamidev · 2020-07-02T06:59:30Z

@VitaminCtea
This code worked for me.

stackoverflow.com
Click on me

cseas · 2020-07-11T21:43:59Z

create-react-app doesn't support path aliasing and probably won't for the near future.
Reference: #7795 (comment)

The best alternative right now is to define "baseUrl": "." and prefix imports with src
Example:

import { MyComponent } from "src/components"

nateq314 · 2020-07-20T01:04:46Z

It is definitely bad to modify user's custom tsconfig.json without options!

I found a workaround:

Move current tsconfig.json to tsconfig.base.json, and add a new file tsconfig.json:
{
  "extends": "./tsconfig.base.json"
}

This worked for me! Used it for importing types from an adjacent package in a monorepo.

stale · 2020-08-22T23:06:21Z

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

stale · 2020-08-29T09:09:42Z

This issue has been automatically closed because it has not had any recent activity. If you have a question or comment, please open a new issue.

avbentem · 2020-09-03T14:22:10Z

Just for future reference:

Using aliases may also be nice for TypeScript typings. (Like when using a limited bundle for Plotly, then for import Plotly from 'plotly.js-basic-dist' one could still use the typings of the full bundle. Not sure how to easily achieve that without aliased imports.)
When using "extends": "./tsconfig.base.json" I still get the same message, and my tsconfig.json is still changed (like: it's pretty-formatted and comments are removed). But the extends is left untouched and is still effective. (For me, the TypeScript compiler no longer fails, and both npm test and npm run build work fine. 🥳)

ref: facebook/create-react-app#8909 (comment)

* wip? * fixes * wip * connect client every time * pool * make server use ts * more * fix imports * implicit any true in frontend * fixes * refactor fronted src/api * fix imports * noimplicitany stuff * mess around double tsconfig more * revert PuzzleList * scaffolding for new puzzle list * more scaffolding * ts * more fixes * mess around with types * set up shared path * tsconfig updates * tsconfig.base.json ref: facebook/create-react-app#8909 (comment) * restore old welcome page * add localstorage gate for new puzzle list * restore old upload functionality too * fix add event

AleksandrHovhannisyan · 2021-04-14T12:06:59Z

Is there at least a good reason for not allowing path aliases in CRA?

ZumDeWald · 2021-04-24T15:57:20Z

It is definitely bad to modify user's custom tsconfig.json without options!

I found a workaround:

Move current tsconfig.json to tsconfig.base.json, and add a new file tsconfig.json:
{
  "extends": "./tsconfig.base.json"
}

Worked perfectly! Thanks for this.

SimonChaumet · 2021-04-28T16:53:12Z

It could be nice to write why, and at least write in the advanced usage that you can't do it.
Or maybe add a section in the advanced usages with the list of what you can't do.

Deleting the paths section in the tsconfig is really disturbing, the first time I didn't know why my code was deleted because once the application is built the console is cleared.

cseas · 2021-04-28T23:42:46Z

Doesn't look like anyone from the create-react-app team is getting notifications on this since it was closed by stale bot. Further discussion should probably be continued in a new issue/feature-request, unless this one can be reopened.

DylanCulfogienis · 2021-05-18T17:51:11Z

Just ran into this. Hoping to see a resolution some time in the future.

ramishenouda · 2021-05-19T21:50:31Z

I don't think any of create-react-app team is going to comment on this, so I solved this by creating paths.json file

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

and then extended it in the tsconfig.json file

.
.
"include": [
    "src"
  ],
  "extends": "./paths.json"
}

zirkelc · 2021-05-20T09:10:08Z

I just tried it (again). The code completion in VSCode works for those paths, but it won't compile and outputs the following error message:

Module not found: Can't resolve '@components/layout/ToggleSection' in '/Users/chris/app/src/pages/Perspectives'

Interestingly, when I restart my react app via npm run start, I briefly see the following message before compilation starts:

So it doesn't work for me with "react-scripts": "4.0.3".

zaneclaes · 2021-05-25T15:10:57Z

@ramishenouda what version of react-scripts and typescript are you using?

Is anybody aware of any workaround to get aliases working in CRA? I've tried this, but so far no luck. My symptoms are the same as the last poster, i.e., autocomplete validates the syntax but the react-scripts start results in a build failure.

mdziekon · 2021-05-25T15:23:05Z

@zaneclaes @chriszirkel

@ramishenouda what version of react-scripts and typescript are you using?

Is anybody aware of any workaround to get aliases working in CRA? I've tried this, but so far no luck. My symptoms are the same as the last poster, i.e., autocomplete validates the syntax but the react-scripts start results in a build failure.

TypeScript aliases work fine in CRA with a bit of help of craco. Basically:

take this advice about tsconfig file: Using the tsconfig file to configure the alias does not take effect #8909 (comment)
use craco + craco-alias plugin to run / build / whatever your app

We've been using this setup for more than a year now and we had absolutely no problems with it. It works on the latest version of CRA and the previous major version as well, TS 3.7+ (potentially earlier version as well).

zaneclaes · 2021-05-25T16:09:35Z

Thank you; this worked, and saved me many hours. I had tried a different eject/alias tool (linked in the last post), but Craco did the trick. I specifically used the Use aliases from tsconfig.json (source: "tsconfig") example from the craco-alias docs.

alexandrebrg · 2021-06-09T09:57:40Z

Thank you; this worked, and saved me many hours. I had tried a different eject/alias tool (linked in the last post), but Craco did the trick. I specifically used the Use aliases from tsconfig.json (source: "tsconfig") example from the craco-alias docs.

Do you guys still have the warning when building ? Even though aliases are working properly ?

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

mdziekon · 2021-06-09T10:03:39Z

Thank you; this worked, and saved me many hours. I had tried a different eject/alias tool (linked in the last post), but Craco did the trick. I specifically used the Use aliases from tsconfig.json (source: "tsconfig") example from the craco-alias docs.

Do you guys still have the warning when building ? Even though aliases are working properly ?
The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

Yes, but it doesn't matter for us.

LoveMeWithoutAll · 2021-06-23T06:43:00Z

Thank you; this worked, and saved me many hours. I had tried a different eject/alias tool (linked in the last post), but Craco did the trick. I specifically used the Use aliases from tsconfig.json (source: "tsconfig") example from the craco-alias docs.

Do you guys still have the warning when building ? Even though aliases are working properly ?
The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)
Yes, but it doesn't matter for us.

I got a same issue.

kishore-s-15 · 2021-07-16T10:43:47Z

It is definitely bad to modify user's custom tsconfig.json without options!

I found a workaround:

Move current tsconfig.json to tsconfig.base.json, and add a new file tsconfig.json:
{
  "extends": "./tsconfig.base.json"
}

Thanks it works for me. I used it to refer the types module for ploty.js dist package.

hichemfantar · 2021-07-24T22:37:56Z

It is definitely bad to modify user's custom tsconfig.json without options!
I found a workaround:
Move current tsconfig.json to tsconfig.base.json, and add a new file tsconfig.json:
{
  "extends": "./tsconfig.base.json"
}
Thanks it works for me. I used it to refer the types module for ploty.js dist package.

Can you please send me your configuration file, I'm trying to set an alias for my images folder but cra isn't even detecting files called with the base url.
I'm not using any external tools btw, I'm just editing tsconfig in a new cra

jacobedawson · 2021-08-05T22:15:03Z

It is definitely bad to modify user's custom tsconfig.json without options!
I found a workaround:
Move current tsconfig.json to tsconfig.base.json, and add a new file tsconfig.json:
{
  "extends": "./tsconfig.base.json"
}
Thanks it works for me. I used it to refer the types module for ploty.js dist package.
Can you please send me your configuration file, I'm trying to set an alias for my images folder but cra isn't even detecting files called with the base url.
I'm not using any external tools btw, I'm just editing tsconfig in a new cra

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

// tsconfig.json
{
  // all the other config...
  "extends": "./tsconfig.paths.json"
}

This worked once I also installed craco (npm i @craco/craco) and set up a craco.config.js file:

// craco.config.js
const path = require("path");
module.exports = {
  webpack: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
};

Finally, replace react-scripts with craco in package.json:

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "craco eject"
  }

NOTE: you will still get a warning in the console, but it works.
Not sure why such a standard practice is a hassle to configure. /shrug

Reference by facebook/create-react-app#8909 (comment)

AntonioRedondo · 2021-11-24T22:15:19Z

It's a bit hard to understand how something as basic as aliases are not supported by CRA. Even with CRACO it's still cumbersome to get it working.

tiarebalbi · 2021-12-27T20:23:57Z

It is definitely bad to modify user's custom tsconfig.json without options!
I found a workaround:
Move current tsconfig.json to tsconfig.base.json, and add a new file tsconfig.json:
{
  "extends": "./tsconfig.base.json"
}
This worked for me! Used it for importing types from an adjacent package in a monorepo.

Unfortunately, this workaround is no longer working on cra@5 :(

guAnsunyata · 2021-12-29T11:27:27Z

Unfortunately, this workaround is no longer working on cra@5 :(

alias in CRA@5 works without any workaround. just modify the path config in tsconfig.json

update: it works with craco, craco-alias. but craco is not fully support CRA@5 now.

tiarebalbi · 2021-12-29T11:32:01Z

Unfortunately, this workaround is no longer working on cra@5 :(

alias in CRA@5 works without any workaround. just modify the path config in tsconfig.json

I'm going to create an example here to reproduce the problem, but with my current project, it didn't work. I end up using the react-app-rewired to override the settings.

…ct-app#8909)

itumoraes · 2022-05-30T20:34:22Z

It is definitely bad to modify user's custom tsconfig.json without options!

I found a workaround:

Move current tsconfig.json to tsconfig.base.json, and add a new file tsconfig.json:
{
  "extends": "./tsconfig.base.json"
}

Worked like a charm! Thanks!

MrBrN197 · 2022-06-04T15:26:45Z

I've been struggling to get this to work. Thanks for all the solutions. Although the extends trick doesn't seem to work anymore. 😂almost as if it's actively being prevented.

But seriously, is someone really telling me that no one from the React team is going to explain or acknowledge this in any way at all.

hichemfantar · 2022-06-04T16:28:20Z

@MrBrN197 Switch to nextjs, it supports client side rendering.

0xPBIT · 2022-09-16T21:14:32Z

Is there at least a good reason for not allowing path aliases in CRA?

Was this ever answered? I want to use aliases but it seems like it's discouraged.

youneshenniwrites · 2022-11-28T11:54:08Z

Next JS is the way to go now. Ditch CRA.

AntonioRedondo · 2022-11-28T11:59:29Z

You may be right @youneshenniwrites. It seems development in the project is a bit stale?

tiarebalbi · 2022-11-28T12:32:43Z

Migrated CRA to Vite. Working very well.

hichemfantar · 2022-11-28T13:05:23Z

@MrBrN197 Switch to nextjs, it supports client side rendering.

Vite is also a viable choice.

ThePiyushAggarwal · 2023-03-30T14:25:32Z

Update 2023, CRA still sucks. Not able to set the path as per my need. Tried the extends suggestion.

v4voloshyn · 2023-07-20T18:48:15Z

Update 2023, CRA still sucks. Not able to set the path as per my need. Tried the extends suggestion.

@ThePiyushAggarwal Is the extends work in CRA v5?

ThePiyushAggarwal · 2023-07-20T18:56:20Z

@v4voloshyn I think you may be thinking of v5 as the latest version. It is latest but it is 2 years old and extends didn't work for me in v5.

VitaminCtea added the needs triage label Apr 26, 2020

stale bot added the stale label Aug 22, 2020

davestewart mentioned this issue Aug 25, 2020

Breaks the development process davestewart/alias-hq#1

Closed

stale bot closed this as completed Aug 29, 2020

stevenhao added a commit to downforacross/downforacross.com that referenced this issue Dec 26, 2020

tsconfig.base.json

bff349a

ref: facebook/create-react-app#8909 (comment)

LunaTK mentioned this issue Mar 20, 2021

import 경로 webpack alias LunaTK/baemin-order-survey#3

Closed

alan2207 mentioned this issue Jul 27, 2021

Suggestion: merge tsconfig.paths.json into tsconfig.json alan2207/bulletproof-react#9

Closed

atstoyanov mentioned this issue Jul 30, 2021

Spike: Investigate the possibility of using aliased imports alkem-io/client-web#912

Closed

2 tasks

yisu-kim added a commit to yisu-kim/pre-onboarding-solarconnect that referenced this issue Aug 19, 2021

Fix: non-relative path error

4f77c35

Reference by facebook/create-react-app#8909 (comment)

nessor mentioned this issue Sep 10, 2021

compilerOptions.paths must not be set (aliased imports are not supported) risen228/craco-alias#34

Open

xAt0mZ added a commit to xAt0mZ/wingo-kacky that referenced this issue Dec 31, 2021

build: need to leave alias imports until CRA fix (facebook/create-rea…

96fdccd

…ct-app#8909)

Using the tsconfig file to configure the alias does not take effect #8909

Using the tsconfig file to configure the alias does not take effect #8909

Comments

VitaminCtea commented Apr 26, 2020

lnwu commented Apr 27, 2020

VitaminCtea commented Apr 27, 2020

lnwu commented Apr 28, 2020

VitaminCtea commented Apr 29, 2020

JounQin commented May 6, 2020

3stacks commented May 9, 2020

JounQin commented May 9, 2020

fahamidev commented Jul 2, 2020

cseas commented Jul 11, 2020 • edited Loading

nateq314 commented Jul 20, 2020

stale bot commented Aug 22, 2020

stale bot commented Aug 29, 2020

avbentem commented Sep 3, 2020

AleksandrHovhannisyan commented Apr 14, 2021

ZumDeWald commented Apr 24, 2021

SimonChaumet commented Apr 28, 2021

cseas commented Apr 28, 2021

DylanCulfogienis commented May 18, 2021

ramishenouda commented May 19, 2021

zirkelc commented May 20, 2021

zaneclaes commented May 25, 2021

mdziekon commented May 25, 2021 • edited Loading

zaneclaes commented May 25, 2021

alexandrebrg commented Jun 9, 2021 • edited Loading

mdziekon commented Jun 9, 2021

LoveMeWithoutAll commented Jun 23, 2021

kishore-s-15 commented Jul 16, 2021

hichemfantar commented Jul 24, 2021 • edited Loading

jacobedawson commented Aug 5, 2021 • edited Loading

AntonioRedondo commented Nov 24, 2021

tiarebalbi commented Dec 27, 2021

guAnsunyata commented Dec 29, 2021 • edited Loading

tiarebalbi commented Dec 29, 2021

itumoraes commented May 30, 2022

MrBrN197 commented Jun 4, 2022 • edited Loading

hichemfantar commented Jun 4, 2022

0xPBIT commented Sep 16, 2022

youneshenniwrites commented Nov 28, 2022

AntonioRedondo commented Nov 28, 2022 • edited Loading

tiarebalbi commented Nov 28, 2022 via email • edited Loading

hichemfantar commented Nov 28, 2022

ThePiyushAggarwal commented Mar 30, 2023

v4voloshyn commented Jul 20, 2023 • edited Loading

ThePiyushAggarwal commented Jul 20, 2023

cseas commented Jul 11, 2020 •

edited

Loading

mdziekon commented May 25, 2021 •

edited

Loading

alexandrebrg commented Jun 9, 2021 •

edited

Loading

hichemfantar commented Jul 24, 2021 •

edited

Loading

jacobedawson commented Aug 5, 2021 •

edited

Loading

guAnsunyata commented Dec 29, 2021 •

edited

Loading

MrBrN197 commented Jun 4, 2022 •

edited

Loading

AntonioRedondo commented Nov 28, 2022 •

edited

Loading

tiarebalbi commented Nov 28, 2022 via email •

edited

Loading

v4voloshyn commented Jul 20, 2023 •

edited

Loading