Bug: Color-Picker Not Rendering in Vue JS

[joeyHarig]

Actual Behavior

The calcite-color-picker component doesn not render within a Vue application. When attempting to use the color-picker, the following error occurrs:

This error is only persistent in the latest version of the software 1.0.0-beta.81. When reverting to 1.0.0-beta.80, the color-picker component renders fine.

Expected Behavior

The calcite-color-picker should render within Vue apps.

Reproduction Sample

https://github.com/joeyHarig/cc-vue-color-picker-bug

Reproduction Steps

1. Fork the above repo
2. Run npm install
3. Run npm run serve
4. Open up the App.vue file to validate that the calcite-date-picker, calcite-color-picker, and calcite-button are included in the markup.
5. View the application on port http://localhost:8080/
6. Notice that the color picker component doesn't render.
7. Open the dev tools console to view the error message "TypeError: Cannot use 'in' operator to search for '0' in rgb
   at __spreadArray"

Reproduction Version

1.0.0-beta.81

Relevant Info

Browser: Chrome, Firefox
OS: macOS Monterey

Using Stencil within a Vue App: https://stenciljs.com/docs/vue

Regression?

1.0.0-beta.80

[github-actions]

More information is required to proceed with this issue:

• Provide a codepen, codesandbox, or jsbin that reproduces the issue. Alternatively, a documentation sample can be used if the issue is reproducible.

This issue will be automatically closed in five days if the information is not provided. Thanks for your understanding.

[macandcheese]

I'm also seeing this error with CalciteColorPickerHexInput and CalciteColorPickerSwatch locally in React (Gatsby).

It occurs using when using either the vanilla component or the wrapped React version:

[jcfranco]

TL;DR - the reported error is caused by a tslib bug (used by Stencil build) + color lint fix that made it run into the aforementioned bug. See potential fixes near the end.

I looked into this today and here are some findings:

• color fixed some linting errors that switched some code to use the array spread operator.
• tslib updated a helper that breaks ☝️ (TypeError when spreadArray is used on a string containing an emoji/Unicode character microsoft/tslib#175).
• Stencil's build uses ☝️ to generate the esm-es5 output.
• The esm-es5 code is picked up by Vue's webpack build because of the default mainFields.

Solutions

• As a current workaround for Vue (and possibly other environments), the build config can be updated to specify the mainFields to use any of the following esm entry point files ("es2017", "es2015", "jsnext:main"):

  // vue.config.js
  module.exports = {
    chainWebpack: (config) => {
      //...
    
      config.resolve.mainFields
        .merge(["es2017", "browser", "module", "main"]);
    }
  };

  Note: there could be other ways of specifying this, but this is what ended up working for me with the repro case.

• For the tslib bug, I've submitted a PR. If it gets merged, the next step would be to see if we can get the Stencil build to use the latest version.

• We'd have to look into this beforehand, but we could also update our module entry from package.json to point to dist/esm/index.js.

• Worst case scenario, and I'd really like to avoid this, we could revert build(deps): bump color from 4.2.1 to 4.2.3 #4381 and build: remove unnecessary numeric separator plugin #4385 to use a version of color that wouldn't run into this issue.

[jcfranco]

We'd have to look into this beforehand, but we could also update our module entry from package.json to point to dist/esm/index.js.

@benelan Let's sync up on this tomorrow to see if we can make the switch.

[jcfranco]

Ended up patching __spreadArray instead of switching the default module entry to minimize impact to builds using this output.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 1.0.0-next.478