Problem with using public folder files

[delicate flax]

Hello, guys
I'm trying to migrate from sb 6 to 7 and I'm having problems using favion and other .svg files from the public folder
How coul I solve this?

This is my main.ts file:

import type { StorybookConfig } from '@storybook/react-vite'; const config: StorybookConfig = { stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'], framework: { name: '@storybook/react-vite', options: {}, }, core: { disableTelemetry: true, enableCrashReports: false, builder: '@storybook/builder-vite', }, staticDirs: ['./public'], docs: { autodocs: true, }, }; module.exports = config;

[ornate nymph]

Hi! I see a couple things that could be at issue here.

1. staticDirs needs to be defined relative to the location of .storybook/main.js. For many projects this means it should be staticDirs: ['../public'], but you'll need to ensure that matches your project and update it accordingly.

2. Once you have that in place, Storybook will place anything in your public directory in the root of the Storybook build. This means you access it like so:

import favicon from '/favicon.ico'

Docs: https://storybook.js.org/docs/react/configure/images-and-assets#serving-static-files-via-storybook-configuration

---

Also, this is unrelated, but you can remove core.builder from your main.js config. That property is now built-in to the framework.

[delicate flax]

Hello @ornate nymph. Thanks fro answer me 😄

My public folder is inside the storybook folder, so I believe staticDirs: ['./public'] is correct.

About core.builder, I removed it as you sugested, thanks 😄

[ornate nymph]

Oh! Thanks for sharing that.

staticDirs is more for when your components or stories need to access assets that are already in a "public" folder used by your actual app/site.

For what you're doing, I think you can just access those assets directly. Did you try that?

I'm not sure if staticDirs works when pointing to something inside .storybook... 🤔

[delicate flax]

@ornate nymph currently we use version 6 of the storybook and we can use these files from the public folder normally, but after I updated to version 7, this error that I sent earlier appeared

I tried commenting out the favicon usage and ended up with this new error. What I found strange is that I am not using any logo.png file and there is no such path mentioned: 'C:\Workspace\foton-ui\assets\logo.png'

[ornate nymph]

Super strange!

Does your vite config handle the .ico files in your actual app?

<@&1106610490592993280> <@&1106605011485597747> Any idea what might cause this?

Btw, that '../src/**/*.stories.mdx' glob should really be '../src/**/*.mdx' for Storybook 7. How we handle stories in MDX changed quite a bit.

Can you share a typical MDX document, so I can guide your migration?

[delicate flax]

I'm using this config in my main.ts

our current project is not using .mdx files. I'm trying to implement some good pratices to it

import type { StorybookConfig } from '@storybook/react-vite';
import svgLoader from 'vite-svg-loader';
import staticFiles from 'vite-plugin-static';

const config: StorybookConfig = {
stories: ['../src//*.stories.mdx', '../src//.stories.@(js|jsx|ts|tsx)'],
addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
framework: {
name: '@storybook/react-vite',
options: {},
},
core: {
disableTelemetry: true,
enableCrashReports: false,
},
staticDirs: ['../public'],
docs: {
autodocs: true,
},
viteFinal: async (config) => {
if (config.plugins) {
config.plugins.push(
svgLoader({
svgoConfig: {
plugins: [{ name: 'removeViewBox' }],
},
}),
staticFiles({
dir: './public',
exclude: ['.svg'],
}),
);
}

return config;

},
};
module.exports = config;

[earnest hemlock]

I forget which framework I'm commenting on now but also ensure baseHref/baseUrl on your index.html is set so it can find your .ico?

[delicate flax]

This is how my index.html is