I made this webpack module federation microfrontend project that consists a vue project that contains a vue component that should be displayed in another vue project.
So I have a vue component like this and it doesn’t get displayed:
<div class="column is-6 is-offset-3">
<div class="box">
<div class="block">
<h1 class="title">Title</h1>
</div>
<div class="columns">
<div class="column has-text-grey">by x</div>
<div class="column has-text-grey">12/12/32 12:34</div>
</div>
<div class="block">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
voluptatem harum praesentium quas voluptatibus nostrum debitis totam
tempore, et dolor unde incidunt hic recusandae ipsa facilis quaerat
quod sequi nulla?
</div>
<div class="block">
<div class="tags">
<span class="tag">tag </span>
<span class="tag">tag </span>
<span class="tag">tag </span>
<span class="tag">tag </span>
</div>
</div>
</div>
</div>
</div>
I have noticed that if I remove some divs it does eventually get displayed, like this:
<template>
<div class="columns">
<div class="column is-6 is-offset-3">
<div class="box">
<div class="block">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa
voluptatem harum praesentium quas voluptatibus nostrum debitis totam
tempore, et dolor unde incidunt hic recusandae ipsa facilis quaerat
quod sequi nulla?
</div>
</div>
</div>
</div>
</template>
Is there a limit?, how can I change it?
this are the webpack configs:
for the project that provides data:
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = require("webpack").container;
module.exports = (env = {}) => ({
mode: "development",
cache: false,
devtool: "source-map",
optimization: {
minimize: false,
},
target: "web",
entry: path.resolve(__dirname, "./src/main.js"),
// output: {
// path: path.resolve(__dirname, './dist'),
// publicPath: '/dist/'
// },
output: {
publicPath: "auto",
},
resolve: {
extensions: [".vue", ".jsx", ".js", ".json"],
alias: {
// this isn't technically needed, since the default `vue` entry for bundlers
// is a simple `export * from '@vue/runtime-dom`. However having this
// extra re-export somehow causes webpack to always invalidate the module
// on the first HMR update and causes the page to reload.
vue: "@vue/runtime-dom",
},
},
module: {
rules: [
{
test: /.vue$/,
use: "vue-loader",
},
{
test: /.png$/,
use: {
loader: "url-loader",
options: { limit: 8192 },
},
},
{
test: /.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {},
},
"css-loader",
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
new ModuleFederationPlugin({
name: "home",
filename: "remoteEntry.js",
remotes: {
home: "home@http://localhost:8002/remoteEntry.js",
},
exposes: {
"./Content": "./src/components/Content",
"./Button": "./src/components/Button",
"./Post": "./src/components/Post",
"./Test": "./src/components/Test"
},
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./index.html"),
}),
new VueLoaderPlugin(),
],
devServer: {
static: {
directory: path.join(__dirname),
},
compress: true,
port: 8002,
hot: true,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers":
"X-Requested-With, content-type, Authorization",
},
},
});
For the project that reads data:
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = require("webpack").container;
module.exports = (env = {}) => ({
mode: "development",
cache: false,
devtool: "source-map",
optimization: {
minimize: false,
},
target: "web",
entry: path.resolve(__dirname, "./src/main.js"),
output: {
publicPath: "auto",
},
resolve: {
extensions: [".vue", ".jsx", ".js", ".json"],
alias: {
// this isn't technically needed, since the default `vue` entry for bundlers
// is a simple `export * from '@vue/runtime-dom`. However having this
// extra re-export somehow causes webpack to always invalidate the module
// on the first HMR update and causes the page to reload.
vue: "@vue/runtime-dom",
},
},
module: {
rules: [
{
test: /.vue$/,
use: "vue-loader",
},
{
test: /.png$/,
use: {
loader: "url-loader",
options: { limit: 8192 },
},
},
{
test: /.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {},
},
"css-loader",
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
new ModuleFederationPlugin({
name: "layout",
filename: "remoteEntry.js",
remotes: {
home: "home@http://localhost:8002/remoteEntry.js",
},
exposes: {},
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname, "./index.html"),
chunks: ["main"],
}),
new VueLoaderPlugin(),
],
devServer: {
static: {
directory: path.join(__dirname),
},
compress: true,
port: 8001,
hot: true,
headers: {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
"Access-Control-Allow-Headers":
"X-Requested-With, content-type, Authorization",
},
},
});
