Include https://www.npmjs.com/package/@solid-data-modules/contacts-rdflib without a build process

[michielbdejong]

I'm working through https://dev.to/sait/js-modules-are-now-supporting-in-browsers-13fn to see if I can include this dependency in the same way you would add jQuery etc to your app, so by just adding a script tag, without having to add a build process.

[michielbdejong]

It worked a little bit and using a serve.json file to control how npx serve behaves helped, but then I ran into:

Uncaught TypeError: Failed to resolve module specifier "@solid-data-modules/contacts-rdflib". Relative references must start with either "/", "./", or "../".

I was able to work around this by using the full path to node_modules here:

sample-solid-app/list-address-books.mjs

Lines 1 to 2 in c162dce

	import ContactsModuleRdfLib from './node_modules/@solid-data-modules/contacts-rdflib/dist/index.js';
	import {Fetcher, graph, UpdateManager} from "./node_modules/rdflib/dist/rdflib.min.js";

But then still I see this error, I guess this is obviously because deeper down it does use node_modules dependencies:

Uncaught TypeError: Failed to resolve module specifier "rdflib". Relative references must start with either "/", "./", or "../".

[michielbdejong]

So my conclusion is that this is probably not possible, and what we need is a webpack build of the contacts data module for me to use it in the same way people used to include jQuery in their html page back in the day. :)

[angelo-v]

I think what you are looking for is an esm import map, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap

Keep in mind that the data module only has rdflib as a peer dependency so you need to install and map that as well

[michielbdejong]

That worked a little bit! I had to install the short-unique-id package though, and use the esm/index.js of rdflib instead of the rdflib.min.js.

It now complains that:

Uncaught TypeError: Failed to resolve module specifier "@babel/runtime/helpers/createClass". Relative references must start with either "/", "./", or "../".

I'm going to stop here and just use a built app but it was nice to learn a bit about this!

[michielbdejong]

I'm working around it for now - will leave this sample app as it is and use something else (which does have a build step) to work with data modules.