The entry point "vue" cannot be marked as external

[alban-kazandjian]

I cannot setup storybook on a fresh project of nuxt.

Steps to reproduce:

$ npx nuxi@latest init test
$ cd test
$ npx nuxi@latest module add storybook

 WARN  It seems that nuxt-storybook is not a Nuxt module
 
❯ Do you want to continue installing `nuxt-storybook` anyway?
● Yes / ○ No

Choose Yes

Edit package.json and nuxt.config.ts and replace nuxt-storybook with @nuxtjs/storybook at version 8.1.1
then run:

$ npm install
$ npm run dev

Then this error appears:
✘ [ERROR] The entry point "vue" cannot be marked as external

Here is my nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: ["@nuxtjs/storybook"],
  storybook: {
    url: "http://localhost:6006",
    storybookRoute: "/__storybook__",
    port: 6006,
  },
});

and package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "storybook": "storybook dev --port 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "nuxt": "^3.12.2",
    "vue": "^3.4.29",
    "vue-router": "^4.3.3"
  },
  "devDependencies": {
    "storybook": "8.0.8",
    "@types/node": "^18.17.5",
    "@storybook/vue3": "8.0.8",
    "@storybook-vue/nuxt": "0.2.6",
    "@nuxtjs/storybook": "^8.1.1",
    "@storybook/addon-links": "8.0.8",
    "@storybook/builder-vite": "8.0.8",
    "@storybook/addon-essentials": "8.0.8",
    "@storybook/addon-interactions": "8.0.8",
    "@storybook/test": "8.0.8",
    "@storybook/blocks": "8.0.8"
  }
}

and storybook is unfortunately not running.

[soulrpg]

+1 experienced the same thing, i think it's caused by some change in recent version as with older package-lock.json in my project it worked for me

[ilyaivantsov]

Doesn't it feel like something is off with npm downloads? It seems like instead of @nuxtjs/storybook, it installs nuxt-storybook.

[blowsie]

Duplicates
#656

[tobiasdiez]

Please make sure that you have @storybook-vue/nuxt: 0.2.8 in your lock file. This should be actually fixed as @blowsie rightly points out.

[alban-kazandjian]

Thanks @tobiasdiez , the "vue cannot be marked as external" error disappears once updating @storybook-vue/nuxt to 0.2.8.

However after opening storybook in the browser http://localhost:6006/

I get this error:

✘ [ERROR] Could not resolve "#app/entry"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:7:31:
      7 │   const nuxtApp = () => import('#app/entry').then((m) => m.default);
        ╵                                ~~~~~~~~~~~~

  You can mark the path "#app/entry" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle. You can also add ".catch()" here to handle this failure at run-time instead of bundle-time.


 ERROR  error while updating dependencies:
Error: Build failed with 1 error:
node_modules/@storybook-vue/nuxt/dist/preview.mjs:7:31: ERROR: Could not resolve "#app/entry"
    at failureErrorWithLog (/home/xxxx/Documents/Code/xxxx/test/node_modules/esbuild/lib/main.js:1472:15)
    at /home/xxxx/Documents/Code/xxxx/test/node_modules/esbuild/lib/main.js:945:25
    at /home/xxxx/Documents/Code/xxxx/test/node_modules/esbuild/lib/main.js:1353:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

I tried downgrading nuxt to 3.11.2, and it's the same. Let me know if you want me to open another ticket for this issue.

[tobiasdiez]

Is that while running the nuxt dev server or only the storybook dev server (storybook dev)?

[AveryBibeau]

I was able to reproduce this with a fresh Nuxt 3 project (npx nuxi@latest init, 3.12.2). I installed @nuxtjs/storybook since npx nuxi@latest module add storybook appeared to be broken.

Starting the nuxt dev server created the base .storybook directory and installed other required packages. I manually updated @storybook-vue/nuxt to 0.2.8 to fix this issue's original error. Both the nuxt dev server and storybook dev return the Could not resolve "#app/entry" error when opening Storybook in the browser.

Running storybook build does not produce any errors and I can serve the generated folder without issue.

[FlorientPlouvin]

I just tested on my side and same error as @AveryBibeau
The problem is that after the storybook build I run into a lot of ';' expected. in /app/storybook-static/logs/vite-nuxt.config.js like this :

ERROR(vue-tsc)  ';' expected.
 FILE  /app/storybook-static/logs/vite-storybook.config.js:50:12
    48 |     }
    49 |   ],
  > 50 |   "resolve": {
       |            ^
    51 |     "alias": {
    52 |       "assert": "/app/node_modules/browser-assert/lib/assert.js",
    53 |       "vue": "vue/dist/vue.esm-bundler.js"
 ERROR(vue-tsc)  ';' expected.
 FILE  /app/storybook-static/logs/vite-storybook.config.js:51:12
    49 |   ],
    50 |   "resolve": {
  > 51 |     "alias": {
       |            ^
    52 |       "assert": "/app/node_modules/browser-assert/lib/assert.js",
    53 |       "vue": "vue/dist/vue.esm-bundler.js"
    54 |     }

And even after that, if I try again to do a yarn run storybook I always get the error

ℹ page reload storybook-static/index.html                                                                                                                                                                                                             11:37:38 AM
✘ [ERROR] Could not resolve "#app/entry"

    node_modules/@storybook-vue/nuxt/dist/preview.mjs:7:31:
      7 │   const nuxtApp = () => import('#app/entry').then((m) => m.default);
        ╵                                ~~~~~~~~~~~~

  You can mark the path "#app/entry" as external to exclude it from the bundle, which will remove
  this error and leave the unresolved path in the bundle. You can also add ".catch()" here to handle
  this failure at run-time instead of bundle-time.

[tobiasdiez]

The #app/entry issue is fixed by #619, and the one related to the vite config files by #663.

[dentropy]

This still seems to be an issue