Cannot import module from jsdelivr

[Dan-Do]

I am doing this in browser

import {html,render,component,key,useUnmount,invalidate,createContext,addContext,useContext} from 'https://cdn.jsdelivr.net/npm/1more/dist/index.min.js';
import {box, read, subscribe, write, useSubscription, usePropSubscription} from 'https://cdn.jsdelivr.net/npm/1more/dist/box.min.js';

Error: Uncaught SyntaxError: import not found: subscribe

[Freak613]

Do you have type="module" when importing your js code in HTML document ? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html

[Dan-Do]

Yes I have

<!--index.html-->
<script src="./main.js" type="module"></script>

It works with moment.js

//main.js
import moment from 'https://cdn.jsdelivr.net/npm/moment/dist/moment.js';

[zarianec]

@Dan-Do you try to import from the file which is not an ES6 module. Files in dist directory are bundled and formatted as UMD modules so they can't be directly used in ES6 imports.

Anyway, the sources of this library are native ES6 modules so they can be used directly. Or you can give a try to a jsDelivr ESM CDN which automatically converts and optimizes any NPM packages to the browser compatible ES6 module.

In that case, your imports should be like that:

import {html,render,component,key,useUnmount,invalidate,createContext,addContext,useContext} from 'https://cdn.jsdelivr.net/npm/1more/+esm';
import {box, read, subscribe, write, useSubscription, usePropSubscription} from 'https://cdn.jsdelivr.net/npm/1more/src/box.js/+esm';

[Freak613]

@zarianec thank you for helpful info. Yes, currently there are only UMD modules bundled. If ESM CDN could help at the moment that's awesome. It was unclear for me initially, since Codesandbox works fine with current setup (i.e. it's possible to locate and load the lib in dependencies), so I've checked and it seems that they are using source code directly, without /dist bundle.

In the meantime, I have to review build setup one more time, probably to create separate output targets for UMD/ESM modules, similar to what popular libs like Vue/MobX have.

[Dan-Do]

@Dan-Do you try to import from the file which is not an ES6 module. Files in dist directory are bundled and formatted as UMD modules so they can't be directly used in ES6 imports.

Anyway, the sources of this library are native ES6 modules so they can be used directly. Or you can give a try to a jsDelivr ESM CDN which automatically converts and optimizes any NPM packages to the browser compatible ES6 module.

In that case, your imports should be like that:

import {html,render,component,key,useUnmount,invalidate,createContext,addContext,useContext} from 'https://cdn.jsdelivr.net/npm/1more/+esm';
import {box, read, subscribe, write, useSubscription, usePropSubscription} from 'https://cdn.jsdelivr.net/npm/1more/src/box.js/+esm';

Thanks @zarianec, it works.

[Freak613]

I will keep this issue open, to report once I review my build configuration.