Qwik Host and Qwik Micro Front End with Builder IO error

[bitter depot]

While trying to create a mfe with qwik, whenever I connect with builder IO I start to get the following error, but the mfe url still works fine.

I believe this is related to the dynamic imports, is there any kind of docs on how can I control this? Can be with vite-module-federation

[dire coral]

Does the blocks wrapper mjs file exist? So until the _

[mellow ferry]

Could you try to install the pkg.pr.new from my PR here? https://github.com/QwikDev/qwik/pull/7417 It adds more dynamic imports to be prefetched. I wonder what effect it does on this issue you're facing.

[bitter depot]

Yeah I was able to make it work changing the setting in the vite config to preserveModules: false, on my mfe package

[mellow ferry]

So with preserveModules: false it works both on latest and my PR's pkg.pr.new?

[bitter depot]

Just checked on latest, lemme test it with your pr

[bitter depot]

yeah is working fine with preserveModules: false

[mellow ferry]

and still doesn't work with true?

[bitter depot]

nope

import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";
import pkg from "./package.json";

const { dependencies = {}, peerDependencies = {} } = pkg as any;
const makeRegex = (dep: string) => new RegExp(`^${dep}(/.*)?$`);
const excludeAll = (obj: Record<string, string>) =>
  Object.keys(obj).map(makeRegex);

export default defineConfig(() => {
  return {
    build: {
      target: "es2020",
      lib: {
        entry: "./src/index.ts",
        formats: ["es", "cjs"],
        fileName: (format, entryName) =>
          `${entryName}.qwik.${format === "es" ? "mjs" : "cjs"}`,
      },
      rollupOptions: {
        output: {
          preserveModules: false,
          preserveModulesRoot: "src",
        },
        // externalize deps that shouldn't be bundled into the library
        external: [
          /^node:.*/,
          "@builder.io/qwik",
          "@builder.io/qwik-city",
          "@qwik-city-plan",
          ...excludeAll(dependencies),
          ...excludeAll(peerDependencies),
        ],
      },
    },
    plugins: [qwikVite(), tsconfigPaths()],
  };
});

my vite config file

[mellow ferry]

okay thanks for sharing

did you have any specific reason for using preserveModules on your MFE?

I believe we set preserveModules to be the default for library starters, but for consumer facing apps it would mean skipping the bundling

[bitter depot]

nah just learning tbh. I am trying to use https://github.com/gioboa/qwik-microfrontend-starter/tree/main as base for that. My goal here is to make some isolated mfes but inside the qwik host I wanna they to share the same tailwind file so I dont get 1 tailwind per mfe xD

[dire coral]

Weird, looks like it should work. If you pass debug: true to the qwikvite plugin we could try to figure out what's going wrong

[bitter depot]

ok i will fork this template, and replicate the same issue and send to you guys, I think is the best way to not get too much of you guys time

[bitter depot]

https://github.com/lfroes/qwik-microfrontend-starter

[bitter depot]

any news guys?

[dire coral]

sorry I was stuck on the builder key stuff, and now I don't know what to do with the model name. Isn't the builder key public? can't you fill in your values?

[bitter depot]

yo sorry sure I can update it with my key

hold on

[bitter depot]

Done, updated the repo with the model and api key, so you just need to build the packages and run it

[dire coral]

Ok got it working, now to find the error.

[bitter depot]

if you run it you will see that in the host we have the error, and in the mfe address we dont

[dire coral]

it's quite simple: it's requesting the chunks from the wrong host 😕

maybe vite can't handle two debug sessions in the same browser

[bitter depot]

yeah but if i take the builder io out it works 🤪

[dire coral]

@bitter depot when I manually change the q:base to include the port for the container server it works it seems. eg q:base=http://localhost:4174/remote/build/

so you can edit entry.ssr and change that I think

afk

[bitter depot]

ok not sure if it will work but i will give it a try

[bitter depot]

lol holy moly it worked

thx so much guys saved my life

[dire coral]

maybe make a PR on the mfe repo?

[bitter depot]

sure 100% will do

[subtle seal]

hi @bitter depot 👋 , did you get a chance to make a PR

[bitter depot]

uh i guess I did not, will make it tomorrow sry