Add module federation support by adding package.json export

[Facegrinder]

Hi, I wanted to use connect-query in my microfrontend project which uses Vite Module Federation.
I need to specify connect-query as singleton like this:

// ...
 shared: {
        react: {
          requiredVersion: dependencies.react,
          singleton: true,
        },
        'react-router': {
          requiredVersion: dependencies['react-router'],
          singleton: true,
        },
        // Important
        '@connectrpc/connect-query': {
          requiredVersion: dependencies['@connectrpc/connect-query'],
          singleton: true
        },
        '@tanstack/react-query': {
          requiredVersion: dependencies['@tanstack/react-query'],
          singleton: true
        },
      },
// ...

Without my suggested fix, I get this in the browsers console:
[ Federation Runtime ] Warn Version 0 from userFrontend of shared singleton module @connectrpc/connect-query does not satisfy the requirement of host which needs ^2.0.1)

The output of the host/frontend in the console:

[[email protected]](vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html) dev

vite

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './package.json' is not defined by "exports" in /app/node_modules/@connectrpc/connect-query/package.json
at exportsNotFound (node:internal/modules/esm/resolve:314:10)
at packageExportsResolve (node:internal/modules/esm/resolve:661:9)
at resolveExports (node:internal/modules/cjs/loader:657:36)
at Function._findPath (node:internal/modules/cjs/loader:749:31)
at Function._resolveFilename (node:internal/modules/cjs/loader:1387:27)
at defaultResolveImpl (node:internal/modules/cjs/loader:1057:19)
at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1062:22)
at Function._load (node:internal/modules/cjs/loader:1211:37)
at TracingChannel.traceSync (node:diagnostics_channel:322:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:235:24) {
code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

12:06:55 PM [vite] (client) Forced re-optimization of dependencies

VITE v6.3.3 ready in 547 ms

➜ Local: [http://localhost:3000/⁠](vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html)

➜ Network: [http://172.18.0.7:3000/⁠](vscode-file://vscode-app/Applications/Visual%20Studio%20Code.app/Contents/Resources/app/out/vs/code/electron-sandbox/workbench/workbench.html)

My PR fixes this warning/error.

[timostamm]

Hey @Facegrinder, can you share a reproducible example for the error?

[Facegrinder]

@timostamm Sure, here you go: https://github.com/Facegrinder/connect-query-microfrontend-bug-showcase

[timostamm]

Looks like this should be fixed: module-federation/vite#246

But here's what I see when running npm run dev in host:

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './package.json' is not defined by "exports" in /XXXconnect-query-microfrontend-bug-showcase/host/node_modules/@connectrpc/connect-query/package.json
    at exportsNotFound (node:internal/modules/esm/resolve:304:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:651:9)
    at resolveExports (node:internal/modules/cjs/loader:634:36)
    at Module._findPath (node:internal/modules/cjs/loader:724:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1211:27)
    at Module._load (node:internal/modules/cjs/loader:1051:27)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at require (node:internal/modules/helpers:179:18)
    at normalizeShareItem (/connect-query-microfrontend-bug-showcase/host/node_modules/@module-federation/vite/lib/index.cjs:357:15)
    at /connect-query-microfrontend-bug-showcase/host/node_modules/@module-federation/vite/lib/index.cjs:397:21 {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

So the fix isn't working 🤔

For context: Not exporting package.json is not wrong.

[Facegrinder]

Did you apply the fix to both the host and remote?
Because then it works for me.

The error you mentioned is also happening for me as well.

[timostamm]

I've filed module-federation/vite#293 and opened a PR with a fix: module-federation/vite#294

Closing this. For context: Even if we add a package.json export here, you're very likely to run into the same problem with @connectrpc/connect, @connectrpc/connect-web, @bufbuild/protobuf, and others.

[Facegrinder]

Alright, nice. When do you expect that change to be released?

[timostamm]

I hope it'll get accepted and released soon, but it's up to the module-federation/vite maintainers.

In the meantime, I'd use https://github.com/ds300/patch-package to add an export for package.json to @connectrpc/connect-query (and others where necessary).

[gioboa]

Alright, nice. When do you expect that change to be released?

The new version with this fix, Module Federation Vite v1.2.7 is out now 👏