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.
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
[Bug]: Storybook doesn’t work with unplugin icons #20562
Comments
I noticed this problem only in my SvelteKit stories. It works correctly with React stories.
|
I was able to workaround the issue by monkey-patching const workaroundSvelteDocgenPluginConflictWithUnpluginIcons = (config: InlineConfig) => {
if (!config.plugins) return config
const [_internalPlugins, ...userPlugins] = config.plugins as Plugin[]
const docgenPlugin = userPlugins.find(plugin => plugin.name === 'storybook:svelte-docgen-plugin')
if (docgenPlugin) {
const origTransform = docgenPlugin.transform
const newTransform: typeof origTransform = (code, id, options) => {
// ignore unplugin-icons resources
if (id.startsWith('~icons/')) {
return
}
return (origTransform as Function)?.call(docgenPlugin, code, id, options)
}
docgenPlugin.transform = newTransform
docgenPlugin.enforce = 'post'
}
return config
} Example TypeScript Storybook config// .storybook/main.ts
import type { Plugin, InlineConfig } from 'vite'
import type { StorybookConfig } from '@storybook/sveltekit'
// https://github.com/storybookjs/storybook/issues/20562
const workaroundSvelteDocgenPluginConflictWithUnpluginIcons = (config: InlineConfig) => {
if (!config.plugins) return config
const [_internalPlugins, ...userPlugins] = config.plugins as Plugin[]
const docgenPlugin = userPlugins.find(plugin => plugin.name === 'storybook:svelte-docgen-plugin')
if (docgenPlugin) {
const origTransform = docgenPlugin.transform
const newTransform: typeof origTransform = (code, id, options) => {
if (id.startsWith('~icons/')) {
return
}
return (origTransform as Function)?.call(docgenPlugin, code, id, options)
}
docgenPlugin.transform = newTransform
docgenPlugin.enforce = 'post'
}
return config
}
const config: StorybookConfig = {
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-interactions',
],
framework: {
name: '@storybook/sveltekit',
options: {},
},
docs: {
autodocs: 'tag',
},
viteFinal(config) {
return workaroundSvelteDocgenPluginConflictWithUnpluginIcons(config)
}
}
export default config @enyo's JavaScript Storybook config, modified with the workaround// .storybook/main.js
import { mergeConfig } from "vite";
import Icons from "unplugin-icons/vite";
import path from "path";
// https://github.com/storybookjs/storybook/issues/20562
/**
* @param {import('vite').InlineConfig} config
*/
const workaroundSvelteDocgenPluginConflictWithUnpluginIcons = (config) => {
if (!config.plugins) return config
const [_internalPlugins, ...userPlugins] = config.plugins
const docgenPlugin = userPlugins.find(plugin => plugin.name === 'storybook:svelte-docgen-plugin')
if (docgenPlugin) {
const origTransform = docgenPlugin.transform
const newTransform = (code, id, options) => {
if (id.startsWith('~icons/')) {
return
}
return origTransform?.call(docgenPlugin, code, id, options)
}
docgenPlugin.transform = newTransform
docgenPlugin.enforce = 'post'
}
return config
}
/**
* @type {import('@storybook/sveltekit').StorybookConfig}
*/
const config = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|ts|svelte)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
],
framework: {
name: "@storybook/sveltekit",
options: {},
},
docs: {
autodocs: "tag",
},
async viteFinal(config) {
config = workaroundSvelteDocgenPluginConflictWithUnpluginIcons(config)
// Merge custom configuration into the default config
return mergeConfig(config, {
plugins: [
Icons({
compiler: "svelte",
}),
],
// Add dependencies to pre-optimization
optimizeDeps: {
include: ["storybook-dark-mode"],
},
});
},
};
export default config; |
Thanks for the workaround, @tony19. I'm reluctant to do this in the base plugin, since technically anyone could use |
I had to add |
It looks to me like this would only be hit when a preprocessor is being used:
I'm not quite sure what this code is doing. It looks like the |
No, I think it just needs to be changed not to try to read from disk. I meant to make that change but then forgot about it. Thanks for the reminder. If anyone wants to take a crack at it before I get to it, feel free! |
Does anyone have a solution for this issue? |
Yes, I believe the solution is to change the |
Workaround until this gets fixed: if(docPreprocessOptions){let rawSource=import_fs.default.readFileSync(resource).toString(),{code:fileContent}=await(0,import_compiler.preprocess)(rawSource,docPreprocessOptions,{filename:resource});docOptions={fileContent}} with if(docPreprocessOptions)try{let rawSource=import_fs.default.readFileSync(resource).toString(),{code:fileContent}=await(0,import_compiler.preprocess)(rawSource,docPreprocessOptions,{filename:resource});docOptions={fileContent}}catch(e){} else Notice right after the |
Describe the bug
When adding unplugin/icons for sveltekit, it fails due to the docgen plugin.
To Reproduce
System
No response
Additional context
https://discord.com/channels/486522875931656193/1061953675263742042
The text was updated successfully, but these errors were encountered: