search

storybookjs / vue-cli-plugin-storybook

Vue CLI plugin for Storybook
MIT License
279 stars 44 forks source link

Error: Cannot find module '@storybook/vue3/package.json' #135

Closed tatsumi-paypay closed 1 year ago

tatsumi-paypay commented 1 year ago

Describe the bug

I'm currently in the process of migrating our Vue 2.6 mono-repo app to Vue 3 (currently on vue/compat mode 2). The plan is to migrate each sub-app independently from the other sub-apps. While migrating a single sub-app (the rest are on Vue 2.6), I am getting this error when trying to lint (vue-cli-service lint ./) or build storybook (vue-cli-service storybook:build -c ../.storybook) in our shared-v2 module repo.

ERROR  Error: Cannot find module '@storybook/vue3/package.json'
Require stack:
- /project/path/node_modules/vue-cli-plugin-storybook/lib/index.js
- /project/path/node_modules/@vue/cli-service/lib/Service.js
- /project/path/node_modules/node_modules/@vue/cli-service/bin/vue-cli-service.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
at Module._load (node:internal/modules/cjs/loader:922:27)
at Module.require (node:internal/modules/cjs/loader:1143:19)
at require (node:internal/modules/cjs/helpers:110:18)
at module.exports (/project/path/node_modules/vue-cli-plugin-storybook/lib/index.js:20:37)
at /project/path/node_modules/@vue/cli-service/lib/Service.js:82:9
at Array.forEach (<anonymous>)
at loadedCallback (/project/path/node_modules/@vue/cli-service/lib/Service.js:80:20)
 at Service.init (/project/path/node_modules/@vue/cli-service/lib/Service.js:97:14)
at Service.run (/project/path/node_modules/@vue/cli-service/lib/Service.js:247:16)
at Object.<anonymous> (/project/path/node_modules/@vue/cli-service/bin/vue-cli-service.js:37:9)
at Module._compile (node:internal/modules/cjs/loader:1256:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
 at Module.load (node:internal/modules/cjs/loader:1119:32)
at Module._load (node:internal/modules/cjs/loader:960:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:23:47
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: command finished with error: command (/project/path/shared-v2) yarn run storybook:build exited (1)

Environment

Additional context

.storybook/main.cjs

module.exports = {
  core: {
    builder: 'webpack5',
  },
  stories: ['../(shared|shared-v2|sub-app1|sub-app2)/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-storysource',
  ],
}

our mono-repo structure

- project-root
-- shared
-- shared-v2
-- sub-app1
-- sub-app2
-- sub-app3

shared-v2's package.json

{
  "name": "@root/shared-v2",
  "version": "1",
  "description": "Description",
  "license": "UNLICENSED",
  "author": "Author",
  "type": "module",
  "scripts": {
    "lint": "vue-cli-service lint ./",
    "storybook": "vue-cli-service storybook:serve -p 6006 -c ../.storybook",
    "storybook:build": "vue-cli-service storybook:build -c ../.storybook",
    "test": "vue-cli-service test:unit --runInBand --logHeapUsage",
    "openapi:generate": "node ./scripts/openapiGenerator.cjs",
    "devcert:install": "node ./scripts/devcertInstall.cjs"
  },
  "dependencies": {
    "@gtm-support/vue2-gtm": "^1.2.1",
    "@optimizely/optimizely-sdk": "^4.9.4",
    "@root/shared": "*",
    "@vue/compat": "^3.3.4",
    "@vue/composition-api": "^1.7.2",
    "axios": "^0.21.1",
    "dompurify": "^3.0.5",
    "js-cookie": "^3.0.1",
    "lodash": "^4.17.21",
    "lottie-web": "^5.1.9",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.35",
    "portal-vue": "^2.1.7",
    "semver": "^6.2.0",
    "smoothscroll-polyfill": "^0.4.4",
    "swiper": "^8.3.2",
    "vue": "^3.1.0",
    "vue-content-loader": "^0.2",
    "vue-croppie": "^2.0.2",
    "vue-gtag": "1",
    "vue-i18n": "^8.22.3",
    "vue-i18n-bridge": "^9.2.2",
    "vue-input-facade": "^1.3.2",
    "vue-lazyload": "^1.3.1",
    "vue-router": "3.5.1",
    "vue-virtual-scroller": "^1.0.10",
    "vuex": "3.6.2",
    "vuex-module-decorators": "^1.0.1"
  },
  "devDependencies": {
    "@intlify/vue-i18n-loader": "^1.0.0",
    "@storybook/addon-actions": "6.5.16",
    "@storybook/addon-essentials": "6.5.16",
    "@storybook/addon-links": "6.5.16",
    "@storybook/addon-storysource": "6.5.16",
    "@storybook/builder-webpack5": "^6.5.16",
    "@storybook/core": "6.5.16",
    "@storybook/manager-webpack5": "^6.5.16",
    "@storybook/vue3": "^6.5.16",
    "@types/assert": "^1.5.6",
    "@types/dompurify": "^3.0.2",
    "@types/faker": "^5.5.6",
    "@types/js-cookie": "^3.0.1",
    "@types/lodash": "^4.14.170",
    "@types/semver": "^7.3.9",
    "@vue/cli-plugin-babel": "~5.0.8",
    "@vue/cli-plugin-eslint": "~5.0.8",
    "@vue/cli-plugin-router": "~5.0.8",
    "@vue/cli-plugin-typescript": "~5.0.8",
    "@vue/cli-plugin-unit-jest": "~5.0.8",
    "@vue/cli-plugin-vuex": "~5.0.8",
    "@vue/cli-service": "~5.0.8",
    "@vue/compiler-sfc": "^3.1.0",
    "@vue/eslint-config-prettier": "6.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "@vue/test-utils": "1.1.3",
    "@vue/vue2-jest": "27",
    "babel-jest": "^27.5.1",
    "commander": "^11.0.0",
    "devcert": "^1.2.2",
    "faker": "^5.5.3",
    "html-webpack-plugin": "^4.0.0",
    "http-proxy-middleware": "^2.0.6",
    "jest": "^27.1.0",
    "jest-canvas-mock": "^2.3.1",
    "nock": "^13.1.0",
    "openapi-typescript-codegen": "^0.25.0",
    "sass": "1.32.13",
    "sass-loader": "^10.1.1",
    "ts-jest": "^27.0.4",
    "typescript": "~4.5.5",
    "vue-cli-plugin-storybook": "~2.1.0",
    "webpack-merge": "^5.8.0"
  },
  "resolutions": {
    "@achrinza/node-ipc": "^9.2.5"
  }
}
tatsumi-paypay commented 1 year ago

Updating to "vue-cli-plugin-storybook": "^3.0.0-rc.1" fixed the issue