React Module Federation is broken from 15.4.6+ #14629

rathpc · 2023-01-25T19:54:24Z

Current Behavior

With the recent changes in this release (https://github.com/nrwl/nx/releases/tag/15.4.6) specifically these 3:

webpack: generate React and Web apps with webpack.config.js file (feat(webpack): generate React and Web apps with webpack.config.js file #14285) (454fba4)
webpack: remove support for legacy browsers (feat(webpack): remove support for legacy browsers #14190) (fcc02d1)
webpack: remove support for legacy browsers (feat(webpack): remove support for legacy browsers #14190) (feat(webpack): remove support for legacy browsers (#14190) #14257) (6feb56e)

It seems that module federation serving and building is broken because the withModuleFederation method has not been refactored to take into account the change that happened with regards to getWebpackConfig -> withReact and the latter now returning a function instead of just a config object.

As a result, the building and serving of both host and remote applications throw errors like the following:

ERROR in container entry ./Module[0]
Module not found: Error: Can't resolve './src/remote-entry.ts' in '/code/frontend'
resolve './src/remote-entry.ts' in '/code/frontend'
  using description file: /code/frontend/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /code/frontend/package.json (relative path: ./src/remote-entry.ts)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /code/frontend/src/remote-entry.ts doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /code/frontend/src/remote-entry.ts.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /code/frontend/src/remote-entry.ts.tsx doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /code/frontend/src/remote-entry.ts.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /code/frontend/src/remote-entry.ts.js doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /code/frontend/src/remote-entry.ts.jsx doesn't exist
      as directory
        /code/frontend/src/remote-entry.ts doesn't exist

This file likely needs to be updated: https://github.com/nrwl/nx/blob/master/packages/react/src/module-federation/with-module-federation.ts as well as documentation around how to use the new methods like withReact, withWeb, withNx and composePlugins if they should be used directly at all. The only information I found on this was within other issues or the pull requests themselves. Even the release notes are pretty limited on descriptive information about this change.

Expected Behavior

I expect module federation builds and serving to continue working as it previously had as there were no documented breaking changes to this functionality after 15.4.5

GitHub Repo

No response

Steps to Reproduce

Set up a module federation project just as described here: https://nx.dev/recipes/module-federation/faster-builds and it will no longer work on any version of Nx after 15.4.5.

Nx Report

   Node : 16.15.1
   OS   : darwin x64
   yarn : 1.22.19

   nx : 15.6.1
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.6.1
   @nrwl/detox : Not Found
   @nrwl/devkit : 15.6.1
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.6.1
   @nrwl/expo : Not Found
   @nrwl/express : 15.6.1
   @nrwl/jest : 15.6.1
   @nrwl/js : 15.6.1
   @nrwl/linter : 15.6.1
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : 15.6.1
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.6.1
   @nrwl/react-native : Not Found
   @nrwl/rollup : 15.6.1
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.6.1
   @nrwl/web : 15.6.1
   @nrwl/webpack : 15.6.1
   @nrwl/workspace : 15.6.1
   @nrwl/vite : Not Found
   typescript : 4.9.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:

Failure Logs

ERROR in container entry ./Module[0]
Module not found: Error: Can't resolve './src/remote-entry.ts' in '/code/frontend'
resolve './src/remote-entry.ts' in '/code/frontend'
  using description file: /code/frontend/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /code/frontend/package.json (relative path: ./src/remote-entry.ts)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /code/frontend/src/remote-entry.ts doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /code/frontend/src/remote-entry.ts.ts doesn't exist
      .tsx
        Field 'browser' doesn't contain a valid alias configuration
        /code/frontend/src/remote-entry.ts.tsx doesn't exist
      .mjs
        Field 'browser' doesn't contain a valid alias configuration
        /code/frontend/src/remote-entry.ts.mjs doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /code/frontend/src/remote-entry.ts.js doesn't exist
      .jsx
        Field 'browser' doesn't contain a valid alias configuration
        /code/frontend/src/remote-entry.ts.jsx doesn't exist
      as directory
        /code/frontend/src/remote-entry.ts doesn't exist

Additional Information

No response

The text was updated successfully, but these errors were encountered:

Tassfighter · 2023-01-26T18:36:54Z

Workaround:

Goto to your app folder and edit module-federation.config.js

From

module.exports = {
  name: 'image-selection',
  exposes: {
    './Module': './src/remote-entry.ts',
  },
};

To

module.exports = {
  name: 'image-selection',
  exposes: {
    './Module': './apps/{appname}/src/remote-entry.ts',
  },
};

jaysoo · 2023-01-27T02:19:37Z

There is a context missing that needs to point to the app's root directory.

Something like this should work until we patch it in the next release.

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

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

const config = {
  ...baseConfig,
};

module.exports = composePlugins(
  withNx(),
  withReact(),
  withModuleFederation(config),
  config => {
     config.context = __dirname;
    return config;
  }
);

jonesy212 · 2023-01-27T03:11:24Z

I updated this in my remote. The project did build this time, but the error is still happening on my end now in the host also when I try to run the command 'pnpm nx serve host --devRemotes dashboard'

ERROR in ./apps/host/src/app/app.tsx 6:48-74
Module not found: Error: Can't resolve 'dashboard/Module' in 'path/to/apps/host/src/app'

webpack compiled with 1 error (198da9a27f713c31)
[ ready ] http://localhost:4200

I also just tried adding the context config @jaysoo with no change in the error.

jaysoo · 2023-01-27T03:26:04Z

Try this in the host. There is a problem handling the withModuleFederation in composePlugins right now.

const { withModuleFederation } = require('@nrwl/react/module-federation');
const baseConfig = require('./module-federation.config');

const defaultConfig = {
  ...baseConfig,
};

module.exports = withModuleFederation(defaultConfig);

jonesy212 · 2023-01-27T05:16:56Z

Currently removing the devkit is creating errors. Seems that there are a lot of changes happening from that upgrade creating breaking changes. Is there documentation for updating from 15.50 to 15.6. So as not to cross error conversations @jaysoo.

jaysoo · 2023-01-27T13:02:28Z

You should be able to use these configs.

Host:

const { withModuleFederation } = require('@nrwl/react/module-federation');
const baseConfig = require('./module-federation.config');

const defaultConfig = {
  ...baseConfig,
};

module.exports = withModuleFederation(defaultConfig);

Remote:


const { composePlugins, withNx } = require('@nrwl/webpack');
const { withModuleFederation } = require('@nrwl/react/module-federation');
const baseConfig = require('./module-federation.config');

const defaultConfig = {
  ...baseConfig,
};

module.exports = composePlugins(withModuleFederation(defaultConfig), config => {
  config.context = __dirname;
  return config;
});

jaysoo · 2023-01-27T13:02:46Z

See here https://github.com/jaysoo/issue14629

We should be able to patch it today.

Updated docs for webpack config: https://nx.dev/packages/webpack/documents/webpack-config-setup (we're still working on more docs).

jaysoo · 2023-01-27T13:04:52Z

Fix this here #14653

rathpc · 2023-01-27T14:58:24Z

Fix this here #14653

Thank you for the fast turnaround on this @jaysoo! Two questions for you:

Does the composePlugins function replace the need for webpack-merge if you have multiple configs you need to merge together or would that still serve a purpose as the former is exclusive to combining the plugins of the config only?
Do you know which release this will be included with?

jaysoo · 2023-01-27T15:23:11Z

composePlugins is specifically for Nx, where the exported functions have signature (config) => config, where as webpack-merge operates on the config object itself. You can use both in conjuction. (more docs are coming!)
We can release a patch today for 15.6.3.

rathpc · 2023-01-27T15:48:10Z

composePlugins is specifically for Nx, where the exported functions have signature (config) => config, where as webpack-merge operates on the config object itself. You can use both in conjuction. (more docs are coming!)

We can release a patch today for 15.6.3.

Ok, great thank you again!

jonesy212 · 2023-01-27T22:25:51Z

@jaysoo Thank you so much for your quick responses and turn around time. I also figured out one of the issues that may be happening as well. When you install a new workspace, there are no polyfills being created. In the example you provided, it does have them. I tried creating an empty workspace as well as an integrated one, then creating the host and remote dashboard. So if someone is starting from scratch, it will cause issues. Just wanted to point that out. There may be other files, but I stopped there when I came across that.

jaysoo · 2023-01-30T15:23:30Z

@jonesy212 The polyfills are not generated by default anymore. Modern browsers don't require them. We'll write a guide for how to enable polyfills for those that need them, but they aren't required for module federation to work.

15.6.3 is released and module federation is working with it. Following the guide is working again.

github-actions · 2023-03-03T01:56:35Z

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.

rathpc added the type: bug label Jan 25, 2023

AgentEnder added the scope: react Issues related to React support for Nx label Jan 26, 2023

AgentEnder assigned jaysoo Jan 26, 2023

jaysoo mentioned this issue Jan 27, 2023

fix(react): install @nrwl/web when module federation is used #14660

Merged

jaysoo closed this as completed Jan 30, 2023

github-actions bot added the outdated label Mar 3, 2023

github-actions bot locked as resolved and limited conversation to collaborators Mar 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

React Module Federation is broken from 15.4.6+ #14629

React Module Federation is broken from 15.4.6+ #14629

rathpc commented Jan 25, 2023 •

edited

Loading

Tassfighter commented Jan 26, 2023

jaysoo commented Jan 27, 2023

jonesy212 commented Jan 27, 2023

jaysoo commented Jan 27, 2023 •

edited

Loading

jonesy212 commented Jan 27, 2023

jaysoo commented Jan 27, 2023

jaysoo commented Jan 27, 2023 •

edited

Loading

jaysoo commented Jan 27, 2023

rathpc commented Jan 27, 2023

jaysoo commented Jan 27, 2023

rathpc commented Jan 27, 2023

jonesy212 commented Jan 27, 2023

jaysoo commented Jan 30, 2023

github-actions bot commented Mar 3, 2023

React Module Federation is broken from 15.4.6+ #14629

React Module Federation is broken from 15.4.6+ #14629

Comments

rathpc commented Jan 25, 2023 • edited Loading

Current Behavior

Expected Behavior

GitHub Repo

Steps to Reproduce

Nx Report

Failure Logs

Additional Information

Tassfighter commented Jan 26, 2023

jaysoo commented Jan 27, 2023

jonesy212 commented Jan 27, 2023

jaysoo commented Jan 27, 2023 • edited Loading

jonesy212 commented Jan 27, 2023

jaysoo commented Jan 27, 2023

jaysoo commented Jan 27, 2023 • edited Loading

jaysoo commented Jan 27, 2023

rathpc commented Jan 27, 2023

jaysoo commented Jan 27, 2023

rathpc commented Jan 27, 2023

jonesy212 commented Jan 27, 2023

jaysoo commented Jan 30, 2023

github-actions bot commented Mar 3, 2023

rathpc commented Jan 25, 2023 •

edited

Loading

jaysoo commented Jan 27, 2023 •

edited

Loading

jaysoo commented Jan 27, 2023 •

edited

Loading