Custom Aliases

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

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

// preview.config.js

/** @type {import("@previewjs/config").PreviewConfig} */
module.exports = {
  alias: {
    "ui-components": "src/ui/components",
  },
};

Webpack example

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

// preview.config.js
const webpackConfig = require("./webpack.config");

/** @type {import("@previewjs/config").PreviewConfig} */
module.exports = {
  alias: webpackConfig.resolve.alias,
};

TypeScript support

If you use TypeScript, you're in luck.

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