search

silinternational / ui-components

Reusable Svelte components for some internal applications: https://silinternational.github.io/ui-components/
MIT License
4 stars 1 forks source link

Warning when trying to integrate into a Sveltekit project #127

Closed longrunningprocess closed 1 year ago

longrunningprocess commented 2 years ago

I'd like to use this library on my Sveltekit project. I've imported the recent version 4. When I start my local sveltekit runtime I get the following warning upon start:

@silintl/ui-components doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.

Once it imported the "TopAppBar" it did render the header in my view but I also received the following issues (probably because of SSR):

document is not defined
ReferenceError: document is not defined
    at loadIcons (/node_modules/@silintl/ui-components/components/mdc/icons/index.js:7:16)
    at /node_modules/@silintl/ui-components/components/mdc/icons/index.js:3:1
    at async instantiateModule (/Users/neowannabe/projects/sil/lsdev/web-languageforge/next-app/node_modules/vite/dist/node/chunks/dep-f9d9421a.js:56177:9)
document is not defined
ReferenceError: document is not defined
    at loadIcons (/node_modules/@silintl/ui-components/components/mdc/icons/index.js:7:16)
    at /node_modules/@silintl/ui-components/components/mdc/icons/index.js:3:1
    at async instantiateModule (/Users/neowannabe/projects/sil/lsdev/web-languageforge/next-app/node_modules/vite/dist/node/chunks/dep-f9d9421a.js:56177:9)

(https://github.com/silinternational/ui-components/blob/develop/components/mdc/icons/index.js#L7) This might be simply resolved by either having manual instructions for consumers to add that line to their index.html, trying globalThis or some Svelte object that would work both client- and server-side... not sure of the best approach without a little trial-and-error.

longrunningprocess commented 2 years ago

The bigger question here is whether you all want to spend the time to make this library usable on projects like the one I'm building...I'm not sure what the cost of that effort might be but the bigger "ask" here is to make this library usable in SvelteKit projects.

hobbitronics commented 2 years ago

This is probably the way forward https://github.com/YogliB/svelte-component-template

hobbitronics commented 2 years ago

While I removed the offending SSR code there are still warnings related to imports. It could be related to this issue where I get "Sourcemap for "...node_modules/@material/.../index.js" points to missing source files" in the Svelte-vite template.

hobbitronics commented 1 year ago

SSR issues are resolved. I've added a Sveltekit section to the Readme. As of material-web-components@13 the Sourcemap warnings are still present. Maybe when I go to 14 they will be resolved. There are also a couple of CJS/ESM import errors initially in dev mode that resolve themselves after a bit which seem related to this https://kit.svelte.dev/faq#packages. Builds work without any errors. I tried renaming .js files to .mjs and while everything works fine in a symlink, when I actually install from git or npm it doesn't fix anything. Hopefully this is at least useful as a reference in getting libraries to work well with Sveltekit. I have learned a lot about SSR and Vite in the process.

longrunningprocess commented 1 year ago

I'm thrilled to hear this! I'll look forward to seeing that README and being able to offer this up to others as a potentially centralized library for us.

hobbitronics commented 1 year ago

I think the reason for the import errors is that vite needs to import from a url and not '@silint/ui-components'. See https://vitejs.dev/guide/features.html#npm-dependency-resolving-and-pre-bundling So you should be able to develop without any errors if you do this. I have only tried it with a svelte project using vite and a Sveltekit template and everything seems to work fine, it just takes a moment to start in dev mode.