zeplin / storybook-zeplin

Storybook addon to view Zeplin resources in story panel
https://storybook-zeplin.netlify.app
MIT License
115 stars 16 forks source link

After installing add on, error appears when starting storybook #74

Closed fdmmarshall closed 1 year ago

fdmmarshall commented 1 year ago

Hello, I am having trouble with the zeplin addon, I installed using the following command npm install --save-dev storybook-zeplin, then added it to the addons array, but when I run npm run storybook in my react application I get the following error:

✘ [ERROR] Could not resolve "vue/dist/vue"

    ../../node_modules/@zeplin/storybook-inspector/dist/index.js:1:20422:
      1 │ ...eact-element-to-jsx-string")},921:e=>{e.exports=require("vue/dist/vue")}},t={};return function n(o){var r=t[o];if(void 0!==r)...
        ╵                                                            ~~~~~~~~~~~~~~

  The module "./dist/vue" was not found on the file system:

    ../../node_modules/vue/package.json:32:16:
      32 │     "./dist/*": "./dist/*",
         ╵                 ~~~~~~~~~~

  Import from "vue/dist/vue.js" to get the file "../../node_modules/vue/dist/vue.js":

    ../../node_modules/@zeplin/storybook-inspector/dist/index.js:1:20435:
      1 │ ...lement-to-jsx-string")},921:e=>{e.exports=require("vue/dist/vue")}},t={};return function n(o){var r=t[o];if(void 0!==r)return...
        │                                                                   ^
        ╵                                                                   .js

  You can mark the path "vue/dist/vue" as external to exclude it from the bundle, which will remove
  this error. You can also surround this "require" call with a try/catch block to handle this
  failure at run-time instead of bundle-time.

I am not sure how to resolve this error, please advise. Thanks!

Luk-z commented 1 year ago

Same problem here using react. It seems zeplin storybook-inspector imports vue also if we are on react. For example vue is imported when using getFilePath function.

Removing "vue require"

921:e=>{e.exports=require("vue/dist/vue")}

from dist bundle node_modules/.pnpm/@zeplin+storybook-inspector@0.1.3_react-dom@18.2.0/node_modules/@zeplin/storybook-inspector/dist/index.js let storybook starts without errors.

Luk-z commented 1 year ago

@yuqu that pr should resolve https://github.com/zeplin/storybook-inspector/pull/12

Luk-z commented 1 year ago

I'm facing this issue only with storybook v7.

@fdmmarshall can you specify your environment setup please?

fdmmarshall commented 1 year ago

@Luk-z yes, the version of storybook I am using is 7 as well.

FLEdev commented 1 year ago

Also looking forward to fix this issue. I've got also the mentioned error and an another message telling about missing react and react-dom. I am using SB v7 with HTML Profile. Therefor this option seems to be the most relevant to test out the strict necessary dependencies.

n2o commented 1 year ago

Same problem here with Storybook 7. Would be great to have this feature :-)