search

3d-dice / dice-box

3D Game Dice for any JavaScript App
https://fantasticdice.games/
MIT License
127 stars 28 forks source link

Make proper ES module #77

Closed sphinxc0re closed 1 year ago

sphinxc0re commented 1 year ago

When working with this package in a SvelteKit application, SvelteKit gives a nice warning at build time:

@3d-dice/dice-box 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.

I would like it if you made either one of the suggested changes so that the package can be easily recognized as an ESM by tools.

Danny-Engelman commented 1 year ago

Would that also make it easier to write a native JS Web Component so a user only ahs to do:
<roll-dice faces="6" value="5"></roll-dice> ?

frankieali commented 1 year ago

It does work as an ES module: https://codesandbox.io/s/dice-es6-module-cdn-lhbs99?file=/src/index.js. I have not tried it in Sveltkit before, but I am familiar with Svelte. I'll try to duplicate this issue when I have time. @Danny-Engelman a web component could be interesting. I've never looked into what it would take to support that.

sphinxc0re commented 1 year ago

To clearify: The package is probably already written in ESM. The thing SvelteKit is complaining about is not using "type": "module" in the package.json.

itlackey commented 1 year ago

I was able to get this to work with sveltekit by modifying the packge.json in node_modules (I know not a great idea) and turning off SSR for the page I need the library on.

I added this to package.json

  "module": "./dist/dice-box.es.js",

Then added a +page.js with:

export const ssr = false;

The package.json change allows the ES module to import correctly. The +page.js works around an error that occurs when the library tries to reference location.origin during SSR. https://github.com/3d-dice/dice-box/blob/759b885544cb11291583ca03220b155187c92937/src/WorldFacade.js#L16

Thank you for putting this library together! I really appreciate your work. I hope this helps make it easier to make it compatible with SvelteKit.

frankieali commented 1 year ago

I started looking into this. I can probably add the "module" definition without issue. Server Side Rendering certainly wouldn't work with the dynamic elements in the canvas. I'm glad you found the ssr = false workaround for that. There are other window references besides the location ref. I was able to get everything working even without the "module" definition. I'm curious what your package.json looks like. SvelteKit Demo