Webpack 5 Module Federation Not Importing

user_3104482 0
Viewed 2027

i am trying to learn how webpack module federation works, but im not sure im understanding the concept correctly.

i have created a repository which i want to act like a "ui component library". is has the webpack config:

module.exports = {
  mode: 'production',
  entry: './src/index.ts',
  devtool: 'inline-source-map',
  output: {
    filename: 'remoteEntry.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: "umd",
    library: "glitr-ui",
  },
  externals: {
    react: 'react',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  plugins: [
    new ModuleFederationPlugin({
      name: "glitr-ui",
      filename: "remoteEntry.js",
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
  ]
};

i then created a separate repository that i can use to consume the export from the UI component library with the webpack config:

module.exports = {
    mode: 'production',
    entry: './src/index.ts',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true
    },

    module: {
        rules: [
            {
                test: /\.tsx?$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: 'glitr-web',
        }),
        new ModuleFederationPlugin({
            name: "glitr-web",
            filename: "remoteEntry.js",
            remotes: {
                'glitr-ui': "glitr-ui@https://glitr-io.github.io/glitr-ui/remoteEntry.js",
            },
            shared: {
                ...deps,
                react: {
                    singleton: true,
                    requiredVersion: deps.react,
                },
                "react-dom": {
                    singleton: true,
                    requiredVersion: deps["react-dom"],
                },
            },
        }),
    ],
};

but in the app when i try to import the library with:

import { Button } from 'glitr-ui';

when i run npm start i get the webpack compilation error:

Cannot find module 'glitr-ui' or its corresponding type declarations.

i can see the compiled output file, but it looks the same if i compile without the module federation plugin i dont know what change i should be expecting to understand how to debug this.

example repository to reproduce this issue can be found:

it might be worth knowing i am hosting both compiled statics on github pages. this is how i am trying to test if webpack is able to fetch the UI library from a url.

webpack-module-federation webpack-5 webpack
1 Answers

Looks like you missed exposes field.

UI component library:

{
   ...,
   plugins: [
     new ModuleFederationPlugin({
       name: "glitr-ui",
       filename: "remoteEntry.js",
       // below missed property
       exposes: {
         './Button': './pathToButtonComponent/Button',
       },
       shared: {
         ...deps,
         react: {
           singleton: true,
           requiredVersion: deps.react,
         },
         "react-dom": {
           singleton: true,
           requiredVersion: deps["react-dom"],
         },
       },
    }),
  ]
}

import from remote:

import Button from 'glitr-ui/Button';
user_66208810
Related