search

HorusGoul / vite-plugin-stylex

Vite Plugin for StyleX
MIT License
110 stars 11 forks source link

Issue building static storybook in 0.8.0 #60

Closed BMCwebdev closed 3 months ago

BMCwebdev commented 3 months ago

Heyo. So when I updated to v0.8.0 I ran into an issue running npm run build-storybook. The build would fail with this error message:

=> Failed to build the preview
TypeError: [vite-plugin-stylex] this.addWatchFile is not a function

If I roll back to v 0.7.0 the build will run. Let me know if I can provide any other information. Thanks!

HorusGoul commented 3 months ago

This plugin doesn't call the addWatchFile anywhere, I'm going to need a reproduction repo, storybook version, vite version, etc.

patrickstubner commented 3 months ago

Same issue here. But not only when running storybook, also when running normal build pnpm run build or pnpm run build-storybook. I'm using a pretty basic Vite 5.2.6, React 18.2.0, Typescript 5.4.3 setup. @stylexjs/stylex version 0.5.1 vite-plugin-stylex version 0.8.1 same Error as in the original post. vite-plugin-stylex version 0.7.0 works fine. So Storybook does not seam to be the issue but I'm on version 8.0.4 there. So everything pretty up to date. Hope this will help you.

BMCwebdev commented 3 months ago

In a test env I just set up with v8, everything worked fine while building storybook. In the app I am working on I tested it out, and v8 I got that error. I'll try to see what the differences between the two builds are, they are nearly the same. Will get back to you and set up a test repo if I track it down. Thanks!

predaytor commented 3 months ago

Aha! the error occurs when using the url string: https://stackblitz.com/edit/remix-run-remix-tbable?file=app%2Froutes%2F_index.tsx

const styles = stylex.create({
    root: {
        backgroundImage: 'url(/background.svg)',
        // ^
    },
});
❯ pnpm build

> @ build /home/projects/remix-run-remix-tbable
> remix vite:build

vite v5.2.6 building for production...
✓ 83 modules transformed.
warnings when minifying css:
Unknown at rule: @stylex
rendering chunks (5)...
/assets/background.svg referenced in stylex.css didn't resolve at build time, it will remain unchanged to be resolved at runtime
x Build failed in 1.15s
TypeError: [vite-plugin-stylex] this.addWatchFile is not a function
    at Object.transform (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/vite@5.2.6_lightningcss@1.24.1/node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:31569:26)
    at async Object.generateBundle (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/vite-plugin-stylex@0.8.1_@stylexjs+stylex@0.5.1_vite@5.2.6/node_modules/vite-plugin-stylex/dist/index.mjs:189:35)
    at async Bundle.generate (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/rollup@4.13.0/node_modules/rollup/dist/es/shared/node-entry.js:17967:9)
    at async eval (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/rollup@4.13.0/node_modules/rollup/dist/es/shared/node-entry.js:20504:27)
    at async catchUnfinishedHookActions (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/rollup@4.13.0/node_modules/rollup/dist/es/shared/node-entry.js:19932:16)
    at async Module.build (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/vite@5.2.6_lightningcss@1.24.1/node_modules/vite/dist/node/chunks/dep-BBHrJRja.js:67323:22)
    at async viteBuild (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/@remix-run+dev@2.8.1_@remix-run+serve@2.8.1_lightningcss@1.24.1_typescript@5.4.3_vite@5.2.6/node_modules/@remix-run/dev/dist/vite/build.js:212:5)
    at async build (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/@remix-run+dev@2.8.1_@remix-run+serve@2.8.1_lightningcss@1.24.1_typescript@5.4.3_vite@5.2.6/node_modules/@remix-run/dev/dist/vite/build.js:236:3)
    at async Object.viteBuild (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/@remix-run+dev@2.8.1_@remix-run+serve@2.8.1_lightningcss@1.24.1_typescript@5.4.3_vite@5.2.6/node_modules/@remix-run/dev/dist/cli/commands.js:183:5)
    at async Object.run (file:///home/projects/remix-run-remix-tbable/node_modules/.pnpm/@remix-run+dev@2.8.1_@remix-run+serve@2.8.1_lightningcss@1.24.1_typescript@5.4.3_vite@5.2.6/node_modules/@remix-run/dev/dist/cli/run.js:252:7) {
  code: 'PLUGIN_ERROR',
  plugin: 'vite-plugin-stylex',
  hook: 'generateBundle'
}
 ELIFECYCLE  Command failed with exit code 1.
nexisbs commented 3 months ago

Same here:

The problem comes from this code:

const cssResult = await viteCssPlugin.transform?.call({}, stylexCSS, "stylex.css");
nexisbs commented 3 months ago

I think this will fix it:

const cssResult = await viteCssPlugin.transform?.call(
    this,
    stylexCSS,
    'stylex.css'
);
HorusGoul commented 3 months ago

Thank you all for the help! This is clearly going to keep happening so I'm going to release a small patch (0.8.2) and investigate how to use this new experimental API from Vite (https://github.com/vitejs/vite/pull/16135) to make the plugin use the Vite pipeline for transforming CSS instead of this bunch of hacky things on generateBundle.

predaytor commented 3 months ago

Can confirm that the new version 0.9.0-next.0 has fixed this issue.