Storybook with vite configuration cannot resolve local libraries

[mdo5004]

Current Behavior

Using the new default .storybook/main.ts configuration with @storybook/react-vite does not work if another library from the integrated monorepo is imported. Using @storybook/react-webpack5 works fine.

Expected Behavior

I should be able to use storybook w/ vite even if my UI library imports from other monorepo libs

GitHub Repo

https://github.com/mdo5004/storybook-vite-import-bug

Steps to Reproduce

1. Create a new integrated monorepo with React presets
2. Create a JS library
3. Create a React library
4. Add Storybook configuration to React library
5. Import something from JS library into React component
6. Start React lib's Storybook

Nx Report

Node   : 18.15.0
   OS     : darwin-x64
   npm    : 9.6.7
   
   nx (global)        : 16.7.1
   nx                 : 16.7.1
   @nx/js             : 16.7.1
   @nx/jest           : 16.7.1
   @nx/linter         : 16.7.1
   @nx/workspace      : 16.7.1
   @nx/cypress        : 16.7.1
   @nx/devkit         : 16.7.1
   @nx/eslint-plugin  : 16.7.1
   @nx/next           : 16.7.1
   @nx/react          : 16.7.1
   @nx/storybook      : 16.7.1
   @nrwl/tao          : 16.7.1
   @nx/web            : 16.7.1
   typescript         : 5.1.6

Failure Logs

From the terminal:


Failed to resolve import "@storybook-vite-import-bug/core" from "libs/ui-components/src/lib/ui-components.tsx". Does the file exist?
11:40:07 AM [vite] Internal server error: Failed to resolve import "@storybook-vite-import-bug/core" from "libs/ui-components/src/lib/ui-components.tsx". Does the file exist?
  Plugin: vite:import-analysis
  File: /Users/mdo5004/Code/storybook-vite-import-bug/libs/ui-components/src/lib/ui-components.tsx:2:0
  15 |  }
  16 |  import styles from "./ui-components.module.css";
  17 |  import { MyClass } from "@storybook-vite-import-bug/core";
     |                           ^
  18 |  export function UiComponents(props) {
  19 |    const obj = new MyClass();
      at formatError (file:///Users/mdo5004/Code/storybook-vite-import-bug/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:42645:46)
      at TransformContext.error (file:///Users/mdo5004/Code/storybook-vite-import-bug/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:42641:19)
      at normalizeUrl (file:///Users/mdo5004/Code/storybook-vite-import-bug/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:40508:33)
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async file:///Users/mdo5004/Code/storybook-vite-import-bug/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:40651:47
      at async Promise.all (index 4)
      at async TransformContext.transform (file:///Users/mdo5004/Code/storybook-vite-import-bug/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:40577:13)
      at async Object.transform (file:///Users/mdo5004/Code/storybook-vite-import-bug/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:42919:30)
      at async loadAndTransform (file:///Users/mdo5004/Code/storybook-vite-import-bug/node_modules/vite/dist/node/chunks/dep-e8f070e8.js:53385:29)



In the browser:
Failed to fetch dynamically imported module: http://localhost:4400/src/lib/ui-components.stories.tsx
TypeError: Failed to fetch dynamically imported module: http://localhost:4400/src/lib/ui-components.stories.tsx

Operating System

• macOS
• Linux
• Windows
• Other (Please specify)

Additional Information

There is no option to use @storybook/react-webpack5 instead of @storybook/react-vite in the storybook configuration generator, so I simply copy over an older version of .storybook/main.ts that does use webpack as a workaround.

[mdo5004]

Probably related, but unclear to me: #17156 (comment)

[mdo5004]

Changing .storybook/main.ts to

import type { StorybookConfig } from '@storybook/react-vite';
import { mergeConfig } from 'vite';
import path from 'path';

const config: StorybookConfig = {
  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
  framework: {
    name: '@storybook/react-vite',
    options: {
      builder: {
        viteConfigPath: '',
      },
    },
  },
  viteFinal: async (config) =>
    mergeConfig(config, {
      resolve: {
        alias: {
          '@storybook-vite-import-bug/core': path.resolve(
            __dirname,
            '../../core/src/index.ts'
          ),
        },
      },
    }),
};

export default config;

as per #17156 (comment) does resolve the issue

However, #17156 (comment) does not resolve the issue

[mdo5004]

Also related: #17749

[mandarini]

Hey @mdo5004 thanks for filing an issue! The reason why it's failing is because your library does not have a vite.config.ts file, in which, usually, we add the ts paths!

In order for your code to work, you can do one of the following things:

Use the @nx/vite plugin

1. Install the @nx/vite plugin, eg. npm i @nx/vite
2. In your Storybook .storybook/main.ts file add the following:

import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
import { mergeConfig } from 'vite';

const config: StorybookConfig = {
....
  viteFinal: async (config) =>
    mergeConfig(config, {
      plugins: [nxViteTsPaths()],
    }),
...
}

Take a look at my PR: mdo5004/storybook-vite-import-bug#2

Alternatively, use the vite-tsconfig-paths plugin

1. Install the vite-tsconfig-paths plugin, eg. npm i vite-tsconfig-paths
2. In your Storybook .storybook/main.ts file add the following:

import viteTsConfigPaths from 'vite-tsconfig-paths';
import { mergeConfig } from 'vite';

const config: StorybookConfig = {
....
  viteFinal: async (config) =>
    mergeConfig(config, {
      plugins: [
        viteTsConfigPaths({
          root: '../../',
        }),
      ],
    }),
...
}

Take a look at my PR: mdo5004/storybook-vite-import-bug#1

However, you are correct, we should somehow include this in our generator. I will make sure to push a fix there! :)

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.