Aliased imports are not supported anymore when creating a new typescript react app #12047

hessaam · 2022-02-11T10:09:15Z

I created a new React-typescript app via this command with react@17.0.2 and typescript@4.5.2:

npx create-react-app my-app --template typescript

Then I decided to define the alias path as I did many times before. I created the tsconfig.paths.json in the root of my app.

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

Then I added the extend property to the tsconfig.json file:

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

Also, I installed react-app-rewired@2.1.8 and created the config-override.js:

const path = require('path');

module.exports = function override(config) {
	config.resolve = {
		...config.resolve,
		alias: {
			...config.alias,
			'components': path.resolve(__dirname, 'src/components/*'),
			'routes': path.resolve(__dirname, 'src/routes/*'),
			'constants': path.resolve(__dirname, 'src/constants/*'),
		}
	}
	return config;
}

So I reopened my IDE (VSCode) and ran npm start. I must mention I changed scripts in the package.json before running the start command.

{
 .
 .
 .
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }
 .
 .
 .
}

After running the start command, this message was displayed in a terminal, and compiling is failed:

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

*Failed to compile.

./src/App.tsx
Module not found: Can't resolve 'components' in .......*

So I started to search about this issue to resolve it. I found many approaches that I will mention some of them below:

1. Go to your jsconfig.json file add the base URL to be "."

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

Then you can directly import stuff from the src directory

import Myfile from "src/myfile.js"

Result ==> DID NOT WORK!

2. This problem is solved by an alias for rewire. Install react-app-rewire-alias then create config-override.js file:

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

     module.exports = function override(config) {
      alias(configPaths())(config)
      return config
     }

Result ==> DID NOT WORK!

3. Using craco@6.4.1 package

Install craco and craco-alias npm install @craco/craco --save and 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 the root directory

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"

Result ==> DID NOT WORK!

I'm confused because I used the alias path many times before, but it does not work now. I don't want to eject my app but using the alias path is helpful.

This is my question in the Stackoverflow community.

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

alexNerazim · 2022-02-22T14:07:12Z

I have the same issue, trying to resolve the path with alias and doing the webpack config have seen in multiply sites with tsconfig-paths-webpack-plugin and still not working..

MrHOY · 2022-04-22T06:17:07Z

I have the same issue.
Any solution for this ?

Aleksey-Danchin · 2022-04-23T20:20:03Z

It's 2022 year. React 18 released, CRA v5 released, nodejs imports option exists, but alias from box not supported =)

yatessss · 2022-06-01T11:33:28Z

I created a new React-typescript app via this command with react@17.0.2 and typescript@4.5.2:

npx create-react-app my-app --template typescript

Then I decided to define the alias path as I did many times before. I created the tsconfig.paths.json in the root of my app.
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "components/*": ["/components/*"],
      "routes/*": ["/routes/*"],
      "constants/*": ["/constants/*"]
    }
  }
}
Then I added the extend property to the tsconfig.json file:
{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}
Also, I installed react-app-rewired@2.1.8 and created the config-override.js:
const path = require('path');

module.exports = function override(config) {
	config.resolve = {
		...config.resolve,
		alias: {
			...config.alias,
			'components': path.resolve(__dirname, 'src/components/*'),
			'routes': path.resolve(__dirname, 'src/routes/*'),
			'constants': path.resolve(__dirname, 'src/constants/*'),
		}
	}
	return config;
}
So I reopened my IDE (VSCode) and ran npm start. I must mention I changed scripts in the package.json before running the start command.
{
 .
 .
 .
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }
 .
 .
 .
}
After running the start command, this message was displayed in a terminal, and compiling is failed:

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

*Failed to compile.

./src/App.tsx Module not found: Can't resolve 'components' in .......*

So I started to search about this issue to resolve it. I found many approaches that I will mention some of them below:

1. Go to your jsconfig.json file add the base URL to be "."
"compilerOptions": {
   "baseUrl": ".",
   ...
Then you can directly import stuff from the src directory
import Myfile from "src/myfile.js"
Result ==> DID NOT WORK!

2. This problem is solved by an alias for rewire. Install react-app-rewire-alias then create config-override.js file:
     const {alias, configPaths} = require('react-app-rewire-alias')

     module.exports = function override(config) {
      alias(configPaths())(config)
      return config
     }
Result ==> DID NOT WORK!

3. Using craco@6.4.1 package
Install craco and craco-alias npm install @craco/craco --save and 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 the root directory
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"
Result ==> DID NOT WORK!

I'm confused because I used the alias path many times before, but it does not work now. I don't want to eject my app but using the alias path is helpful.

This is my question in the Stackoverflow community.

remove all `*`

In my tests, simply remove the * from the alias, whether craco, react-app-rewired, To set up the alias configuration according to webpack document https://webpack.js.org/configuration/resolve/

in Craco:

webpack: {
    ...
    alias: {
      '@src': path.resolve(__dirname, 'src'),
    },
    ...
}

in react-app-rewired

const path = require('path');

module.exports = function override(config) {
	config.resolve = {
		...config.resolve,
		alias: {
			...config.alias,
			'components': path.resolve(__dirname, 'src/components'),
			'routes': path.resolve(__dirname, 'src/routes'),
			'constants': path.resolve(__dirname, 'src/constants'),
		}
	}
	return config;
}

jonathangraf · 2022-06-04T13:34:07Z

Using Craco could be a short-term solution, but why do they not work out of the box anymore? Weird stuff

charleston10 · 2022-08-14T11:23:13Z

I had to add react-app-rewired and react-app-rewired-alias
and followed the same tip that our friend commented @yatessss above and worked (thank u 😄)

My files

tsconfig.paths.json
tsconfig.json
config-overrides.js

tsconfig.paths.json

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

tsocnfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "experimentalDecorators": true
  },
  "include": [
    "src"
  ],
  "extends": "./tsconfig.paths.json" <<<<< import alias paths
}

config-overrides.js

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

module.exports = function override(config) {
    alias(configPaths())(config)
    return config;
}

package.json

{
...
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },
...
}

skysantoroa · 2022-09-13T10:43:31Z

@charleston10
Doesn't work alias is not a function

murashki · 2022-10-31T20:45:54Z

Пичалька

Arcanorum · 2022-12-08T03:52:18Z

This is nuts...

Eriold · 2022-12-13T16:27:00Z

Today have any solution for React 18.2? Because when I use .babelrc and import from tsconfig.js and my error is:

Module not found: Error: Can't resolve '~alias' in '...\src'

I use CRA and Node 18.12

rayraspberry · 2022-12-13T17:33:37Z

I was able to get aliases working with react-app-rewired + Node 16.
Switching to Craco isn't required.

"react": "^18.2.0",
"react-app-rewired": "^2.2.1"

devDeps:

    "react-app-alias": "^2.2.2",
    "react-app-rewire-alias": "^1.1.7",
    "react-scripts": "^5.0.1",
    "typescript": "^4.4.4",
    "webpack": "5"

The thing I discovered was that the aliases functionality seems to be limited to folder paths only not file aliases unfortunately.
Aliases need to be defined in a separate tsconfig.paths.json that is included in tsconfig.json

in tsconfig.json

  "extends": "./tsconfig.paths.json"

tsconfig.paths.json

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

then in the webpack override file config-overrides.js also needs matching aliases

const { aliasWebpack, aliasJest } = require('react-app-alias')
const { alias } = require('react-app-rewire-alias');

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

module.exports.jest = aliasJest(options)

module.exports = aliasWebpack(options)

module.exports = function override(config) {
  const fallback = config.resolve.fallback || {};
  alias({
    '@assets': 'src/assets',
    '@styles': 'src/assets/styles'
})(config);
return config;
};

I tried many other options and combinations of alias packages and this is the only way I've been able to get the alias functionality to work with CRA(rewired).

Repo with the working code is here:
https://github.com/Y-Foundry-Dao/yfd-dapp-gov

yeezick · 2022-12-23T17:18:26Z

Can we get some attention on this? This feels like something that should work out of the box..

H4mxa · 2022-12-26T10:46:56Z

My solution

yarn add react-app-rewired
create file config-overrides.js at project root and paste

const path = require('path');

module.exports = function override(config) {
  config.resolve = {
    ...config.resolve,
    alias: { '@modules': path.resolve(__dirname, 'src/modules/') },
  };

  return config;
};

change package.json script -> start to "react-app-rewired start"

danjguzman · 2023-01-03T23:08:31Z

In 2023 I still cannot get this to work. React 18.2. TS 4.9.4.

The "@Aliases" will not work unless I intentionally break the TS config file by adding "extends: false" to the top of the tsconfig file. But I lose all TS error reporting obviously (still get some warnings).

None of the suggestions in this long thread solves this issue. Craco, Rewire, everything fails to work. I spent weeks on this issue with zero results. I used cra to create a new app as well, so there's no old code messing things up.

This needs some serious attention.

PrinOrange · 2023-01-08T12:12:25Z

Although the path alias is still not supported now, but the official documentation has the solution for absolute-import that import modules by tsconfig/jsconfig with options baseUrl so it allows you import components elegantly. And you can do it to finish the similar effect.

- https://junjangsee.tistory.com/entry/React-CRA-Typescript-%ED%99%98%EA%B2%BD%EC%97%90%EC%84%9C-Module-Alias-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0 - facebook/create-react-app#12047 - https://plusreturn.com/blog/how-to-configure-a-path-alias-in-a-react-typescript-app-for-cleaner-imports/

danjguzman · 2023-01-30T00:51:24Z

My solution

yarn add react-app-rewired

create file config-overrides.js at project root and paste
const path = require('path');

module.exports = function override(config) {
  config.resolve = {
    ...config.resolve,
    alias: { '@modules': path.resolve(__dirname, 'src/modules/') },
  };

  return config;
};
change package.json script -> start to "react-app-rewired start"

Not sure how I missed this, but I just tried what you posted here and it's the only thing that worked. Thanks!

jackrdye · 2023-02-13T21:57:17Z

Why does this not just work... Next js allows it on create app. Just gives you the option to set up @/ as alias so much cleaner ....

I shouldn't have to mess with webpack for such a common request.

Someone in recta dev team add this!!!!

TonyGravagno · 2023-02-14T23:42:23Z

With the solution to use react-app-rewired, in package.json I had to change the build directive too, otherwise the override wasn't called:
"build": "react-app-rewired build",

With console.log(config) and the alias definitely pointing at the right folder, the import was still failing to recognize the alias.

This is really a shame. I'm gonna skip aliases entirely and use relative pathing until this is resolved: as noted by others, we shouldn't need to use other packages if this is supposed to be supported out of the box.

Thanks for everything we do have in this wonderful FOSS though!!

elmcapp · 2023-03-07T22:45:21Z

This question can be closed. The answer how to use Aliased is in the documents.

How typescript is included in the new version of React Native.
https://reactnative.dev/docs/typescript

How to use Aliased
https://reactnative.dev/docs/typescript#using-custom-path-aliases-with-typescript

These are from the officials docs and works

NOTE: when making changes in the babel.config file you need to clear the cache before everything works

In your terminal or cmd run: yarn start --reset-cache
Restart the development server close all terminal windows then rebuild or run your project

stag-enterprises · 2023-03-18T23:40:02Z

Testing with create-react-app version 5.0.1 with craco 7.1, it seems aliases are still unsupported.
Please add this functionality! 😢

jakubwilk · 2023-04-03T20:05:26Z

With:

create-react-app ver. 5.0.1 (react ver. 18.2.0)
@craco/craco ver. 7.1.0

My tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@app/pages": ["./src/app/pages/index.ts"],
      "@common": ["./src/modules/common/index.ts"]
    },
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

And craco.config.js:

const CracoAlias = require('craco-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: 'tsconfig',
        baseUrl: './',
        tsConfigPath: './tsconfig.json',
      },
    },
  ],
}

Import like this is working very well:

import { DialogContextProvider } from '@common'

Check your baseUrl options.

lukenzo · 2023-05-23T07:32:37Z

2023 and we still have this issue.. Time to switch to next.js

JE-lee · 2023-06-30T11:58:47Z

2023 is now ... 🤣

lehaiquantb · 2023-07-06T08:38:23Z

Time to switch to vite =))

icon2341 · 2023-07-27T19:41:42Z

Any movement? Thanks!

SightStudio · 2023-08-27T12:21:55Z

Why does this not just work? i spent so much time on this 😠

MrHOY · 2023-08-28T03:53:03Z

Next year is coming soon ...🤣

xxbek · 2023-12-09T14:31:45Z

End 2023! Still not supported

mohammadhannoun · 2023-12-28T13:37:28Z

This should be an out of the box thing, we need it to be supported.

Arcanorum · 2023-12-30T20:48:06Z

Just use Vite guys, it is easy to set up, is a lot faster, and absolute imports work out of the box.

iamcrisb · 2024-02-06T11:55:46Z

it's 2024 and this is still not supported, I'm dying

PrinOrange · 2024-02-16T14:58:53Z

The create-react-app seems to be abandoned for maintaining.
Use the Vite to start the react project instead.

abdulelah-tech · 2024-05-13T09:15:49Z

My solution

yarn add react-app-rewired

create file config-overrides.js at project root and paste
const path = require('path');

module.exports = function override(config) {
  config.resolve = {
    ...config.resolve,
    alias: { '@modules': path.resolve(__dirname, 'src/modules/') },
  };

  return config;
};
change package.json script -> start to "react-app-rewired start"

2024 and you're the only solution that works for me, Thanks!!

magrega · 2024-10-07T09:04:46Z

My solution

yarn add react-app-rewired

create file config-overrides.js at project root and paste
const path = require('path');

module.exports = function override(config) {
  config.resolve = {
    ...config.resolve,
    alias: { '@modules': path.resolve(__dirname, 'src/modules/') },
  };

  return config;
};
change package.json script -> start to "react-app-rewired start"

It works!

amrithdas · 2024-10-17T13:58:43Z

My solution

yarn add react-app-rewired

create file config-overrides.js at project root and paste
const path = require('path');

module.exports = function override(config) {
  config.resolve = {
    ...config.resolve,
    alias: { '@modules': path.resolve(__dirname, 'src/modules/') },
  };

  return config;
};
change package.json script -> start to "react-app-rewired start"

you are a lifesaver man. this worked for me.

Maybis · 2024-11-08T03:34:55Z

2024 is now ... 🤣

hessaam added the needs triage label Feb 11, 2022

RamonBalthazar mentioned this issue Jul 25, 2022

Is "app" folder name reserved when aliasing in typescript? #12377

Open

reanimatedmanx mentioned this issue Oct 8, 2023

Add TS path aliases (Client) reanimatedmanx/crunchytest#28

Closed

SureshPradhana mentioned this issue Jun 24, 2024

[bug]: Module not found: Error: Can't resolve '@/components/ui ....... shadcn-ui/ui#3705

Open

2 tasks

Aliased imports are not supported anymore when creating a new typescript react app #12047

Aliased imports are not supported anymore when creating a new typescript react app #12047

Comments

hessaam commented Feb 11, 2022

alexNerazim commented Feb 22, 2022 • edited Loading

MrHOY commented Apr 22, 2022

Aleksey-Danchin commented Apr 23, 2022

yatessss commented Jun 1, 2022

remove all *

jonathangraf commented Jun 4, 2022

charleston10 commented Aug 14, 2022

skysantoroa commented Sep 13, 2022 • edited Loading

murashki commented Oct 31, 2022

Arcanorum commented Dec 8, 2022

Eriold commented Dec 13, 2022

rayraspberry commented Dec 13, 2022

yeezick commented Dec 23, 2022

H4mxa commented Dec 26, 2022

danjguzman commented Jan 3, 2023

PrinOrange commented Jan 8, 2023

danjguzman commented Jan 30, 2023

jackrdye commented Feb 13, 2023 • edited Loading

TonyGravagno commented Feb 14, 2023

elmcapp commented Mar 7, 2023 • edited Loading

stag-enterprises commented Mar 18, 2023

jakubwilk commented Apr 3, 2023

lukenzo commented May 23, 2023

JE-lee commented Jun 30, 2023

lehaiquantb commented Jul 6, 2023

icon2341 commented Jul 27, 2023

SightStudio commented Aug 27, 2023 • edited Loading

MrHOY commented Aug 28, 2023

xxbek commented Dec 9, 2023

mohammadhannoun commented Dec 28, 2023

Arcanorum commented Dec 30, 2023

iamcrisb commented Feb 6, 2024

PrinOrange commented Feb 16, 2024

abdulelah-tech commented May 13, 2024

magrega commented Oct 7, 2024 • edited Loading

amrithdas commented Oct 17, 2024

Maybis commented Nov 8, 2024

alexNerazim commented Feb 22, 2022 •

edited

Loading

remove all `*`

skysantoroa commented Sep 13, 2022 •

edited

Loading

jackrdye commented Feb 13, 2023 •

edited

Loading

elmcapp commented Mar 7, 2023 •

edited

Loading

SightStudio commented Aug 27, 2023 •

edited

Loading

magrega commented Oct 7, 2024 •

edited

Loading