Not working as vite plugin in storybook

[mjangir]

Hello @HorusGoul , This looks a nice plugin for stylex. However, I tried it with the storybook with the following config:

import viteStylexPlugin from 'vite-plugin-stylex';

const config = StorybookConfig = {
    ...restConfig,
    async viteFinal(config) {
        return mergeConfig(config, {
            plugins: [viteStylexPlugin()]
        })
    }
}

The error I'm getting is, import babel from "@babel/core" Cannot use import statement outside a module.

[HorusGoul]

Hey! @mjangir, thanks for raising this issue. I haven't looked into Storybook yet, but should be next after I fix some issues with the currently supported frameworks.

In the meantime, can you try using a dynamic import of the plugin and see if that fixes it for you? The plugin is an ESM-only package at the moment, and I don't have plans to change that. Maybe it makes it work with your setup:

const config = StorybookConfig = {
    ...restConfig,
    async viteFinal(config) {
        const styleX = await import('vite-plugin-stylex').then(m => m.default)

        return mergeConfig(config, {
            plugins: [styleX()]
        })
    }
}

[HorusGoul]

Ok so I've tested Storybook in a small codebase with stylex enabled, and it seems to work.

12 introduced e2e tests for Storybook and a demo, so it should be covered by any future update.

Your error seems to be related to the plugin being an ESM-only package. Using import like I showcased in my previous comment should make it work.

If you encounter any other issue with Storybook, please let me know with another issue.

Thanks!