Module Federation React + SSR Broken in 15.7.2 .Works on 15.4.4 (Cannot use 'import.meta' outside a module)

[stevebrowndotco]

Current Behavior

Hello,

I am following the guide at https://nx.dev/recipes/module-federation/module-federation-with-ssr to the exact letter (at least I hope so!), I am doing this for React.

When I run npx nx serve store all of the remotes run fine, but the host app breaks because of Cannot use 'import.meta' outside a module and never runs. If I remove the lazy load modules in app.tsx, the error goes away

Expected Behavior

When I run npx nx serve store I expect to see the store micro-frontend running. But it doesnt.

GitHub Repo

https://github.com/stevebrowndotco/react-nx-module-federation-ssr

Steps to Reproduce

1. Clone my repo
2. Run npm install
3. Run npx nx serve store
4. Observe that the store isn't running in localhost:4200

Nx Report

>  NX   Report complete - copy this into the issue template

   Node : 16.16.0
   OS   : darwin arm64
   npm  : 8.11.0
   
   nx                      : 15.7.2
   @nrwl/jest              : 15.7.2
   @nrwl/linter            : 15.7.2
   @nrwl/workspace         : 15.7.2
   @nrwl/cli               : 15.7.2
   @nrwl/cypress           : 15.7.2
   @nrwl/devkit            : 15.7.2
   @nrwl/eslint-plugin-nx  : 15.7.2
   @nrwl/js                : 15.7.2
   @nrwl/react             : 15.7.2
   @nrwl/rollup            : 15.7.2
   @nrwl/tao               : 15.7.2
   @nrwl/web               : 15.7.2
   @nrwl/webpack           : 15.7.2
   @nrwl/nx-cloud          : 15.0.3
   typescript              : 4.8.4

Failure Logs

It's worth noting that I get the following error appear in the terminal console:

SyntaxError: Cannot use 'import.meta' outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.Module._load (/Users/Steve/Sites/code-projects/next/next-mf-with-ssr/packages/js/src/executors/node/node-with-require-overrides.ts:16:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/Users/Steve/Sites/code-projects/next/next-mf-with-ssr/packages/js/src/executors/node/node-with-require-overrides.ts:20:1)

Additional Information

Following the guide for a NON ssr project works perfectly for me, it's only when using SSR that I have issues.

[stevebrowndotco]

Update after tonnes of trial and error, downgrading my entire workspace and all related nx dependencies from 15.7.2 to 15.4.4 "fixes" the issue for me (although it is more of a workaround than a fix!). Therefore, I believe there is a breaking bug in the latest NX

[triglian]

Hello, we're experiencing the same problem.

[stevebrowndotco]

@triglian Were you able to get it working with 15.4.4?

[triglian]

@stevebrowndotco no, the moment I introduce code as simple as a native fetch() i get the import.meta issue

[stevebrowndotco]

For me this happens when using React.lazy to import the federated modules.

But i ended up moving away from the nx generated module federation completely. Currently module federation with SSR and react simply doesnt work on all versions of nx that I have tried. I can make some progress with 15.4.4 but it only supports one module (for SSR).

The approach I am taking is to still generate my react apps with NX, but to implement the federated webpack plugins myself, which is quite straight forward and working fine.

[triglian]

@stevebrowndotco good approach, I may have to do the same.

[stevebrowndotco]

@triglian you may check out my PoC here: https://github.com/stevebrowndotco/next-js-with-ssr-and-module-federation

[jaysoo]

I'll take a look this week and provide fix.

[jaysoo]

Sorry, this week I got bogged down by other things. I've started to investigate so will keep you updated on Monday (March 6th).

[jaysoo]

Fix is incoming. The workaround for now is to remove output.scriptType for the server webpack config.

// webpack.server.config.js
const { composePlugins, withNx } = require('@nrwl/webpack');
const { withReact } = require('@nrwl/react');
const { withModuleFederationForSSR } = require('@nrwl/react/module-federation');

const baseConfig = require('./module-federation.config');

const defaultConfig = {
  ...baseConfig,
};

// Nx plugins for webpack to build config object from Nx options and context.
module.exports = composePlugins(
  withNx(),
  withReact(),
  withModuleFederationForSSR(defaultConfig),
  (config) => {
    delete config.output.scriptType;
    return config;
  },
);

[github-actions]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.