Compatibility with Rails Importmaps

[cbmike]

Question
First, thank you for maintaining the tus-js-client library.

I am currently working on a Rails 7 application that utilizes Importmaps for managing JavaScript dependencies. I attempted to install tus-js-client using the Importmaps feature with the command ./bin/importmap pin tus-js-client, but it seems that the library isn't compatible with this setup out of the box.

My Questions:

Are there any plans to provide an ES module version of tus-js-client that can be directly used with Importmaps in Rails?
Are there any recommended workarounds or configurations that would allow tus-js-client to be used with Importmaps without resorting to a full bundler setup like Webpack or Rollup?
Is there a specific version or CDN that offers an ES module compatible build?
Context:

Rails Version: 7.1.3
Importmaps: Using for JavaScript dependency management
Current Workaround: Considering direct script inclusion via a <script> tag, but would prefer a more modular approach if possible.
Any guidance or suggestions you could provide would be greatly appreciated. Thank you for your time and assistance.

[Acconut]

Current releases of tus-js-client are dual-published and include a CommonJS and ESM variant:

tus-js-client/package.json

Line 6 in ca63ba2

"module": "lib.esm/node/index.js",

So we ship a ESM variant, but since I don't use Rails, I don't know if it's able to use that. That being said, we have plans to re-consider the dual-publishing in the next major release although I am still torn on whether to do this or not.

I hope this helps!

[cbmike]

I've found a workaround: If I import the minified version of tus-js-client as 'import * as tus from 'tus-js-client';', then I can access tus this way: 'window.tus'.
'console.log('tus', tus)' shows 'Module {Symbol(Symbol.toStringTag): 'Module'}'. The line 'new tus.Upload();' throws a TypeError: tus.Upload is not a constructor. But 'window.tus' works fine.

[cbmike]

Unsuccessful attempt to get ESM working:
I’ve tried to pin both https://cdn.jsdelivr.net/npm/[email protected]/lib.es5/browser/index.min.js and https://cdn.jsdelivr.net/npm/[email protected]/+esm — doesn’t work.
Also, I’ve tried to install using “./bin/importmap pin tus-js-client --from=jsdelivr” , as the result, importmap has imported 3 files:
Pinning “tus-js-client” to vendor/javascript/tus-js-client.js
Pinning “js-base64” to vendor/javascript/js-base64.js
Pinning “url-parse” to vendor/javascript/url-parse.js
In the tus-js-client.js there is export at the end, that looks good
export { Upload, canStoreURLs, defaultOptions, isSupported, enableDebugLog, DefaultHttpStack, DetailedError };
But also, in this file are strange imports that aren’t handled properly:
import DetailedError from '../error.js';
import { enableDebugLog } from '../logger.js';
import NoopUrlStorage from '../noopUrlStorage.js';
import BaseUpload from '../upload.js';
import FileReader from './fileReader.js';
import fingerprint from './fileSignature.js';
import DefaultHttpStack from './httpStack.js';
import { WebStorageUrlStorage, canStoreURLs } from './urlStorage.js';
which results in errors like this “GET http://lvh.me:3000/logger.js 404 (Not Found)”
So, it looks like packaging is broken or something.

[Acconut]

I'm not familiar with Rails Importmaps, so I cannot provide direct help. tus-js-client works well with other bundlers like Webpack etc. But if you have tips on how to improve interoperability with importsmaps, I am happy to look into them.

[divagueame]

@cbmike I think I got this working like this:

# config/importmap.rb
pin "tus-js-client", to: 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'

Then I run:

bin/importmap pristine

Downloading "tus-js-client" to vendor/javascript/tus-js-client.js from https://ga.jspm.io/npm:[email protected]/lib.esm/browser/index.js
Downloading "js-base64" to vendor/javascript/js-base64.js from https://ga.jspm.io/npm:[email protected]/base64.mjs
Downloading "querystringify" to vendor/javascript/querystringify.js from https://ga.jspm.io/npm:[email protected]/index.js
Downloading "requires-port" to vendor/javascript/requires-port.js from https://ga.jspm.io/npm:[email protected]/index.js
Downloading "url-parse" to vendor/javascript/url-parse.js from https://ga.jspm.io/npm:[email protected]/index.js

On app/javascript/application.js

import * as tus from "tus-js-client";
window.tus = tus;
console.log(tus);

I hope that's useful to you.

[Acconut]

I'm glad to read that @divagueame got it working. For the next major release v5, we have overhauled the ESM support in tus-js-client, which should make it more compatible with systems like Rails import maps,

You can try the pre-release 5.0.0-pre1 right now, but please be aware that this is a pre-release. There might still be breaking changes compared to the final 5.0.0 later.

Since this issue seems to be fixed in the near future, I will close this issue for now. Feel free to leave a comment if you think this needs more discussions.