Vite related issue

[wobsoriano]

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:

[wobsoriano]

For now the working solution is to import via unpkg

import "https://unpkg.com/@papyrs/[email protected]/dist/stylo/stylo.esm.js";

or

<script type="module" src="https://unpkg.com/@papyrs/[email protected]/dist/stylo/stylo.esm.js"></script>

Had to change stylo@alpha to [email protected] as it's returning 404

[peterpeterparker]

I think import '@papyrs/stylo' won't work with vite. On the contrary, if I reckon correctly, using the custom elements will - should.

import { defineCustomElements } from '@papyrs/stylo/dist/loader';
defineCustomElements();

[wobsoriano]

Same error

I think import '@papyrs/stylo' won't work with vite. On the contrary, if I reckon correctly, using the custom elements will - should.

import { defineCustomElements } from '@papyrs/stylo/dist/loader';
defineCustomElements();

[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]

In a svelteki app I wasn't able to load the component as displayed above. As a workaround, I did as following:

onMount(async () => {
    const {defineCustomElement} = await import(/* @vite-ignore */ '@papyrs/stylo/dist/components/stylo-editor');
    defineCustomElement();
  });

[peterpeterparker]

Another tricks, if you are looking to import plugins, these can be imported as following:

import {h1, h2, h3, ul} from '@papyrs/stylo/dist/stylo/index.esm';

[peterpeterparker]

also could load another component as following:

const {DeckgoDoc} = await import('@deckdeckgo/core/dist/components/deckgo-doc');
    customElements.get('deckgo-doc') || customElements.define('deckgo-doc', DeckgoDoc);
    ```

[peterpeterparker]

in call case I needed @stencil/core as a dependency and super important with the same version because there is a breaking change in v2.9.0 https://github.com/ionic-team/ionic-framework/issues/24153

[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