Vite related issue

Reproduction

Steps to reproduce the issue:

1. Create any vite app
2. Install and import library import '@papyrs/stylo'

Error in terminal:

381|  var ce = (e2) => {
382|    const t2 = e2.h.replace(/-/g, "_"), n2 = e2.q, l2 = ie.get(n2);
383|    return l2 ? l2[t2] : import(`./${n2}.entry.js`).then((e3) => (ie.set(n2, e3), e3[t2]), oe);
   |                                ^
384|  };
385|  var re = /* @__PURE__ */ new Map();
The above dynamic import cannot be analyzed by vite.
See https://github.com/rollup/plugins/tree/master/packages/dynamic-import-vars#limitations for supported dynamic import formats.
If this is intended to be left as-is, you can use the /* @vite-ignore */ comment inside the import() call to suppress this warning.

  Plugin: vite:import-analysis
  File: /test-project/node_modules/.vite/@papyrs_stylo.js?v=ac2d9e89

Error in browser console:

[peterpeterparker]

I needed a coffee, I think it works as following:

import { defineCustomElements } from '@papyrs/stylo/dist/components/stylo-editor';
defineCustomElements();

However doing so it won’t work without installing in addition @stencil/core as a dependency.

There are several issues open at Ionic and Stencil about it. Until these are solved there is no cleaner way to import it in vite projects I think.

https://github.com/ionic-team/ionic-framework/issues/23823

https://github.com/ionic-team/stencil/issues/2826

https://github.com/ionic-team/stencil/pull/2959

[peterpeterparker]

This has been solved thanks to an improvement in StencilJS and released in v0.0.38

See https://github.com/papyrs/stylo/releases/tag/v0.0.38