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

[hessaam]

I created a new React-typescript app via this command with [email protected] and [email protected]:

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 [email protected] 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 [email protected] package

1. Install craco and craco-alias npm install @craco/craco --save and npm i -D craco-alias

2. Create tsconfig.paths.json in root directory

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

3. Extend tsconfig.paths.json in tsconfig.json

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

4. 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"
           }
        }
     ]
   };
   

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

[alexNerazim]

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]

I have the same issue. Any solution for this ?

[Aleksey-Danchin]

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

[yatessss]

I created a new React-typescript app via this command with [email protected] and [email protected]:

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 [email protected] 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 [email protected] package

1. Install craco and craco-alias npm install @craco/craco --save and npm i -D craco-alias
2. Create tsconfig.paths.json in root directory

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

3. Extend tsconfig.paths.json in tsconfig.json { "extends": "./tsconfig.paths.json", //default configs... }
4. 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"
           }
        }
     ]
   };
   

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

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

[mhmdnzr]

I found the solution in the link below, you must use the Craco package Link

[charleston10]

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]

@charleston10 Doesn't work alias is not a function

[murashki]

Пичалька

[Arcanorum]

This is nuts...

[Eriold]

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]

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]

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

[H4mxa]

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]

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]

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.

[danjguzman]

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]

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]

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]

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

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

[stag-enterprises]

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

[jakubwilk]

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 and we still have this issue.. Time to switch to next.js

[JE-lee]

2023 is now ... 🤣

[lehaiquantb]

Time to switch to vite =))

[icon2341]

Any movement? Thanks!

[SightStudio]

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

[MrHOY]

Next year is coming soon ...🤣

[xxbek]

End 2023! Still not supported

[mohammadhannoun]

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