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

peteromano · 2023-08-12T15:35:31Z

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?

The text was updated successfully, but these errors were encountered:

chakAs3 · 2023-08-14T16:58:56Z

hi @peteromano please try to use the latest version

peteromano · 2023-08-16T13:52:51Z

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

peteromano · 2023-08-16T15:05:35Z

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 · 2023-08-23T15:24:54Z

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 · 2023-08-23T16:43:08Z

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 · 2023-08-23T16:52:10Z

@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 · 2023-08-24T10:05:35Z

@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 · 2023-08-24T11:48:23Z

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 · 2023-08-24T12:55:50Z

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 · 2023-08-27T19:43:41Z

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

peteromano · 2023-09-02T17:44:34Z

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

chakAs3 · 2023-09-02T23:35:03Z

@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 · 2023-09-18T22:33:25Z

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: (Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../". site: vitejs/vite#13536)

storybook-nuxt/packages/storybook-nuxt/src/preset.ts

Line 138 in 7c23918

build: { rollupOptions: { external: ['vue', 'vue-demi'] } },

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 · 2023-09-21T17:47:15Z

@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 · 2023-09-21T21:07:14Z

@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 · 2023-09-28T04:33:40Z

there is new release 0.1.3

chakAs3 self-assigned this Aug 14, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

peteromano commented Aug 12, 2023 •

edited

Loading

chakAs3 commented Aug 14, 2023

peteromano commented Aug 16, 2023

peteromano commented Aug 16, 2023 •

edited

Loading

th1nkgr33n commented Aug 23, 2023 •

edited

Loading

chakAs3 commented Aug 23, 2023 •

edited

Loading

chakAs3 commented Aug 23, 2023

th1nkgr33n commented Aug 24, 2023

chakAs3 commented Aug 24, 2023 •

edited

Loading

th1nkgr33n commented Aug 24, 2023

chakAs3 commented Aug 27, 2023

peteromano commented Sep 2, 2023 •

edited

Loading

chakAs3 commented Sep 2, 2023

simkuns commented Sep 18, 2023 •

edited

Loading

peteromano commented Sep 21, 2023

simkuns commented Sep 21, 2023 •

edited

Loading

chakAs3 commented Sep 28, 2023

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

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

Comments

peteromano commented Aug 12, 2023 • edited Loading

chakAs3 commented Aug 14, 2023

peteromano commented Aug 16, 2023

peteromano commented Aug 16, 2023 • edited Loading

th1nkgr33n commented Aug 23, 2023 • edited Loading

chakAs3 commented Aug 23, 2023 • edited Loading

chakAs3 commented Aug 23, 2023

th1nkgr33n commented Aug 24, 2023

chakAs3 commented Aug 24, 2023 • edited Loading

th1nkgr33n commented Aug 24, 2023

chakAs3 commented Aug 27, 2023

peteromano commented Sep 2, 2023 • edited Loading

chakAs3 commented Sep 2, 2023

simkuns commented Sep 18, 2023 • edited Loading

peteromano commented Sep 21, 2023

simkuns commented Sep 21, 2023 • edited Loading

chakAs3 commented Sep 28, 2023

peteromano commented Aug 12, 2023 •

edited

Loading

peteromano commented Aug 16, 2023 •

edited

Loading

th1nkgr33n commented Aug 23, 2023 •

edited

Loading

chakAs3 commented Aug 23, 2023 •

edited

Loading

chakAs3 commented Aug 24, 2023 •

edited

Loading

peteromano commented Sep 2, 2023 •

edited

Loading

simkuns commented Sep 18, 2023 •

edited

Loading

simkuns commented Sep 21, 2023 •

edited

Loading