[Bug]: Unable to use import map to reference code in Storybook

[unional]

Describe the bug

I have a project dedicated to Storybook configuration and tools.

Naturally, I want to dogfood the project.
Using project name reference work only if the project is built.
I want to reduce the friction by using import map:

// package.json
{
  "@hello/sb",
  "imports": {
    "#hello/sb/main": "./src/main/index.ts",
    "#hello/sb/manager": "./src/manager/index.ts"
  }
}

// .storybook/main.ts
import config from "#hello/sb/main"
...

// .storybook/manager.ts
import { tagBadges } from "#hello/sb/manager"
import { addons } from "@storybook/manager-api"

addons.setConfig({ tagBadges })

But this doesn't work because my code is in ESM with verbatimModuleSyntax.
i.e. with the ugly .js file extension:

// src/main/index.ts
import { config } from './config.js'

Storybook fails with:

@storybook/core v8.5.8

SB_CORE-SERVER_0007 (MainFileEvaluationError): Storybook couldn't evaluate your .storybook/main.ts file.

Original error:
Error: Cannot find module './config.js'
Require stack:
- /src/main/index.ts
- /.storybook/main.ts

Reproduction link

https://stackblitz.com/edit/github-kk2ewh2q?file=.storybook%2Fmain.ts

Reproduction steps

The stackblitz link has error on the #proj import, but I think that's some different issue.

System

Storybook Environment Info:

  System:
    OS: macOS 15.3.1
    CPU: (10) arm64 Apple M1 Pro
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 22.9.0 - ~/.local/state/fnm_multishells/4679_1741321687825/bin/node
    npm: 10.8.3 - ~/.local/state/fnm_multishells/4679_1741321687825/bin/npm
    pnpm: 10.6.1 - ~/.nvm/versions/node/v20.12.2/bin/pnpm <----- active
  Browsers:
    Chrome: 133.0.6943.143
    Safari: 18.3
  npmPackages:
    @storybook/addon-a11y: 8.5.8 => 8.5.8 
    @storybook/blocks: 8.5.8 => 8.5.8 
    @storybook/csf: 0.1.12 => 0.1.12 
    @storybook/manager-api: 8.5.8 => 8.5.8 
    @storybook/react: 8.5.8 => 8.5.8 
    @storybook/react-vite: 8.5.8 => 8.5.8 
    @storybook/test: 8.5.8 => 8.5.8 
    @storybook/theming: 8.5.8 => 8.5.8 
    storybook: 8.5.8 => 8.5.8 
    storybook-addon-test-codegen: ^1.0.3 => 1.0.3 
    storybook-addon-vis: ^0.18.8 => 0.18.8

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
This appears to be related to how Storybook handles ESM imports and import maps. To resolve: 1. Modify the builder config in .storybook/main.ts to explicitly enable import maps: ts export default { framework: '@storybook/react-vite', core: { builder: { name: '@storybook/builder-vite', options: { experimental: { importMap: true } } } } } 2. The import map needs to be configured in a separate importmap.json file rather than package.json: json { "imports": { "#hello/sb/main": "./src/main/index.ts", "#hello/sb/manager": "./src/manager/index.ts" } } 3. Reference this file in your Vite config: ts import { defineConfig } from 'vite' export default defineConfig({ optimizeDeps: { include: ['#hello/sb/main', '#hello/sb/manager'] } })

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile