This package is deprecated, use react-app-alias instead

A craco plugin for automatic aliases generation for Webpack and Jest.

List of Contents

Installation
Options
Examples
Ran into a problem?
If you want to help

Installation

Install craco

Install craco-alias:

npm i -D craco-alias

yarn add -D craco-alias

Edit craco.config.js:

const CracoAlias = require("craco-alias");
module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        // see in examples section
      }
    }
  ]
};

Go to Examples section

Options

source:
One of "options", "jsconfig", "tsconfig"
Optional, defaults to "options"
baseUrl:
A base url for aliases. (./src for example)
Optional, defaults to ./ (project root directory)
aliases:
An object with aliases names and paths
Only required when source is set to "options"
tsConfigPath:
A path to tsconfig file
Only required when source is set to "tsconfig"
filter:
A function of type ([key, value]) => boolean
Optional, used to remove some aliases from the resulting config
Example: ([key]) => !key.startsWith('node_modules')
unsafeAllowModulesOutsideOfSrc:
Allow importing modules outside of ./src folder.
Disables webpack ModuleScopePlugin.
debug:
Enable it if you ran into a problem. It will log a useful info in console.
Optional, defaults to false

Examples

Specify aliases manually (source: “options”)

> Note: you don’t need to add /* part for directories in this case

js
/* craco.config.js */

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

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "options",
        baseUrl: "./",
        aliases: {
          "@file": "./src/file.js",
          "@dir": "./src/some/dir",
          // you can alias packages too
          "@material-ui": "./node_modules/@material-ui-ie10"
        }
      }
    }
  ]
};

Use aliases from jsconfig.json (source: “jsconfig”)

js
/* craco.config.js */

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

module.exports = {
  plugins: [
    {
      plugin: CracoAlias,
      options: {
        source: "jsconfig",
        // baseUrl SHOULD be specified
        // plugin does not take it from jsconfig
        baseUrl: "./src"
      }
    }
  ]
};

> Note: your jsconfig should always have compilerOptions.paths property. baseUrl is optional for plugin, but some IDEs and editors require it for intellisense.

js
/* jsconfig.json */

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      // file aliases
      "@baz": ["./baz.js"],
      "@boo": ["./boo.jsx"],

      // folder aliases
      "@root": ["./"],
      "@root/*": ["./*"],
      "@lib": ["./lib"],
      "@lib/*": ["./lib/*"],

      // package aliases (types is optional without ts)
      "@my-react-select": [
        "../node_modules/react-select",
        "../node_modules/@types/react-select"
      ],
      "@my-react-select/*": [
        "../node_modules/react-select/*",
        "../node_modules/@types/react-select"
      ]
    }
  }
}

Use aliases from tsconfig.json (source: “tsconfig”)

1. Go to project’s root directory.

2. Create tsconfig.extend.json.

3. Edit it as follows:

js
   {
     "compilerOptions": {
       "baseUrl": "./src",
       "paths": {
         // file aliases
         "@baz": ["./baz.ts"],
         "@boo": ["./boo.tsx"],

         // folder aliases
         "@root": ["./"],
         "@root/*": ["./*"],
         "@lib": ["./lib"],
         "@lib/*": ["./lib/*"],

         // package aliases
         "@my-react-select": [
           "../node_modules/react-select",
           "../node_modules/@types/react-select"
         ],
         "@my-react-select/*": [
           "../node_modules/react-select/*",
           "../node_modules/@types/react-select"
         ]
       }
     }
   }

4. Go to tsconfig.json.

5. Extend tsconfig.json from tsconfig.extend.json:

diff
   {
   + "extends": "./tsconfig.extend.json",
     "compilerOptions": {
       ...
     },
     ...
   }

6. Edit craco.config.js:

js
   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.extend.json"
         }
       }
     ]
   };

Ran into a problem?

Make sure your config is valid.
Set debug to true in options.
Run application again.
Copy a printed info.
Here, create an issue describing your problem (do not forget to add the debug info).

If you want to help

Install:

yarn

Use yarn please. npm may fail the dependencies installation.

Run tests:

yarn test