Error: 'default' is not exported by node_modules/single-spa-html/lib/single-spa-html.js

[marcosgilf]

Hi!

I'm using single-spa-html as stated in https://single-spa.js.org/docs/ecosystem-html-web-components/#via-npm:

import singleSpaHtml from 'single-spa-html';

const htmlLifecycles = singleSpaHtml({
  template: '<x-my-web-component></x-my-web-component>',
})

export const bootstrap = htmlLifecycles.bootstrap;
export const mount = htmlLifecycles.mount;
export const unmount = htmlLifecycles.unmount;

And I'm using rollup to create the bundle with this config:

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/app.js',
  output: {
    dir: 'dist',
    format: 'system',
  },
  plugins: [nodeResolve()],
};

When I run rollup I get this output:

> rollup --config rollup.config.js


src/app.js → dist...
(!) `this` has been rewritten to `undefined`
https://rollupjs.org/guide/en/#error-this-is-undefined
node_modules/single-spa-html/lib/single-spa-html.js
11:     global.singleSpaHtml = mod.exports;
12:   }
13: })(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
                                                                                             ^
14:   "use strict";
[!] Error: 'default' is not exported by node_modules/single-spa-html/lib/single-spa-html.js, imported by src/app.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module

Any idea of what am I doing wrong? or if there is some rollup config that can undestand the single-spa-html export file?

Thanks!

[wynnerd]

Did you ever find out what was up with this? I'm seeing something very similar regarding this file in my builds. Not using rollup though.

[marcosgilf]

No news 😞