Webpack 5 Module Federation not importing the remote package
See original GitHub issueHello.
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:
- Created a year ago
- Comments:6 (4 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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
Issue was closed because of inactivity.
If you think this is still a valid issue, please file a new issue with additional information.