connected-components-docs icon indicating copy to clipboard operation
connected-components-docs copied to clipboard

"Could not find plugin [component-name] failed." when running zeplin connect

Open steffchep opened this issue 5 years ago • 5 comments

Following the readmes, I installed the following globally (npm install -g) and added them to the plugins in components.json

  • zeplin-cli-connect-plugin-vue
  • @zeplin/cli-connect-storybook-plugin
Zeplin CLI - v1.0.4

Connecting components to Zeplin components failed.

    Could not find plugin zeplin-cli-connect-plugin-vue failed.
    Please make sure that it's globally installed and try again.
        npm install -g zeplin-cli-connect-plugin-vue

(same for the other plugin)

this is my components.json

{
  "plugins": [{
      "name": "zeplin-cli-connect-plugin-vue"
    },
    {
      "name": "@zeplin/cli-connect-storybook-plugin",
      "config": {
        "url": "http://localhost:9009",
        "startScript": "storybook"
      }
    }
  ],
  "projects": ["actual id"],
  "styleguides": ["actual id"],
  "components": [{
    "path": "src/components/Test.vue",
    "zeplinNames": ["Test"]
  }]
}

The two plugins are definitely in my global node_modules

What am I doing wrong? (Running from Windows 10 command line, global npm registry is in the path)

steffchep avatar Aug 10 '20 13:08 steffchep

Addition: when running without any plugins, zeplin connect runs and tells me it successfully connected my components, but it does not seem to actually do anything. I don't see them in my styleguide or project

steffchep avatar Aug 11 '20 06:08 steffchep

Hi, I couldn't reproduce the issue on a Windows 10 setup. Is @zeplin/cli also installed to global? Things under the hood is simply calling require() to load the plugin. Global setup is recommended on the documentation because we wanted to keep the process more or less for all frameworks(swift, kotlin etc.). I would suggest you to try to install all packages as a dev dependency on your project and run it via npm run.

when running without any plugins, zeplin connect runs and tells me it successfully connected my components, but it does not seem to actually do anything

It is intended but I think CLI should have been more verbose about the results. We have plans to improve the output.

yuqu avatar Aug 13 '20 22:08 yuqu

Yes, everything is installed globally! So, you mean install everything including the cli as a dev-dependency?

steffchep avatar Aug 14 '20 10:08 steffchep

Does not seem to make a difference, I get the same error if I install them as dev dependencies

Here is the log output ( ****** inserted for ids)

2020-08-14 13:36:28 - info - Zeplin CLI - v1.0.4 2020-08-14 13:36:28 - debug - connect options: {"configFiles":[".zeplin/components.json"],"devMode":false,"devModePort":9756,"devModeWatch":true,"plugins":[]} 2020-08-14 13:36:28 - debug - .zeplin/components.json content: {"plugins":[{"name":"zeplin-cli-connect-plugin-vue"},{"name":"@zeplin/cli-connect-storybook-plugin","config":{"url":"http://localhost:9009","startScript":"storybook"}}],"projects":["*****"],"styleguides":["*****"],"components":[{"path":"../src/components/Test.vue","zeplinNames":["Test"]}]} 2020-08-14 13:36:28 - debug - component config files: [{"plugins":[{"name":"zeplin-cli-connect-plugin-vue"},{"name":"@zeplin/cli-connect-storybook-plugin","config":{"url":"http://localhost:9009","startScript":"storybook"}}],"projects":["*****"],"styleguides":["*****"],"components":[{"path":"../src/components/Test.vue","zeplinNames":["Test"]}]}] 2020-08-14 13:36:28 - error - Connecting components to Zeplin components failed. Could not find plugin zeplin-cli-connect-plugin-vue failed. Please make sure that it's globally installed and try again. npm install -g zeplin-cli-connect-plugin-vue 2020-08-14 13:36:28 - debug - Error: Cannot find module 'zeplin-cli-connect-plugin-vue'Require stack:- d:\NPM\node_modules\node_modules\@zeplin\cli\dist\src\commands\connect\plugin.js- d:\NPM\node_modules\node_modules\@zeplin\cli\dist\src\commands\connect\index.js- d:\NPM\node_modules\node_modules\@zeplin\cli\dist\src\app.js at Function.Module._resolveFilename (internal/modules/cjs/loader.js:1029:15) at Function.Module._load (internal/modules/cjs/loader.js:898:27) at Module.require (internal/modules/cjs/loader.js:1089:19) at require (internal/modules/cjs/helpers.js:73:18) at d:\NPM\node_modules\node_modules\@zeplin\cli\dist\src\commands\connect\plugin.js:50:65 2020-08-14 13:36:28 - info - Please check C:\Users\*****\.zeplin\cli.log for details.

steffchep avatar Aug 14 '20 11:08 steffchep

One thing got my attention is that the logs shows @zeplin/cli is installed in d:\NPM\node_modules\node_modules\@zeplin\cli. Do you still try to invoke zeplin connect after installing as a dev dependency? If so, our CLI tool does not allow you to use local installation if you invoke it from the global installation (which is the zeplin in your PATH) (And hopefully we'll add it since it is not much of a thing). If not, it is strange that the CLI is still invoked from the global node_modules.

Could you try out the following steps?

  • Remove all global and local installations
  • Install @zeplin/cli and the plugins as a dev dependency npm install --save-dev @zeplin/cli
  • Add a script into your package.json
{
    ...
    "scripts": {
        ...
        "zeplin": "zeplin"
        ...     
    }
    ...
}
  • And then try to invoke the following npm run zeplin connect

yuqu avatar Sep 02 '20 13:09 yuqu