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.