Alias Source Code Import

There are two methods to override the import path:

Using the paths property in tsconfig.json
Using the alias property in package.json

Alias Local TypeScript Imports

To alias local imports, use the paths mapping in tsconfig.json:

{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": ["./**/*.ts", "./**/*.tsx"],
  "compilerOptions": {
    "paths": {
      "~*": ["./src/*"],
      "@Components/*": ["./src/components/*"]
    },
    "baseUrl": "."
  }
}

You can then use it as follow:

import { Button } from "@Components/button"
import { Checkbox } from "@Components/checkbox"
import { Header } from "@Components/header"
import { Input } from "@Components/input"

See the example in bug-244-alias-local-imports (opens in a new tab)

Alias External TypeScript Modules

To alias external typescript modules, you may use the paths mapping pointing to an external directory in tsconfig.json:

{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": ["node_modules"],
  "include": ["./**/*.ts", "./**/*.tsx"],
  "compilerOptions": {
    "paths": {
      "coolio/*": ["../../../some-cool-package/*"]
    },
    "baseUrl": "."
  }
}

The import becomes:

import { hello } from "coolio/hello"

Alias External Imports

You can use the alias field to map an import path to a file external to your project:

{
  "alias": {
    "some-cool-identifier/hello": "../../../cool-file.js"
  }
}

Make sure to also declare that import in a typescript declaration cool-file.d.ts file:

declare module "some-cool-identifier/hello" {
  export const hello: string
}

And include that file in your tsconfig.json:

{
  ...
  "include": ["./**/*.ts", "./**/*.tsx", "./cool-file.d.ts"]
}

Then you can use it in your code:

import { hello } from "some-cool-identifier/hello"

Alias API-Compatible Modules

Use the alias field in package.json to alias API-compatible modules. You can map to a local file or a dependency package.

Using Preact instead of React

Since Preact's API is compatible with React, you can alias it like so:

{
  "alias": {
    "react": "preact/compat",
    "react-dom": "preact/compat"
  }
}

Replace the HTML Internal Paths