STORYBOOK_ZEPLIN_TOKEN not parsed correctly causing multiple quotes

When using STORYBOOK_ZEPLIN_TOKEN as env variable, the token is not working ("invalid"), although it is correct. When looking at the network tab (developer tools), one can see that the token is surrounded by " (quotes). If you enter the same token using the UI, it works without a problem (no quotes around token).

The most probably reason is a destructuring of the process.env, which seems to cause the problems.

See https://github.com/mertkahyaoglu/storybook-zeplin/commit/cc4ff8d2ab206d87b66091ed878663ffdbdd13db#diff-8fa4b52909f895e8cda060d2035234e0a42ca2c7d3f8f8de1b35a056537bf199L6

// deleted
export const ZEPLIN_TOKEN = process.env.STORYBOOK_ZEPLIN_TOKEN; // this has worked very well
// token = icGVyc29uYWxfYWNjZXNzX3Rva2

// replaced by
export const {
    STORYBOOK_ZEPLIN_TOKEN: ZEPLIN_TOKEN, // <-- THIS is causing the problem
    STORYBOOK_ZEPLIN_PARENT_ORIGIN: PARENT_ORIGIN = "https://app.zeplin.io",
    STORYBOOK_ZEPLIN_API_URL: ZEPLIN_API_URL = "https://api.zeplin.dev/v1",
    STORYBOOK_ZEPLIN_WEB_BASE: ZEPLIN_WEB_BASE = "https://app.zeplin.io",
    STORYBOOK_ZEPLIN_APP_BASE: ZEPLIN_APP_BASE = "zpl:"
} = process.env;
// token = "icGVyc29uYWxfYWNjZXNzX3Rva2" (quotes!)

When using console.log(process.env), all strings appear like this: '"icGVyc29uYWxfYWNjZXNzX3Rva2"' with double quotes. Destructuring "process.env" is not recommended:

Managing Front-end JavaScript Environment Variables (Robert Cooper)
https://github.com/webpack/webpack/issues/5392

Suggestion

Extract each variable one-by-one.
Create the new object in the next step

✋🏻 I would be willing to provide the fix (PR).

zeplin / storybook-zeplin

STORYBOOK_ZEPLIN_TOKEN not parsed correctly causing multiple quotes #38

Suggestion