React single spa

[hiaparna]

@joeldenning

ERROR --> Uncaught Error: app3 died in status LOADING_SOURCE_CODE: "does not export an unmount function or array of functions"

code: This runs fine if I don't use the bundled .js file app3.bd.js. app1.js and app2.js are just like in this example of simple-single-spa-webpack-example.

However, app3.bd.js is bundled and copied in the folder

import * as singleSpa from 'single-spa';
import "core-js/stable";
import "regenerator-runtime/runtime";
import 'babel-polyfill';

async function registerApps(){
    const loadingPromises = [];
    loadingPromises.push(singleSpa.registerApplication('app1', () =>  import('./apps/app1/app1.js'), () => true));

    loadingPromises.push(singleSpa.registerApplication('app2', () =>  import('./apps/app2/app2.js'), () => location.pathname === "" || location.pathname === "/"));

    loadingPromises.push(singleSpa.registerApplication('app3', () => import('./apps/app3.bd.js'), pathPrefix('/app3')));

    await Promise.all(loadingPromises);
    singleSpa.start();
}

function pathPrefix(prefix) {
    return function(location) {
        return location.pathname.indexOf(`${prefix}`) === 0;
    }
}

// Register the apps
registerApps();

[joeldenning]

Webpack can’t load other bundles. It can only load code splits that it generates during its own bundling process.

What you need to load entirely distinct bundles is a module loader such as systemjs. See the recommended setup for more info.