Unable to connect to Storybook static website

[Gab1988]

Hi Guys

I'm using the config below to connect Zeplin with Storybook

{ "plugins": [ { "name": "@zeplin/cli-connect-react-plugin" }, { "name": "@zeplin/cli-connect-storybook-plugin", "config": { "url": "https://mybranch--xyz.chromatic.com" } } ], "projects": [ "myProjectID" ], "styleguides": [], "components": [ { "path": "MyPathi/src/Components/AppButton/AppButton.js", "zeplinIds": [ "MyZepID" ] } ], "github": { "repository": "repo/path" } }

I have installed all the necessary plugins references in the config , but when I run the command zeplin connect

I get the following error

Obviously Storybook is indeed installed but checking the logs I can see Zeplin is looking for a file that does not exist in my node_modules

• 2021-05-30 14:38:08 - debug - connect options: {"configFiles":[],"devMode":false,"devModePort":9756,"devModeWatch":true,"plugins":[]}
• 2021-05-30 14:38:08 - debug - component config files: [{"plugins":[{"name":"@zeplin/cli-connect-react-plugin"},{"name":"@zeplin/cli-connect-storybook-plugin","config":{"command":"cd ./packages/shared-ui && yarn storybook"}}],"projects":["60b2f9d94a6dfa1550d529df"],"styleguides":[],"components":[{"path":"packages/shared-ui/src/Components/AppButton/AppButton.js","zeplinIds":["60b2f9eadcee6518e5419c47"]}],"github":{"repository":"channelaffairs/tooth-fairy-mono-repo"}}]
• 2021-05-30 14:38:09 - debug - Initializing @zeplin/cli-connect-react-plugin.
• 2021-05-30 14:38:09 - debug - @zeplin/cli-connect-react-plugin has init method. Initializing with undefined
• 2021-05-30 14:38:09 - debug - Initializing @zeplin/cli-connect-storybook-plugin.
• 2021-05-30 14:38:09 - debug - @zeplin/cli-connect-storybook-plugin has init method. Initializing with {"command":"cd ./packages/shared-ui && yarn storybook"}
• 2021-05-30 14:38:09 - debug - Running command: cd ./packages/shared-ui && yarn storybook
• 2021-05-30 14:38:09 - info - Waiting Storybook to start…
• 2021-05-30 14:38:09 - info - Detected Storybook at http://localhost:6006/iframe.html
• 2021-05-30 14:38:09 - info - The following problems were reported from Storybook:
• 2021-05-30 14:38:09 - error - Errors:
• =========================
• Error: Uncaught [Error: Module build failed: Error: ENOENT: no such file or directory, open 'MyPath/node_modules/@storybook/builder-webpack4/node_modules/webpack/buildin/global.js']
• =========================
• 2021-05-30 14:38:09 - warn - This may lead to some stories not working right or getting detected by Zeplin CLI
• We suggest you fix the errors, but we will continue anyway..
• =========================
• 2021-05-30 14:38:09 - debug - Error: Zeplin CLI requires Storybook version at least 3.4. Please update your Storybook!

This is what I see in Storybook node-modules

My environment is :

MacOS VSCode Zeplin CLI - v1.1.11 StoryBook-React - 6.2.6 Monorepo - Yes (Yarn WorkSpaces)

[yuqu]

Hey,

What is shown on the logs seems to be inconsistent with the configuration you shared.

• 2021-05-30 14:38:08 - debug - component config files: [{"plugins":[{"name":"@zeplin/cli-connect-react-plugin"},{"name":"@zeplin/cli-connect-storybook-plugin","config":{"command":"cd ./packages/shared-ui && yarn storybook"}}],"projects":["60b2f9d94a6dfa1550d529df"],"styleguides":[],"components":[{"path":"packages/shared-ui/src/Components/AppButton/AppButton.js","zeplinIds":["60b2f9eadcee6518e5419c47"]}],"github":{"repository":"channelaffairs/tooth-fairy-mono-repo"}}]

{
    "name": "@zeplin/cli-connect-storybook-plugin",
    "config": {
        "command": "cd ./packages/shared-ui && yarn storybook"
    }
}

This means that Zeplin CLI will try to start it up on your local machine (using the command) instead of loading the static Storybook URL. The logs show that Zeplin CLI really executes the above command to start a local Storybook instance. While doing that, a module loading error is reported by Storybook instance (which may or may not be related to the issue you are having), and then the last error line is reported by Zeplin CLI, which shows that what http://localhost:6006/iframe.html contains is not an actual Storybook instance, or at least, it does not contain the Storybook API that Zeplin CLI expects.

What is happening on the above paragraph you should not happen at all if the config file did have a static Storybook URL. Are you sure that .zeplin/components.json contains the static Storybook URL you shared as in the below snippet?

{
    "name": "@zeplin/cli-connect-storybook-plugin",
    "config": {
        "url": "https://mybranch--xyz.chromatic.com"
    }
}

Of course, you can keep using "command": "cd ./packages/shared-ui && yarn storybook". To resolve the issue I would suggest to fix the module loading issue. As I mentioned, this error is actually reported by the whatever was served on http://localhost:6006/iframe.html. Changing directory on the command might be the culprit. To confirm that this command spins up a working local Storybook instance, open your monorepo's root directory and type in the same command cd ./packages/shared-ui && yarn storybook on the terminal. Check if the local Storybook is working on your browser, navigate between stories etc. to confirm. Open browser console and refresh the page, check if any errors is reported like above.

Or maybe the problem is just that the port number is wrong. You might need to set the URL parameter to tell Zeplin CLI the correct port number. Check the below snippet, you can replace <PORT> with the port that Storybook works on.

{
    "name": "@zeplin/cli-connect-storybook-plugin",
    "config": {
        "url": "http://localhost:<PORT>",
        "command": "cd ./packages/shared-ui && yarn storybook"
    }
}