[Bug]: [unocss] entry module not found, have you add import 'uno.css' in your main entry?

[ErikDCAlmeida]

Describe the bug

I'm trying to use UnoCSS with Storybook, but every time I try to build Storybook it gives the error below on the component test screen. How can I solve this problem? Does anyone have any solution?

To Reproduce

https://stackblitz.com/edit/unocss-unocss-gytrvf

Run the pnpm storybook command and you will get the error when the compilation finishes.

System

Storybook Environment Info:

  System:
    OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (12) x64 12th Gen Intel(R) Core(TM) i7-1265U
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node
    Yarn: 1.22.21 - ~/.nvm/versions/node/v18.19.0/bin/yarn
    npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm
    pnpm: 8.14.1 - ~/.local/share/pnpm/pnpm <----- active
  npmPackages:
    @storybook/addon-essentials: ^8.0.5 => 8.0.5 
    @storybook/addon-interactions: ^8.0.5 => 8.0.5 
    @storybook/addon-links: ^8.0.5 => 8.0.5 
    @storybook/addon-mdx-gfm: ^8.0.5 => 8.0.5 
    @storybook/blocks: ^8.0.5 => 8.0.5 
    @storybook/manager-api: ^8.0.5 => 8.0.5 
    @storybook/test: ^8.0.5 => 8.0.5 
    @storybook/theming: ^8.0.5 => 8.0.5 
    @storybook/vue3: ^8.0.5 => 8.0.5 
    @storybook/vue3-vite: ^8.0.5 => 8.0.5 
    eslint-plugin-storybook: ^0.8.0 => 0.8.0 
    storybook: ^8.0.5 => 8.0.5

Additional context

No response

[fenprace]

Same here, even I have import 'virtual:uno.css' in .storybook/preview.ts. UnoCSS version 0.53.1.

[knight174]

I also meet this question with unocss by version 0.61.5

[bhvngt]

unocss is expecting uno.css to be imported in the entry module.

When I put this into .storybook/preview.ts and start storybook in a dev mode. It works fine. Even though it shows the OP's popup after sometime. On closing the popup, it allows me to use unocss atomic classes without any issue.

However, when I build storybook, it gives this error on the console and does not compiles unocss styles.

Any lead on what would possibly be an entry point for storybook-vite build. I tried importing it in .storybook/main.ts, but its does not work there. Throws Cannot find module 'uno.css'. Note that uno.css is a virtual file. So it does not exists on the file system.

[bhvngt]

Finally I got this working. Here's a rundown of my fix for anyone facing similar issue

I had to remove vite changes from my .storybook/main.ts. I have import 'uno.css' in my .storybook/preview.ts.

diff --git a/libs/ui/.storybook/main.ts b/libs/ui/.storybook/main.ts
index 0749af2..82e53b5 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -12,12 +12,5 @@ const config: StorybookConfig = {
     name: "@storybook/sveltekit",
     options: {},
   },
-  async viteFinal(config) {
-    const { default: unoCSS } = await import("unocss/vite");
-    config.plugins.push(
-      unoCSS({ configFile: "../uno.config.ts" }),
-    );
-    return config;
-  },
 };

With the above changes, unocss works during dev as well as build. entry module not found popup also does not appear. That message also disappears during storybook build.