Skip to content

4.0.8 + Vite + Storybook = new crash #16785

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
aaronadamsCA opened this issue Feb 24, 2025 · 12 comments
Closed

4.0.8 + Vite + Storybook = new crash #16785

aaronadamsCA opened this issue Feb 24, 2025 · 12 comments

Comments

@aaronadamsCA
Copy link
Contributor

What version of Tailwind CSS are you using?

v4.0.8

What build tool (or framework if it abstracts the build tool) are you using?

Storybook v8.5.8
Vite v5.4.14

What version of Node.js are you using?

Node.js v23.8.0

What operating system are you using?

Ubuntu 24.04.1 LTS

Reproduction URL

Don't think you need one yet, can put one together if it's helpful.

Describe your issue

(This is not the same as #16751, which is about package.json CJS compatibility.)

Just reporting a new crash when using the Vite plugin with Storybook:

Error: ENOENT: no such file or directory, stat 'SOME_PATH/iframe.html'

I'm guessing #16780 may fix it.

LMK if you need help putting together an integration test fixture for Storybook Vite, I think it would be worthwhile.
@benweier-riotinto
Copy link

Also getting this crash with Tailwind 4.0.8, Node 20.18.3, Storybook 8.5.6, and Vite 6.1.1

TypeError [ERR_INVALID_ARG_VALUE]: The argument 'path' must be a string, Uint8Array, or URL without null bytes. Received '[path_to_project]\\\x00\\iframe.html'

@tmvnkr
Copy link

tmvnkr commented Feb 25, 2025 •
edited
Loading

As a temporary workaround you could place an iframe.html in your root folder:

<!doctype html>
<html>
  <head>
    <title>Storybook iframe placeholder</title>
  </head>
  <body>
    <!-- This will be replaced by Storybook -->
  </body>
</html>

@philipp-spiess
Copy link
Member

Ah yep this sounds like #16780 might fix it. Let me get this one out in a release today if possible!

@philipp-spiess philipp-spiess mentioned this issue Feb 25, 2025
Open
@philipp-spiess
Copy link
Member

Fix is out in the latest insider build if someone can confirm who happens to have a repro lying around.

@pReya
Copy link

pReya commented Feb 25, 2025

Fix is out in the latest insider build if someone can confirm who happens to have a repro lying around.

How can we get an "insider build"? Just install from main branch via npm?

@philipp-spiess
Copy link
Member

npm install @tailwindcss/vite@insiders tailwindcss@insiders, sorry for omitting this crucial piece of information 🙈

@tmvnkr
Copy link

tmvnkr commented Feb 25, 2025 •
edited
Loading

I had the same issue, after installing the latest insiders build it now works. Thanks @philipp-spiess!

@philipp-spiess
Copy link
Member

Awesome! We'll get this into a patch release pronto, going to close the issue then 👍

@praneybehl
Copy link

Tried the packages mentioned here but still broken.

@deebov
Copy link
Contributor

deebov commented Feb 27, 2025 •
edited
Loading

Unfortunately the latest release didn't fix it for us.

This is the output we see:

[vite] Internal server error: ENOENT: no such file or directory, open '/some-path/some-asset'
  Plugin: vite:css-analysis
  File: /my-projects/styles/globals.css

This is our versions:

    "@storybook/experimental-nextjs-vite": "^8.6.2",
    "@storybook/nextjs": "^8.6.2",
    "@storybook/react": "^8.6.2",
    "@tailwindcss/postcss": "^4.0.9",
    "@tailwindcss/vite": "^4.0.9",
    "storybook": "^8.6.2",
    "tailwindcss": "^4.0.9",

This is how .storbook/main.ts looks:

import { StorybookConfig } from "@storybook/experimental-nextjs-vite";

const config: StorybookConfig = {
    stories: ["../@(components|examples)/**/*.@(stories|story).@(js|jsx|ts|tsx)"],
    framework: "@storybook/experimental-nextjs-vite",
    staticDirs: ["../public"],
};

export default config;

Let me know if you need a minimal reproducible repo or stackblitz repo.

@philipp-spiess
Copy link
Member

@deebov A reproduction would be great (feel free to open up a new issue with that), thank you!

@deebov
Copy link
Contributor

deebov commented Feb 28, 2025

@philipp-spiess Thanks for the tip. I narrowed down the issue and created a new issue with reproducible repo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@philipp-spiess @aaronadamsCA @praneybehl @pReya @tmvnkr @deebov @benweier-riotinto