Cannot import icons from public folder

[Tazi0]

Summary

I have a React project with custom icons which I want to display in storybook as Iconography.mdx but when i use

import * as icons from '/assets/icons';

it returns

Module not found: Error: Can't resolve '/assets/icons' in '/Users/tazio/Documents/Personal/prj-frontend/src/stories'

Which makes sense but when i try

import * as icons from '../../public/assets/icons';

it still returns

Module not found: Error: Can't resolve '../../public/assets/icons' in '/Users/tazio/Documents/Personal/prj-frontend/src/stories'

Does anyone have a solution for this?

Additional information

main.ts

import type { StorybookConfig } from '@storybook/nextjs';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/nextjs',
    options: {},
  },
  docs: {},
  staticDirs: ['../public'],
  features: {
    backgroundsStoryGlobals: true,
  },
};
export default config;

Create a reproduction

No response

[clyxudev]

staticDirs: ['../public'] makes the files available to the browser, but it does not make the public folder importable as a JavaScript module.

So this will not work:

import * as icons from '/assets/icons'

A public/static file should be referenced by URL instead, for example:

<img src="/assets/icons/my-icon.svg" alt="My icon" />

If you need to iterate over all icons in MDX/React, move the icons into source code, for example src/assets/icons, then let the bundler import them:

const icons = import.meta.glob('../assets/icons/*.svg', {
  eager: true,
  query: '?url',
  import: 'default',
})

Or map the directory explicitly with Storybook:

staticDirs: [{ from: '../public/assets/icons', to: '/assets/icons' }]

and still reference them as URLs like /assets/icons/name.svg.

In short: use public/staticDirs for URL-served assets, use src assets when you need import/glob/module behavior.