How do you import from an MJS file with multiple exports?

Question

I'm using Ruby on Rails with Stimulus without Webpack and I'm trying to import Uppy in a Controller from "@uppy/core" which has this structure:

'use strict';

const Uppy = require('./Uppy');

const UIPlugin = require('./UIPlugin');

const BasePlugin = require('./BasePlugin');

const {
  debugLogger
} = require('./loggers');

module.exports = Uppy;
module.exports.Uppy = Uppy;
module.exports.UIPlugin = UIPlugin;
module.exports.BasePlugin = BasePlugin;
module.exports.debugLogger = debugLogger;

I've tried with:

import { Uppy } from "@uppy/core";
import Uppy from "@uppy/core";
import * as Uppy from "@uppy/core";

And nothing works. There is also an mjs file available with this structure:

// Core
export { default as Core } from '@uppy/core'

// Utilities
export { default as server } from '@uppy/companion-client'
/* eslint-disable */
import ProviderView from '@uppy/provider-views'
export var views = { ProviderView }
/* eslint-enable */

// Stores
export { default as DefaultStore } from '@uppy/store-default'
export { default as ReduxStore } from '@uppy/store-redux'

// UI plugins
export { default as Dashboard } from '@uppy/dashboard'
export { default as DragDrop } from '@uppy/drag-drop'
export { default as DropTarget } from '@uppy/drop-target'
export { default as FileInput } from '@uppy/file-input'
export { default as Informer } from '@uppy/informer'
export { default as ProgressBar } from '@uppy/progress-bar'
export { default as StatusBar } from '@uppy/status-bar'
export { default as ImageEditor } from '@uppy/image-editor'

// Acquirers
export { default as Dropbox } from '@uppy/dropbox'
export { default as GoogleDrive } from '@uppy/google-drive'
export { default as Instagram } from '@uppy/instagram'
export { default as OneDrive } from '@uppy/onedrive'
export { default as Box } from '@uppy/box'
export { default as Facebook } from '@uppy/facebook'
export { default as Unsplash } from '@uppy/unsplash'
export { default as Url } from '@uppy/url'
export { default as Webcam } from '@uppy/webcam'
export { default as ScreenCapture } from '@uppy/screen-capture'
export { default as Audio } from '@uppy/audio'

// Uploaders
export { default as AwsS3 } from '@uppy/aws-s3'
export { default as AwsS3Multipart } from '@uppy/aws-s3-multipart'
export { default as Transloadit } from '@uppy/transloadit'
export { default as Tus } from '@uppy/tus'
export { default as XHRUpload } from '@uppy/xhr-upload'

// Miscellaneous
export { default as Form } from '@uppy/form'
export { default as GoldenRetriever } from '@uppy/golden-retriever'
export { default as ReduxDevTools } from '@uppy/redux-dev-tools'
export { default as ThumbnailGenerator } from '@uppy/thumbnail-generator'

I have also tried to import Core from here in order to achieve the same thing. But I can't get the import to work. Any ideas?

Answer 1

Can you run ./bin/importmap json?

If Uppy is not there, it means that it's not installed.

Run

./bin/importmap pin uppy --from jsdelivr

Pinning "@uppy/core" to https://cdn.jsdelivr.net/npm/@uppy/[email protected]/lib/index.js
Pinning "@uppy/dashboard" to https://cdn.jsdelivr.net/npm/@uppy/[email protected]/lib/index.js
Pinning "@uppy/tus" to https://cdn.jsdelivr.net/npm/@uppy/[email protected]/lib/index.js
...

Now you run again ./bin/importmap json and see that Uppy is installed

./bin/importmap json

{
  "imports": {
    ...
    "@uppy/core": "https://cdn.jsdelivr.net/npm/@uppy/[email protected]/lib/index.js",
    "@uppy/dashboard": "https://cdn.jsdelivr.net/npm/@uppy/[email protected]/lib/index.js",
    "@uppy/tus": "https://cdn.jsdelivr.net/npm/@uppy/[email protected]/lib/index.js"
  }
}