Skip to main content

Custom Aliases

If you use custom aliases, you may need to help React Preview resolve imports.

For example if you have import such as import ... from "ui-components/Button" that should map to src/ui/components/Button, you will need the following configuration:

/reactpreview.config.js
const reactpreview = require("@reactpreview/config");
module.exports = reactpreview.config({  alias: {    "ui-components": "src/ui/components",  },});

Webpack example#

If you want to import aliases from Webpack, you could use the following configuration:

/reactpreview.config.js
const webpackConfig = require("./webpack.config");const reactpreview = require("@reactpreview/config");
module.exports = reactpreview.config({  alias: webpackConfig.resolve.alias,});

TypeScript support#

If you use TypeScript, you're in luck.

React Preview can automatically detect aliases from tsconfig.json. As a result, you may not need to explicitly provide aliases.