module-federation/vite

Adding dependency @adyen/adyen-web causes error in building shared package

Closed this issue · 4 comments

I am build a remote component using this plugin. When I add as a dependency @adyen/adyen-web (which should be part of the bundle) I get the following issue:

> vite build

vite v4.4.11 building for production...
✓ 4 modules transformed.
../../dist/client/index.html                0.36 kB │ gzip: 0.25 kB
../../dist/client/assets/index-f6effac0.js  0.75 kB │ gzip: 0.42 kB
 INFO  Building federation artefacts
✓ built in 53ms
 INFO  Preparing shared npm packages
 NOTE  This only needs to be done once, as results are cached
 NOTE  Skip packages you don't want to share in your federation config
 ERR!  Error bundling shared npm package 
 ERR!  Invalid value for option "output.file" - when building multiple chunks, the "output.dir" option must be used, not "output.file". To inline dynamic imports, set the "inlineDynamicImports" option.
 ERR!  For more information, run in verbose mode
 NOTE  If you don't need this package, skip it in your federation.config.js!

This is the Vite configuration:

import { federation } from "@module-federation/vite";
import json from "@rollup/plugin-json";
import { createEsBuildAdapter } from "@softarc/native-federation-esbuild";
import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";
import { defineConfig } from "vite";

const path = dirname(fileURLToPath(new URL(import.meta.url)));
const root = resolve(path, "src/client");
const outDir = resolve(path, "dist/client");

export default defineConfig(async () => ({
  root,
  plugins: [
    await federation({
      options: {
        workspaceRoot: path,
        outputPath: 'dist/client',
        tsConfig: "tsconfig.json",
        federationConfig: "module-federation/federation.config.cjs",
        verbose: true,
        dev: true,
      },
      adapter: createEsBuildAdapter({ plugins: [] }),
    }),
    json(),
  ],
  build: {
    outDir,
  },
}));

This is the federation.config.cjs:

const {
  withNativeFederation,
  shareAll,
} = require("@softarc/native-federation/build");

module.exports = withNativeFederation({
  name: "mycomponent",

  exposes: {
    "./my-component": "./src/client/main.ts",
  },

  shared: shareAll(),
});

main.ts is just a simple function:

export function consoleLog(message: string) {
  console.log(message);
}
gioboa commented

Thanks for your report. Can you create a minimal reproduction repo pls?

@gioboa I have uploaded the code in this repo https://github.com/ddeliziact/module-federation-vite

If you try to remove the dependency the build works correctly.

Furthermore I noticed that the the following properties in the vite configuration are not taken into account:

  • tsConfig: If I change the name of the file it always tries to get the default one tsconfig.json resulting in the following error:
error during build:
Error: Neither a tsconfig.json nor a tsconfig.base.json was found
  • verbose: nothing changes if I use either true or false
gioboa commented

Thanks I will look at it

We are working on a new version of this package in this PR
I'm closing this issue, if you want, you can try the new version and give us feedback. Thanks.