remove import bootstrap from apps that can support it

[ScriptedAlchemy]

Here a few updates what happened on the dev-1 branch:

Overridables (shared) to no longer require wrapping in import(). So no unneccessary import("./bootstrap") in your app code because of container-related plugins. (Note: remote modules still require import(), that won't change.)
Persistent caching with container-related plugins is now possible.
Container-related plugins are now exposed under require("webpack").container.XXXPlugin and have typings
ModuleFederationPlugin doesn't create a container when no exposes are specified
Improved schema validation

after testing this out, it's important to note that if you consume exposes inside a remote app, you will need to use a dynamic import somewhere, perhaps not on the root of the app @sokra ?

import LocalButton from "./Button";
import React from "react";

const App = () => (
  <div>
    <h1>Basic Host-Remote</h1>
    <h2>App 2</h2>
    <LocalButton />
  </div>
);

export default App;

with

import React from "react";

const Button = () => <button>App 2 Button</button>;

export default Button;

and a webapck config that has this.

new ModuleFederationPlugin({
      name: "app2",
      library: { type: "var", name: "app2" },
      filename: "remoteEntry.js",
      exposes: {
        Button: "./src/Button",
      },
      shared: ["react", "react-dom"],
    }),

Will require you to either use import(bootstrap.js) in the REMOTE's entrypoint in order for it to work.

OR

you can dynamically import the file itself. Either way, you need a dynamic import on the remote in the execution chain - a promise must exist somewhere to hoist imports up.

import React, {Suspense} from "react";
const LocalButton = React.lazy(()=>import('./Button'));

const App = () => (
  <div>
    <h1>Basic Host-Remote</h1>
    <h2>App 2</h2>
    <Suspense fallback={null}>
      <LocalButton />
    </Suspense>
  </div>
);

export default App;

import(bootstrap.js) will allow you to do this

import LocalButton from "./Button";

Otherwise, if you don't want to have a dynamic import in entrypoint, you can use it like this
const LocalButton = React.lazy(()=>import('./Button'));