module-federation
shared context examples not working
i can't run this example project, error below here.
`lerna info Executing command in 2 packages: "yarn run start" @shared-context/app1: yarn run v1.22.4 @shared-context/app2: yarn run v1.22.4 @shared-context/app1: $ webpack-cli serve @shared-context/app2: $ webpack-cli serve @shared-context/app1: ℹ ｢wds｣: Project is running at http://localhost:3001/ @shared-context/app1: ℹ ｢wds｣: webpack output is served from / @shared-context/app1: ℹ ｢wds｣: Content not from webpack is served from /Users/ots/RepoProject/module-federation-examples-master/shared-context/app1/dist @shared-context/app2: ℹ ｢wds｣: Project is running at http://localhost:3002/ @shared-context/app2: ℹ ｢wds｣: webpack output is served from / @shared-context/app2: ℹ ｢wds｣: Content not from webpack is served from /Users/ots/RepoProject/module-federation-examples-master/shared-context/app2/dist
@shared-context/app1: (node:28924) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated. @shared-context/app1: BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
@shared-context/app1: Do changes to assets earlier, e. g. in Compilation.hooks.processAssets. @shared-context/app1: Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*. @shared-context/app1: ✖ ｢wdm｣: assets by chunk 972 KiB (id hint: vendors) @shared-context/app1: asset vendors-node_modules_react-dom_index_js.js 909 KiB [emitted] (id hint: vendors) @shared-context/app1: asset vendors-node_modules_react_index_js.js 62.8 KiB [emitted] (id hint: vendors) @shared-context/app1: asset main.js 393 KiB [emitted] (name: main) @shared-context/app1: asset node_modules_object-assign_index_js-node_modules_prop-types_checkPropTypes_js.js 8.22 KiB [emitted]
@shared-context/app1: asset src_bootstrap_js.js 4.19 KiB [emitted] @shared-context/app1: asset index.html 108 bytes [emitted] @shared-context/app1: runtime modules 21.8 KiB 15 modules @shared-context/app1: cacheable modules 1.24 MiB @shared-context/app1: modules by path ./node_modules/ 1.24 MiB 33 modules @shared-context/app1: modules by path ./src/*.js 795 bytes 3 modules @shared-context/app1: consume-shared-module modules 168 bytes @shared-context/app1: consume shared module (default) react@^16.13.1 (strict) (fallback: ./node_modules/react/index.js) 42 bytes [built] [code generated]
@shared-context/app1: consume shared module (default) react-dom@^16.13.1 (strict) (fallback: ./node_modules/react-dom/index.js) 42 bytes [built] [code generated] @shared-context/app1: consume shared module (default) @shared-context/shared-library@* (strict) 42 bytes [built] [code generated]
@shared-context/app1: consume shared module (default) react@^16.14.0 (strict) (fallback: ./node_modules/react/index.js) 42 bytes [built] [code generated]
@shared-context/app1: provide-module modules 84 bytes @shared-context/app1: provide shared module (default) [email protected] = ./node_modules/react-dom/index.js 42 bytes [built] [code generated]
@shared-context/app1: provide shared module (default) [email protected] = ./node_modules/react/index.js 42 bytes [built] [code generated]
@shared-context/app1: ./node_modules/webpack/hot/ sync nonrecursive ^./log$ 170 bytes [built] [code generated] @shared-context/app1: remote app2/Welcome 6 bytes (remote) 6 bytes (share-init) [built] [code generated] @shared-context/app1: external "app2@http://localhost:3002/remoteEntry.js" 42 bytes [built] [code generated] @shared-context/app1: WARNING in shared module @shared-context/shared-library @shared-context/app1: No required version specified and unable to automatically determine one. Unable to find required version for "@shared-context/shared-library" in description file (/Users/ots/RepoProject/module-federation-examples-master/shared-context/app1/package.json). It need to be in dependencies, devDependencies or peerDependencies. @shared-context/app1: ERROR in resolving fallback for shared module @shared-context/shared-library @shared-context/app1: Module not found: Error: Can't resolve '@shared-context/shared-library' in '/Users/ots/RepoProject/module-federation-examples-master/shared-context/app1/src' @shared-context/app1: webpack 5.18.0 compiled with 1 error and 1 warning in 2758 ms @shared-context/app1: ℹ ｢wdm｣: Failed to compile. @shared-context/app2: (node:28925) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated. @shared-context/app2: BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation. @shared-context/app2: Do changes to assets earlier, e. g. in Compilation.hooks.processAssets. @shared-context/app2: Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_. @shared-context/app2: ✖ ｢wdm｣: assets by chunk 1.02 MiB (id hint: vendors) @shared-context/app2: asset vendors-node_modules_react-dom_index_js.js 909 KiB [emitted] (id hint: vendors) @shared-context/app2: asset vendors-shared-library_node_modules_react_index_js.js 70.8 KiB [emitted] (id hint: vendors) @shared-context/app2: asset vendors-node_modules_react_index_js.js 62.8 KiB [emitted] (id hint: vendors) @shared-context/app2: asset main.js 389 KiB [emitted] (name: main) @shared-context/app2: asset remoteEntry.js 27.8 KiB [emitted] (name: app2) @shared-context/app2: asset node_modules_object-assign_index_js-node_modules_prop-types_checkPropTypes_js.js 8.22 KiB [emitted] @shared-context/app2: asset src_bootstrap_js.js 7.08 KiB [emitted] @shared-context/app2: asset src_Welcome_js.js 2.22 KiB [emitted] @shared-context/app2: asset index.html 129 bytes [emitted] @shared-context/app2: runtime modules 38.4 KiB 25 modules @shared-context/app2: cacheable modules 1.31 MiB @shared-context/app2: modules by path ./node_modules/ 1.24 MiB 33 modules @shared-context/app2: modules by path ../shared-library/ 65.6 KiB 7 modules @shared-context/app2: modules by path ./src/.js 945 bytes 4 modules @shared-context/app2: consume-shared-module modules 210 bytes 5 modules @shared-context/app2: provide-module modules 126 bytes @shared-context/app2: provide shared module (default) [email protected] = ./node_modules/react-dom/index.js 42 bytes [built] [code generated] @shared-context/app2: provide shared module (default) [email protected] = ./node_modules/react/index.js 42 bytes [built] [code generated] @shared-context/app2: provide shared module (default) [email protected] = ../shared-library/node_modules/react/index.js 42 bytes [built] [code generated] @shared-context/app2: container entry 42 bytes [built] [code generated] @shared-context/app2: ./node_modules/webpack/hot/ sync nonrecursive ^./log$ 170 bytes [built] [code generated] @shared-context/app2: WARNING in shared module @shared-context/shared-library @shared-context/app2: No required version specified and unable to automatically determine one. Unable to find required version for "@shared-context/shared-library" in description file (/Users/ots/RepoProject/module-federation-examples-master/shared-context/app2/package.json). It need to be in dependencies, devDependencies or peerDependencies. @shared-context/app2: ERROR in resolving fallback for shared module @shared-context/shared-library @shared-context/app2: Module not found: Error: Can't resolve '@shared-context/shared-library' in '/Users/ots/RepoProject/module-federation-examples-master/shared-context/app2/src' @shared-context/app2: webpack 5.18.0 compiled with 1 error and 1 warning in 3035 ms @shared-context/app2: ℹ ｢wdm｣: Failed to compile.`
any one can help me please?
same problem. I think share '@shared-context/shared-library' like the demo is impossible, webpack cannot resolve the library without any other config file but just a string. maybe the demo means after publish '@shared-context/shared-library' to registry, and share it like a normal library.
Its configured wrong. https://github.com/module-federation/module-federation-examples/pull/841/files#diff-4aa5f4917c5f3be52a4c6061e49644fb89128903d696e226f39227cf4bf67ceb
https://github.com/module-federation/module-federation-examples/pull/841/files#diff-2d89d129eff7032d60e0f3a34d2c98eb09fd25353057f262fd0d83a6fd328b39
seems to work
My bad, didnt add useEffect to reload the state on change. Works good now thanks.
@ScriptedAlchemy While this works with the example code, I get a strange behaviour with the same example converted to typescript. The Shared Context, defined in shared library doesn't download on the browser.
Working example:
Not Working example:
If you see, the shared context library is loaded in Network tab but in the Not working, its not.
Webpack config for working example
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack").container
.ModuleFederationPlugin;
const path = require("path");
module.exports = {
entry: "./src/index",
mode: "development",
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 3003,
},
output: {
publicPath: "auto",
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
presets: ["@babel/preset-react"],
},
},
],
},
plugins: [
new ModuleFederationPlugin({
name: "app1",
remotes: {
app2: "app2",
},
shared: [
"react",
"react-dom",
{
"@shared-context/shared-library": {
import: "@shared-context/shared-library",
requiredVersion: require("../shared-library/package.json").version,
},
},
],
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
],
};
Webpack config for Not working:
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack").container
.ModuleFederationPlugin;
const path = require("path");
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const deps = require('./package.json').dependencies;
module.exports = {
entry: "./src/index.tsx",
devtool: "eval-source-map",
resolve: {
extensions: [".ts", ".tsx", ".js"],
//@ts-ignore
plugins: [
new TsconfigPathsPlugin({
configFile: path.resolve(__dirname, "tsconfig.json"),
})
],
modules: [
path.join(__dirname, 'node_modules')
],
alias: {
react: path.resolve(path.join(__dirname, './node_modules/react')),
'react-dom': path.resolve(path.join(__dirname, './node_modules/react-dom'))
},
},
mode: "development",
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 3007,
},
output: {
publicPath: "auto",
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
options: {
transpileOnly: true
},
exclude: /dist/
},
{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /\.((c|sa|sc)ss)$/i,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: {
auto: true,
localIdentName: process.env.NODE_ENV === 'production' ? "[hash:base64]" : "[path][name]__[local]",
},
},
},
{
loader: "sass-loader",
},
],
},
{
test: /\.(png|jpg|gif|svg)$/,
use: ["file-loader"],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: ["file-loader"],
},
],
},
plugins: [
new ModuleFederationPlugin({
name: "app1",
remotes: {
app2: "app2",
},
// shared: [
// "react",
// "react-dom",
// {
// "@shared-context/shared-library": {
// import: "@shared-context/shared-library",
// requiredVersion: require("../shared-library/package.json").version,
// },
// },
// ],
shared: {
...deps,
react: { singleton: true, eager: true, requiredVersion: deps.react },
"react-dom": { singleton: true, eager: true, requiredVersion: deps["react-dom"] },
"@shared-context/shared-library/src": {
import: "@shared-context/shared-library/src",
requiredVersion: "0.0.1",
},
},
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
}),
],
};
In both the cases, shared library is in the nodemodules. In the Not Working case, the shared: format is different as with other shared lib format it keeps giving me the the infamous 'Uncaught Error: Shared module is not available for eager consumption: webpack/sharing/consume/default/react/react?1bb3' .
Another difference is all code in NotWorking is typescript.
Do you see any issue with webpack config for Module Federation?
This is fixed now after i apply same webpack config from the Typescript example. Thanks can close.
{ "@shared-context/shared-library": { import: "@shared-context/shared-library", requiredVersion: require("../shared-library/package.json").version, }, }, what is the significance of import here? Also, if the shared context library is already there in the dependencies of the package.json for both host and remote , do we need to add this even then?
Versioning mismatch between the two libraries & it's not marked as a singleton?
Are there any changes in the commands/way the servers are expected to run? I still am facing the same issue as mentioned at the start of this thread.
All I did was, I cloned the repo, Installed the packages at root (npm i using node 14.15) the after changing directory to shared-context install the deps, and same in app1, app2 separately.
And tried to bring up the server using npm start. tried to build (npm run build, same result)
@ScriptedAlchemy unrelated to shared context. I had two questions 1) is there a way to share tree shaken library and fallback to remote's version if the host contains different components in the tree shaken version.
- in normal scenario, the peer dependencies are loaded from the host or the application consuming a remote but when we consume remotes at runtime through module federation then do we have to share the peer dependencies or not.
We call it rexpoets. Basically you create a file that import exports whatever you manually shake.
No automatic solution though
We call it rexpoets. Basically you create a file that import exports whatever you manually shake.
No automatic solution though
Need a little more clarity here, would be great if you could point towards an existing example which is making use of this technique, if any.
When I run yarn build in app1, I still get these errors
$ webpack --mode production
assets by status 163 KiB [cached] 6 assets
runtime modules 20.3 KiB 14 modules
orphan modules 592 bytes [orphan] 1 module
built modules 132 KiB (javascript) 168 bytes (consume-shared) 90 bytes (share-init) 6 bytes (remote) [built]
javascript modules 132 KiB
modules by path ./node_modules/ 131 KiB 7 modules
modules by path ./src/ 795 bytes 2 modules
external "app2" 42 bytes [built] [code generated]
consume-shared-module modules 168 bytes 4 modules
provide-module modules 84 bytes
provide shared module (default) [email protected] = ./node_modules/react-dom/index.js 42 bytes [built] [code generated]
provide shared module (default) [email protected] = ./node_modules/react/index.js 42 bytes [built] [code generated]
remote app2/Welcome 6 bytes (remote) 6 bytes (share-init) [built] [code generated]
ERROR in resolving fallback for shared module @shared-context/shared-library
Module not found: Error: Can't resolve '@shared-context/shared-library' in '/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/src'
resolve '@shared-context/shared-library' in '/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/src'
Parsed request is a module
using description file: /home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/src/node_modules doesn't exist or is not a directory
looking for modules in /home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/node_modules
single file module
using description file: /home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/package.json (relative path: ./node_modules/@shared-context/shared-library)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/node_modules/@shared-context/shared-library doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/node_modules/@shared-context/shared-library.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/node_modules/@shared-context/shared-library.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/node_modules/@shared-context/shared-library.wasm doesn't exist
/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/node_modules/@shared-context/shared-library doesn't exist
looking for modules in /home/rafaelsevla/workspace/module-federation-examples/shared-context/node_modules
single file module
using description file: /home/rafaelsevla/workspace/module-federation-examples/shared-context/package.json (relative path: ./node_modules/@shared-context/shared-library)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/rafaelsevla/workspace/module-federation-examples/shared-context/node_modules/@shared-context/shared-library doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/rafaelsevla/workspace/module-federation-examples/shared-context/node_modules/@shared-context/shared-library.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/home/rafaelsevla/workspace/module-federation-examples/shared-context/node_modules/@shared-context/shared-library.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/home/rafaelsevla/workspace/module-federation-examples/shared-context/node_modules/@shared-context/shared-library.wasm doesn't exist
/home/rafaelsevla/workspace/module-federation-examples/shared-context/node_modules/@shared-context/shared-library doesn't exist
/home/rafaelsevla/workspace/module-federation-examples/node_modules doesn't exist or is not a directory
/home/rafaelsevla/workspace/node_modules doesn't exist or is not a directory
/home/rafaelsevla/node_modules doesn't exist or is not a directory
/home/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
ERROR in main.js from Terser
Unexpected token: operator (!==) [main.js:17,12]
at js_error (/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:548:11)
at croak (/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1272:9)
at token_error (/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1280:9)
at unexpected (/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:1286:9)
at expr_atom (/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:2523:9)
at maybe_unary (/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:3292:19)
at maybe_unary (/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:3287:57)
at expr_ops (/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:3343:24)
at maybe_conditional (/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:3348:20)
at maybe_assign (/home/rafaelsevla/workspace/module-federation-examples/shared-context/app1/node_modules/terser-webpack-plugin/node_modules/terser/dist/bundle.min.js:3425:20)
webpack 5.47.1 compiled with 2 errors in 2241 ms
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.```
Getting same error still for the sample example remote app2/Welcome 6 bytes (remote) 6 bytes (share-init) [built] [code generated] @shared-context/app1: ERROR in resolving fallback for shared module @shared-context/shared-library @shared-context/app1: Module not found: Error: Can't resolve '@shared-context/shared-library' in 'C:\D\new_workspace\GUI_dev_tools\module-federation-examples\shared-context\app1\src' @shared-context/app1: resolve '@shared-context/shared-library' in 'C:\D\new_workspace\GUI_dev_tools\module-federation-examples\shared-context\app1\src' @shared-context/app1: Parsed request is a module @shared-context/app1: using description file: C:\D\new_workspace\GUI_dev_tools\module-federation-examples\shared-context\app1\package.json (relative path: ./src) @shared-context/app1: Field 'browser' doesn't contain a valid alias configuration
Any one can help us?
Its exact same example shared in https://github.com/module-federation/module-federation-examples/tree/master/shared-context
To be able to use shared-library you first have to somehow bring it into your node_modules folder.
So either copy the shared-library directory into node_modules in both app1 and app2 or use for example npm link:
- In
shared-library:npm link - In
app1andapp2:npm link @shared-context/shared-library - Because
npm linkdoesn't work well with peer dependencies you also have to donpm install reactinsideshared-library.
Hi @ScriptedAlchemy , I have been trying to share local packages using this method but it doesn't work for me. I'm using craco with create-react-app, could it be the reason why it doesn't work? Thanks
@ScriptedAlchemy following were some of my doubts regarding shared library feature in mf:
-
Do we need to deploy the shared library code somewhere on a cdn / npm package or by just including the path in webpack config of the consumer apps , this lib gets bundled?
-
And every time we change something in lib, we will have to rebuild the consumer apps so as to use the latest version, right?
