akhenry/openmct-yamcs

[Packaging] Update openmct and openmct-yamcs to have a default export as an ESmodule

unlikelyzero opened this issue · 0 comments

When the main openmct project converted to an ES module nasa/openmct#7330 we tested how an upstream sourcing project would function when sourcing this change.

We found that there was no impact to sourcing repo's functionality and assumed that each repo that treated openmct-as-a-depenency would elect to "opt in" to using the esmodule.

After the ESmodule change was made, the tests from openmct-yamcs/e2e started to fail. The tests were converted to using ESModule imports instead of CJS. The simplest approach was to convert the entire package (openmct-yamcs#file:package.json#type:module) to a module. When this change was made, our upstream project failed to compile.

This import statement:

import installYamcsPlugin from 'openmct-yamcs';

Produced this error:

WARNING in ./src/index.js 32:16-34
export 'default' (imported as 'installYamcsPlugin') was not found in 'openmct-yamcs' (module has no exports)

We found that the openmct-yamcs module needed to be imported in a different way.

This is what we ended up with:

  • Add a default export to openmct-yamcs.js
// openmct-yamcs.js (main entry point)
export default function install(configuration) {
    return (openmct) => {
        openmct.install(openmct.plugins.ISOTimeFormat());
// ...
  • Add an entry to openmct-yamcs webpack common config:
    entry: {
        'openmct-yamcs': './src/openmct-yamcs.js'
    },
  • Adjust library settings to add default export
    output: {
        globalObject: "(typeof self !== 'undefined' ? self : this)",
        filename: '[name].js',
        path: path.resolve(projectRootDir, 'dist'),
        library: {
            type: 'umd',
            export: 'default'
        }
    }

On the upstream sourcing project, we made the following changes that "work". These are not necessarily desirable.

  • We added this to index.html
    <script src="node_modules/openmct-yamcs/dist/openmct-yamcs.js"></script>
    <script src="index.js" defer></script>
  • and imported as such in index.js:
const installYamcsPlugin = window["openmct-yamcs"];

This all "works", but doesn't get us where we want to be. We want to be able to simply import yamcs as:

import installYamcsPlugin from 'openmct-yamcs';