sasoria / astro-microfrontends

Client-side composition of microfrontends using Astro

Hi, I'm Sergio A. Arevalo Soria 👋

astro-microfrontends's Issues

Adding nanostores

I tried to fork your project and add nanostores in order to be able to share states between microfrontends, it doesnt works, when I update my state from my X microfronted and try to retrieve the state from another Y microfrontend (usign useEffect to see realtime results) im not able to get the updated value.
Do you have any suggestion for it? The only way that works is to use the PostMessage method

React interactivity problem

This is a nice approach, I would like to use microfrontends in Astro and started to experiment with your code.

Tried to add some interactivity to the React app-a:

import React, { useState } from "react";
import "./App.css";

const App = () => {
  const [count, setCount] = useState(0);
  
  return (
    <section className="app-a">
      <h1 onClick={() => setCount((c) => (c + 1))} style={{ cursor: "pointer" }}>App a {count}</h1>
    </section>
  )
};

export default App;

and unfortunately this is not working at all.
Running the server and the astro app the astro app cannot run the React microforntend, the error is:

react.production.min.js:25 Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at n.useState (react.production.min.js:25:394)
    at j (bundle.js:9:655)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)

and this is the same even if I remove the external references from the build process and include react in the bundle.

Solid interactivity does not work with external reference to Solid

I also tried this with solid and it is much better. This works fine:

import styles from "./App.module.css";
import { createSignal } from "solid-js";

function App() {
  const [count, setCount] = createSignal(0);

  return (
    <section className={styles["app-c"]}>
      <h1 onClick={() => setCount(c => c + 1)} style={{ cursor: "pointer"}}>App c {count()}</h1>
    </section>
  );
}

export default App;

Also added an app-d in a similar fashion and the 2 microfrontends worked fine together on the same page.
However, when I tried to set the solid-js dependency external, in the same way as you do it for react, the microfrontends could not be loaded at all due to this error:

Uncaught (in promise) TypeError: Failed to resolve module specifier "solid-js". Relative references must start with either "/", "./", or "../".

My configuration in the solid apps vite.config.js:

rollupOptions: {
      input: resolve(__dirname, "src/App.jsx"),
      preserveEntrySignatures: "exports-only",
      external: ["solid-js"],
      output: {
        entryFileNames: "bundle.js",
        format: "esm",
      },
    },

in the shell astro.config.mjs:

      hooks: {
        'astro:build:setup': ({ vite, target }) => {
          if(target === 'client') {
            vite.build.rollupOptions["external"] = ["react", "react-dom", "solid-js"];
          }
        }
       }

But at least this is working if I include solidJS in the bundles...

Remove server in the apps

Thanks for a great blog post and an excellent starting point!

I was plying around with it and set up a solution where I removed the server and served the bundle.js using vite preview.
Are you open for PRs?

shell build failure

There is this shell build failure since Astro update to version 4:

s\astro-microfrontends\shell> npm run build

> @example/[email protected] build
> astro build

00:48:17 [build] output: "static"
00:48:17 [build] directory: C:\work\microfrontends\astro-microfrontends\shell\dist\
00:48:17 [build] Collecting build info...
00:48:17 [build] ✓ Completed in 250ms.
00:48:17 [build] Building static entrypoints...
00:48:20 [build] ✓ Completed in 3.39s.

 building client (vite)
00:48:20 [vite] ✓ 4 modules transformed.
00:48:20 [ERROR] [vite] [vite:build-import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. If you use tsconfig.json, make sure to not set jsx to preserve.
file: C:/work/microfrontends/astro-microfrontends/shell/src/components/SolidComponent.jsx:7:7
5:     <>
6:       <MicroFrontendC />
7:     </>
          ^
8:   );
9: }
transforming (6) node_modules\@astrojs\react\static-html.jsFailed to parse source for import analysis because the content contains invalid JS syntax. If you use tsconfig.json, make sure to not set jsx to preserve.
  Stack trace:
    at error (file:///C:/work/microfrontends/astro-microfrontends/shell/node_modules/astro/node_modules/rollup/dist/es/shared/parseAst.js:337:30)
    at Object.error (file:///C:/work/microfrontends/astro-microfrontends/shell/node_modules/astro/node_modules/rollup/dist/es/shared/node-entry.js:17530:42)

I think this is due to the Astro upgrade because I also have this problem in my forked version:
it worked with Astro 2, but fails with the same error with Astro 4.