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

risen228 / craco-alias

readme