question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Webpack 5 Module Federation not importing the remote package

See original GitHub issue

Hello.

I have a vanilla JS app and an Angular app. I am trying to link both these apps using module federation, both on my local environment. The following is webpack config file for vanilla js app which acts as remote

module.exports = {
    entry: ['./src/index.js'],
    output: {
        publicPath: config.get('publicPath')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: ['babel-loader'],
            }
        ]
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: path.resolve(__dirname, 'demo/index.html')
        }),
        new ModuleFederationPlugin({
            name: 'remote',
            exposes: {
                './createWidget': './src/index.js'
            }
        }),
    ],

    devServer: {
        host: "localhost.remote.org",
        port: 8080
    }
};

Started the webpack-dev-server, so hitting http://localhost.remote.org:8080/remote.js will give me the file. So this is the webpack of my Angular app which is consuming the remote app

module.exports = {
    devtool: 'source-map',
    context: __dirname,
    entry: {
        polyfills: './src/polyfills.ts',
        main: './src/main.ts'
    },
    ...
    ...
    plugins : [
        new ModuleFederationPlugin({
            name: "HostApp",
            remotes: {
                remote: "remote@http://localhost.finra.org:8080/remote.js",
            }
        }),
    ]
}

So when trying to import the remote dependency, I get TS2307 : Cannot find module error. Could anyone help me with fixing this?

import * as Widget from 'remote/createWidget'

NOTE : Tried asking on Stackoverflow and Gitter. Got no responses so I created an issue here

Issue Analytics

  • State:closed
  • Created a year ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
alexander-akaitcommented, May 1, 2022

You should mark this module as external, for example like you do with external jQuery https://stackoverflow.com/questions/32050645/how-to-use-jquery-with-typescript, sorry this question is not related to webpack

0reactions
webpack-botcommented, Aug 24, 2022

Issue was closed because of inactivity.

If you think this is still a valid issue, please file a new issue with additional information.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack 5 Module Federation Not Importing
i have created a repository which i want to act like a "ui component library". is has the webpack config: module.exports = {...
Read more >
Module Federation
It's not possible to use a remote module without a chunk loading operation. A chunk loading operation is usually an import() call, but...
Read more >
How to Use Module Federation with Re.Pack 3
The host app can only import remote modules and cannot have pre-defined 'exposes' or 'remotes' properties in Webpack config. However, MFEs can ...
Read more >
Setting up remote components and services with webpack ...
Once basic setup is done, we can extend the remote module to create remote components. Create a component in remote application (src/RemoteApp.tsx). import...
Read more >
module-federation-import-remote - NPM Package Overview
Allow Dynamic Imports of Remotely Exposed Modules Using Webpack Module Federation. Version: 1.0.17 was published by alex-vukov.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found