build-storybook: Failed to resolve module specifier "vue"

[peteromano]

This case is for adding production SB build to Nuxt production build as a subroute (mydomain.com/storybook).

NOTE: In previous attempts to integrate Nuxt w/ SB, I've had this working (using unplugin- method and storybook-nuxt-addon method.)

After building for production, I'm getting this error at runtime (build is successful):

TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

Seems to be just a relative path issue maybe.

Build command: pnpm build-storybook -o public/storybook --disable-telemetry && nuxt build

Here's relevant config:

  framework: {
    name: "@storybook-vue/nuxt",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  managerHead: (head, { configType }) => {
    if (configType === 'PRODUCTION') {
      return (`
        ${head}
        <base href="/storybook/">
      `)
    }
  },
  async viteFinal(baseConfig, { configType }) {
    return mergeConfig(
      {
        ...(configType === 'PRODUCTION' ? { base: '/storybook/' } : {}),
      },
      baseConfig
    )
  }

Btw, another issue: the SB build hangs and never actually gets to && nuxt build.. Likely, because nothing closes the vite/nuxt severs after build, so process never ends?

[chakAs3]

hi @peteromano please try to use the latest version

[peteromano]

@chakAs3 will try as soon as i can, thanks! BTW, is there a discord we can join to collab?

[peteromano]

Ok, the versioning was confusing.. I was 0.0.1-rc.29, now on -beta.21, which solves alot of my issues, however, this issue is still happening

My command (i have to run nuxt build after SB, so it adds public/storybook to .output):

"build": "pnpm build-storybook -o public/storybook --disable-telemetry && nuxt build",

[th1nkgr33n]

This week, we switch to this plugin for better plugin support (e.g. i18n) and this finally worked well. But today we actually build the storybook via (local, chromatic and netlify) and all places raise the same error like above.

We are running on the latest version: "@storybook-nuxt/framework": "0.0.2-beta.4",

as well since your MR in the @storybook/vue3 was merged today, I switch to those versions as well: "@storybook/vue3": "7.4.0-alpha.1", "@storybook/vue3-vite": "7.4.0-alpha.1",

@chakAs3 have you some ideas what could cause this error?

The error in the console is:

Error reading preview.js:
TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

The actual storybook build command runs well, but if you open the static version the error appears. Running the dev version of storybook everything works fine.

    "sb": "storybook dev -p 6006",
    "build:sb": "storybook build",

// .storybook/main.ts
import type { StorybookConfig } from "@storybook-nuxt/framework"

const config: StorybookConfig = {
  core: {
    disableTelemetry: true,
  },
  stories: [
    '**/*.mdx',
    '../**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-styling',
  ],
  framework: {
    name: "@storybook-nuxt/framework",
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
}
export default config

// .storybook/preview.ts
import '../assets/css/tailwind.css'
import type { Decorator, Preview } from '@storybook-nuxt/framework'

const splitView: Decorator = (story, { globals }) => {
  return {
    template: `
        <div  class='p-4' >
          <story />
        </div>
    `,
  }
}

const preview: Preview = {
  decorators: [splitView],
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
}

export default preview

[chakAs3]

Hi @th1nkgr33n please use the latest version of @storybook-vue/nuxt. it will be ok

refactor your code

// .storybook/main.ts
import type { StorybookConfig } from "@storybook-vue/nuxt"

const config: StorybookConfig = {
  core: {
    disableTelemetry: true,
  },
  stories: [
    '**/*.mdx',
    '../**/*.stories.@(js|jsx|mjs|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-styling',
  ],
  framework: {
    name: "@storybook-vue/nuxt",
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
}
export default config

// .storybook/preview.ts
import '../assets/css/tailwind.css'
import type { Decorator, Preview } from '@storybook/vue3'

const splitView: Decorator = (story, { globals }) => {
  return {
    template: `
        <div  class='p-4' >
          <story />
        </div>
    `,
  }
}

const preview: Preview = {
  decorators: [splitView],
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
}

export default preview

[chakAs3]

@chakAs3 will try as soon as i can, thanks! BTW, is there a discord we can join to collab?

you can find me on Storybook Discord. chak-As3

[th1nkgr33n]

@chakAs3 thanks for the response. I switched to the other package "@storybook-vue/nuxt": "0.0.1-beta.22" as you mentioned and adapt the config files. But still got the same error.

Do you need further information to investigate?

By the way.. whats the difference between "@storybook-vue/nuxt" and "@storybook-nuxt/framework". Both namespaces link to the same repo.

[chakAs3]

By the way.. whats the difference between "@storybook-vue/nuxt" and "@storybook-nuxt/framework".

yes exactly i'm just trying name spaces not sure with what i will go .

I switched to the other package "@storybook-vue/nuxt": "0.0.1-beta.22"

i released 0.0.3. yesterday

you can try cli as well npx storybook-nuxt init

[th1nkgr33n]

Ah I haven't seen the 0.0.3 release tag in GitHub thats why I thought the beta.22 was latest. I'm not familiar with the process of distributing npm packages under namespaces. THanks.

Unfortunately with 0.0.3 it didn't work as well. (Cleared node_modules and cache)

[chakAs3]

@th1nkgr33n can share your repo it should work, i ll take a look

[peteromano]

@chakAs3 FYI, this is still an issue -- would be FANTASTIC to get this working :)

[chakAs3]

@chakAs3 FYI, this is still an issue -- would be FANTASTIC to get this working :)

Yeah @peteromano i will Fantastic for many Nuxt devs, i'm finalizing the module this weekend and this Monday i will give live demo in Storybook Discord Channel, if you are interested. it will be great to get your feedback there, and set a roadmap

[simkuns]

• One way to solve this is to create a file: ./.storybook/preview-head.html

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

---

• Another way is to remove "vue" and "vue-demi" from build.rollupOptions.external, so they get bundled into production build: (https://github.com/vitejs/vite/discussions/13536) https://github.com/storybook-vue/storybook-nuxt/blob/7c23918dec333f3f05a54798f3e993374872f35f/packages/storybook-nuxt/src/preset.ts#L138

---

• Or by applying a patch which does the previously mentioned:

npx patch-package

./patches/@storybook-vue+nuxt+0.1.0-rc.10.patch

diff --git a/node_modules/@storybook-vue/nuxt/dist/preset.cjs b/node_modules/@storybook-vue/nuxt/dist/preset.cjs
index 6592cf7..1b09b0d 100644
--- a/node_modules/@storybook-vue/nuxt/dist/preset.cjs
+++ b/node_modules/@storybook-vue/nuxt/dist/preset.cjs
@@ -96,7 +96,7 @@ const viteFinal = async (config, options) => {
   };
   const nuxtConfig = await defineNuxtConfig(await getStorybookViteConfig(config, options));
   return vite.mergeConfig(nuxtConfig.viteConfig, {
-    build: { rollupOptions: { external: ["vue", "vue-demi"] } },
+    build: { rollupOptions: { external: [] } },
     define: {
       __NUXT__: JSON.stringify({ config: nuxtConfig.nuxt.options.runtimeConfig })
     },
diff --git a/node_modules/@storybook-vue/nuxt/dist/preset.mjs b/node_modules/@storybook-vue/nuxt/dist/preset.mjs
index ba6f7c3..a72b9ae 100644
--- a/node_modules/@storybook-vue/nuxt/dist/preset.mjs
+++ b/node_modules/@storybook-vue/nuxt/dist/preset.mjs
@@ -94,7 +94,7 @@ const viteFinal = async (config, options) => {
   };
   const nuxtConfig = await defineNuxtConfig(await getStorybookViteConfig(config, options));
   return mergeConfig(nuxtConfig.viteConfig, {
-    build: { rollupOptions: { external: ["vue", "vue-demi"] } },
+    build: { rollupOptions: { external: [] } },
     define: {
       __NUXT__: JSON.stringify({ config: nuxtConfig.nuxt.options.runtimeConfig })
     },

[peteromano]

@simkuns will try this ASAP.

The latter 2 solutions you mention should come from this repo, though, right? (or I guess I could add solution 2 to sb main vite config)

THANK YOU very much for the help on this!

[simkuns]

@peteromano Yes, the latter 2 solutions mentioned should come from this repo.

You can try upgrading to @storybook-vue/[email protected] which contains mentioned code changes.

[chakAs3]

there is new release 0.1.3