Loading uppy with Rails 7 and stimulus and importmaps

Question

Is it doable to load Uppy into a vanilla Rails app via the Rails 7 importmaps?

If you end up pinning @uppy/core, you get a lot of dependencies added to your importmap file:

bin/importmap pin @uppy/core

...but when you try to access it via a Stimulus controller like:

import Uppy from '@uppy/core';

You get a variety of not-so-helpful errors.

Safari shows:

syntaxerror: Importing binding name 'default' cannot be resolved by star export entries.

And Chrome has a few different responses:

SyntaxError: The requested module 'classnames' does not provide an export named 'default'

(I've also seen this be a problem for mime-match instead of classnames.

I'm a bit over my head in terms of debugging this- it's tricky to see where the issue might stem from. Is this a "can't really use the Rails 7 importmaps" type of answer?

Answer 1

I think this has to do with different import styles supported in different envs. The maintainers at jspm and importmap-rails have been encouraging users to file issues or fixes with dependencies. e.g.

• https://github.com/rails/importmap-rails/issues/87
• https://github.com/jspm/project/issues/93

I was able to reproduce the Failed to register controller: uppy (controllers/uppy_controller) SyntaxError: The requested module 'mime-match' does not provide an export named 'default' issue you saw when using unpkg.

JSPM doesn't seem to have the issue and I think does a bit more to smooth these out. You may want to try switching by using the --from jspm flag. Though, I believe that's the default.

❯ ./bin/importmap pin @uppy/core @uppy/drag-drop --from jspm

That was enough for me to get a basic controller to load Uppy and its drag-drop plugin:

import { Controller } from "@hotwired/stimulus"
import { Uppy } from "@uppy/core"
import { default as DragDrop }  from "@uppy/drag-drop"

// Connects to data-controller="uppy"
export default class extends Controller {
  connect() {
    const uppy = new Uppy({ })
      .use(DragDrop, {
        target: "#drag-drop"
      })
    window.uppy = uppy;

I didn't experiment further. There may be more needed.