Related
**I have two single-spa projects (root-config, app-hello) and I need to create a build so that the file name is the same in both root-config and app-hello. The problem is that when I run the proteins separately in the build I get different dates in the file name and for this I am looking for a way to build them together **
Webpack app-hello
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const Dotenv = require('dotenv-webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const FilterWarningsPlugin = require('webpack-filter-warnings-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
const singleSpaDefaults = require('webpack-config-single-spa-react');
const override = require('./config-overrides.js');
module.exports = (webpackConfigEnv, argv) => {
const defaultConfig = singleSpaDefaults({
orgName: 'app',
projectName: 'hello',
webpackConfigEnv,
argv,
override,
});
return merge(defaultConfig, {
resolve: {
extensions: ['.ts', '.tsx', '.js'],
preferRelative: true,
alias: {
containers: path.resolve(__dirname, 'src/containers'),
components: path.resolve(__dirname, 'src/components'),
layouts: path.resolve(__dirname, 'src/layouts'),
stores: path.resolve(__dirname, 'src/stores'),
hooks: path.join(__dirname, 'src/hooks'),
context: path.join(__dirname, 'src/context'),
assets: path.join(__dirname, 'src/assets'),
helpers: path.join(__dirname, 'src/helpers'),
},
plugins: [new TsconfigPathsPlugin({ configFile: './tsconfig.json' })],
},
devServer: {
port: 8500,
},
plugins: [
new Dotenv({
path: './.env.development',
}),
new FilterWarningsPlugin({
exclude:
/There are multiple modules with names that only differ in casing/,
}),
new CleanWebpackPlugin(),
],
output: {
path: path.resolve(__dirname, 'build'),
filename: `app-chat-${Date.now()}.js`,
assetModuleFilename: 'assets/[name][ext]',
},
module: {
rules: [
{
test: /\.m?js/,
type: 'javascript/auto',
resolve: {
fullySpecified: false,
},
},
{
test: /\.js$|jsx/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.json$/,
use: 'json-loader',
},
{
test: /\.svg$/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['preact', 'env'],
},
},
{
loader: '#svgr/webpack',
options: { babel: false },
},
],
},
],
},
});
};
webpack root-config
const { merge } = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa-ts");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = (webpackConfigEnv, argv) => {
const orgName = "app";
const defaultConfig = singleSpaDefaults({
orgName,
projectName: "root-config",
webpackConfigEnv,
argv,
disableHtmlGeneration: true,
});
return merge(defaultConfig, {
plugins: [
new HtmlWebpackPlugin({
inject: false,
template: "src/index.ejs",
templateParameters: {
isLocal: webpackConfigEnv && webpackConfigEnv.isLocal,
orgName,
hash: Date.now(),
},
}),
],
});
};
index root-config
<script type="systemjs-importmap">
{
"imports": {
"react": "https://cdn.jsdelivr.net/npm/react#17.0.2/umd/react.production.min.js",
"react-dom": "https://cdn.jsdelivr.net/npm/react-dom#17.0.2/umd/react-dom.production.min.js",
"single-spa": "https://cdn.jsdelivr.net/npm/single-spa#5.9.0/lib/system/single-spa.min.js",
"#app/root-config": "https://login-7mpuan0pw5.s3.amazonaws.com/app-root-config.js",
"#app/chat": "https://login-7mpuan0pw5.s3.amazonaws.com/app-chat-<%= hash %>.js",
"#app/switcher": "https://login-7mpuan0pw5.s3.amazonaws.com/switcher/app-switcher-<%= hash %>.js"
}
}
</script>
When I import the react component for the next SSR, it gives an import error, what could be the matter? I don't want to use type module in package.json
Maybe I made a mistake somewhere.....I will be very grateful for your help
babel.rc
{
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript",
"#babel/register"
]
}
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const TerserWebpackPlugin = require("terser-webpack-plugin");
const CssMinimizerWebpackPlugin = require("css-minimizer-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const { getGlobals } = require("./config/get-globals");
const isDev = process.env.NODE_ENV === "development";
const isProd = !isDev;
const globals = getGlobals();
const optimization = () => {
const config = {
splitChunks: {
chunks: "all",
},
};
if (isProd) {
config.minimizer = [
new CssMinimizerWebpackPlugin(),
new TerserWebpackPlugin(),
];
}
return config;
};
const ClientConfig = {
entry: path.join(__dirname, "src", "index.jsx"),
output: {
path: path.join(__dirname, "build"),
filename: "[name].[contenthash].js",
},
mode: 'development' === process.env.NODE_ENV ? 'development' : 'production',
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "public", "index_template.ejs"),
favicon: "src/public/favicon.ico",
alwaysWriteToDisk: true,
minify: {
collapseWhitespace: isProd,
},
inject: false,
templateParameters: (options) => {
const js = Object.keys(options.assets)
.filter((el) => /\.js$/.test(el))
.map((el) => "/" + el);
const css = Object.keys(options.assets)
.filter((el) => /\.css$/.test(el))
.map((el) => "/" + el);
return {
css,
js,
globals,
};
},
}),
new HtmlWebpackPlugin({
inject: false,
minify: false,
template: path.resolve(__dirname, "config", "render-stats.js"),
filename: path.join(__dirname, "config", "build-stats.json"),
}),
new MiniCssExtractPlugin({
filename: "[name].[contenthash].css",
}),
new CleanWebpackPlugin(),
new CopyWebpackPlugin({
patterns: [
{
from: path.resolve(__dirname, "src", "public", "favicon.ico"),
to: path.resolve(__dirname, "build"),
},
],
}),
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: "ts-loader",
},
},
{
test: /\.(png|svg|jpg|gif|jpeg|ico)$/,
use: ["file-loader"],
},
{
test: /\.(ttf|woff|woff2|eot)$/,
use: ["file-loader"],
},
{
test: /\.xml$/,
use: ["xml-loader"],
},
{
test: /\.csv$/,
use: ["csv-loader"],
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: true,
},
},
],
},
{
test: /\.ejs$/,
use: { loader: "ejs-compiled-loader", options: {} },
},
],
},
resolve: {
extensions: [".js", ".jsx", ".ejs", ".tsx", ".ts"],
},
devServer: {
port: 3007,
hot: isDev,
},
optimization: optimization(),
};
module.exports = [ClientConfig];
server.js
const express = require("express");
const fs = require("fs");
const path = require("path");
// create express application
const app = express();
// import App component
const { App } = require("../src/components/app.tsx");
app.use("*", (req, res) => {
let indexHTML = fs.readFileSync(path.resolve(__dirname, "../build/index.html"), {
encoding: "utf8"
});
// set header and status
res.contentType("text/html");
res.status(200);
return res.send(indexHTML);
});
// run express server on port 9000
app.listen("9000", () => {
console.log("Express server started at http://localhost:9000");
});
Error
import * as React from "react";
^^^^^^
SyntaxError: Cannot use import statement outside a module
Use this configuration for compile server filewebpack.server.config.js
const path = require('path');
const nodeExternals = require('webpack-node-externals');
module.exports = {
entry: './src/server/index.js',
target: 'node',
externals: [nodeExternals()],
output: {
path: path.resolve(__dirname, './dist/server'),
filename: 'server.js'
},
resolve : {
extensions : [".js",".jsx"],
},
module: {
rules: [
{
test: /\.jsx?/,
use: 'babel-loader'
}
]
}
};
I'm developing a microfront with single-spa-vue and Vue 2.6.12 and it's not working at all.
I'm using webpack module federation plugin.
This is my entry point.
src/app.ts
import singleSpaVue from 'single-spa-vue';
import Vue from 'vue';
import Main from './Main.vue';
import router from './router';
const lifecycles = singleSpaVue({
Vue,
appOptions: {
render(h: any) {
return h(Main as any);
},
router,
} as any,
});
export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;
This is my webpack.config.js file
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin')
const StandaloneSingleSpaPlugin = require('standalone-single-spa-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader')
const path = require('path');
const outputPath = path.resolve(__dirname, 'dist');
module.exports = {
entry: './src/index',
cache: false,
mode: 'development',
devtool: 'source-map',
optimization: {
minimize: false,
},
output: {
publicPath: 'http://localhost:3002/',
},
resolve: {
extensions: ['.js', '.ts', '.json', '.vue'],
alias: {
'~' : path.resolve(__dirname, 'node_modules')
}
},
devServer: {
headers: {
"Access-Control-Allow-Origin": "*",
},
contentBase: outputPath,
disableHostCheck: true,
historyApiFallback: true,
},
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'vue-style-loader',
'style-loader',
'css-loader',
'sass-loader',
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
},
{
test: /\.ts?$/,
loader: 'ts-loader',
options: {
appendTsSuffixTo: [/\.vue$/],
},
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin(),
new StandaloneSingleSpaPlugin({
// required
appOrParcelName: "body",
// optional - strongly encouraged for single-spa applications
activeWhen: ['/'],
// optional - defaults to true - turns on or off import-map-overrides.
importMapOverrides: true,
}),
new VueLoaderPlugin(),
new ModuleFederationPlugin({
name: 'content',
library: { type: 'var', name: 'content' },
filename: 'remoteEntry.js',
remotes: {
content: 'content'
},
exposes: {
Content: './src/app',
},
}),
],
}
And this is my index.ts file
src/index.ts
import { start, registerApplication } from 'single-spa'
registerApplication({
name: 'content',
app: () => import('content/Content' as any),
activeWhen: '/',
},)
start()
And when I run yarn start and go to localhost:3002 this is the error.
error image
Does anyone can help me plz?
Thanks!
Well，may be u mixing the relationship with the host container and remote container, I saw your ModuleFederationPlugin config that special remotes and name is same, it seen like not correct.
Recently we have updated webpack to v4 and soon noticed unexpected errors from webpack during development, which disappears after rebuild of entire bundle.
Our application build using lazy loading and code splitting, which can cause the issue, though I couldn't find anything related to this in the official documentations.
Here the error we get
react_devtools_backend.js:2273 TypeError: Cannot read property 'call' of undefined
our webpack webpack.config.js file.
const webpack = require('webpack');
const path = require('path');
const glob = require('glob');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const AssetsPlugin = require('assets-webpack-plugin');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
// minification plugins
const TerserJSPlugin = require('terser-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
// image optimization plugins
const ImageminPlugin = require("imagemin-webpack-plugin").default;
const imageminGifsicle = require("imagemin-gifsicle");
const imageminPngquant = require("imagemin-pngquant");
const imageminSvgo = require("imagemin-svgo");
const imageminMozjpeg = require('imagemin-mozjpeg');
const env = require('dotenv').config();
const isProd = process.env.NODE_ENV === 'production';
const isDev = !isProd;
const environment = {
NODE_ENV: process.env.NODE_ENV || 'development',
CONFIG: process.env.CONFIG || 'development',
DEBUG: process.env.DEBUG || false,
};
const plugins = () => {
let plugins = [
new CleanWebpackPlugin(['build', 'cachedImages'], {
root: path.resolve(__dirname, '../dist'),
verbose: true,
dry: false,
}),
new webpack.EnvironmentPlugin(Object.assign(environment, env.parsed)),
new MiniCssExtractPlugin('[chunkhash:5].[name].[hash].css'),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
moment: 'moment',
_: 'lodash',
}),
new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en)$/),
new AssetsPlugin({
filename: 'assets.json',
}),
new ImageminPlugin({
cacheFolder: isDev ? path.resolve(__dirname, '../dist/cachedImages') : null,
externalImages: {
context: 'src',
sources: glob.sync('src/assets/img/**/*.*'),
destination: 'dist/img/',
fileName: (filepath) => {
let name = filepath.split(/img(\/|\\)/).pop();
return name;
},
},
plugins: [
imageminGifsicle({
interlaced: false
}),
imageminMozjpeg({
progressive: true,
arithmetic: false
}),
imageminPngquant({
floyd: 0.5,
speed: 2
}),
imageminSvgo({
plugins: [
{ removeTitle: true },
{ convertPathData: false }
]
}),
],
}),
];
if (isProd) {
plugins.push(
new BundleAnalyzerPlugin({
analyzerMode: 'static',
reportFilename: path.resolve(__dirname, 'analysis.html'),
generateStatsFile: false,
logLevel: 'info',
})
);
}
return plugins;
};
const optimization = () => {
let optimizations = {
concatenateModules: true,
splitChunks: {
cacheGroups: {
vendor: {
name: 'vendor',
test: /[\\/]node_modules[\\/](react|react-dom|lodash|moment)[\\/]/,
chunks: 'all',
},
commons: {
chunks: 'async',
}
}
}
};
if (isProd) {
optimizations.minimizer = [
new TerserJSPlugin({
terserOptions: {
compress: {
pure_funcs: ['console.log'],
drop_console: true,
drop_debugger: true
},
warnings: false
},
parallel: true
}),
new OptimizeCSSAssetsPlugin({})
];
}
return optimizations;
};
const fontLoaders = [
{
test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url?limit=10000&mimetype=application/font-woff',
}
},
{
test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url?limit=10000&mimetype=application/font-woff',
}
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url?limit=10000&mimetype=application/octet-stream',
}
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'url?limit=10000&mimetype=image/svg+xml',
}
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: {
loader: 'file',
}
}
];
const config = {
mode: process.env.NODE_ENV,
devtool: isDev ? 'source-map' : '',
context: path.resolve(__dirname, '../src'),
entry: {
bundle: './app.jsx',
embed: './embed.jsx',
styles: './sass_new/main.scss',
vendor: [
'react',
'react-dom',
'redux',
'redux-saga',
'react-redux',
'react-router',
'react-tap-event-plugin',
'lodash',
'moment',
]
},
output: {
publicPath: '/build/',
filename: '[name].[hash].js',
chunkFilename: '[name].[hash].js',
path: path.resolve(__dirname, '../dist/build'),
},
resolve: {
extensions: ['.js', '.jsx', '.json'],
alias: {
config: path.resolve(__dirname, '../config.js'),
utils: path.resolve(__dirname, '../src/utils'),
shared: path.resolve(__dirname, '../src/components/shared'),
services: path.resolve(__dirname, '../src/services'),
store: path.resolve(__dirname, '../src/store'),
constants: path.resolve(__dirname, '../src/constants'),
actions: path.resolve(__dirname, '../src/actions'),
components: path.resolve(__dirname, '../src/components'),
},
},
optimization: optimization(),
plugins: plugins(),
module: {
rules: [
{
test: /\.jsx?$/,
exclude: [/node_modules/, /libs/],
use: {
loader: path.join(__dirname, '../helpers/custom-loader.js'),
options: {
presets: ['#babel/preset-env', '#babel/preset-react'],
plugins: [
'#babel/plugin-proposal-object-rest-spread',
'#babel/plugin-proposal-class-properties',
'#babel/plugin-transform-destructuring',
'#babel/plugin-syntax-dynamic-import',
'#babel/plugin-transform-runtime',
'syntax-async-functions'
]
}
}
},
{
test: /\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader
},
'css-loader',
'sass-loader',
]
},
{
test: /\.css$/,
use: [
'css-loader'
]
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: "url-loader",
options: {
name: "[path][name].[ext]"
},
},
...fontLoaders
]
},
watchOptions: {
ignored: /node_modules/,
},
};
module.exports = config;
I have no idea how to fix this, and it's taking a lot of time to rebuild entire app after getting this error.
I'm workign in a react app using webpack 2 to bundle JS files.
I'm trying to deploy this app in a production enviroment now, but when i deploy the static content in NGinx the CSS doesn't load.
This works fine in dev enviroment. Somone could helpe to solve this problem?
webpack.common.js
/* eslint-disable */
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
/* eslint-enable */
const ExtractNormalCSS = new ExtractTextPlugin("app.css")
const ExtractCriticalCSS = new ExtractTextPlugin("styles/style_crit.css")
module.exports = () => {
return {
entry: ['./src/main/webapp/app/index'],
node: {
fs: "empty"
},
resolve: {
extensions: [
'.js', '.jsx', '.json'
],
modules: ['node_modules']
},
module: {
rules: [
{
test: /\.json/,
loaders: ['json-loader']
},
{
test: /\.css/i,
exclude: /\.crit.css/,
loaders: ExtractNormalCSS.extract({ fallback: 'style-loader', use: 'css-loader' })
},
{
test: /\.crit.css/i,
loaders: ExtractCriticalCSS.extract({ fallback: 'style-loader', use: 'css-loader' })
},
{
test: /\.scss/i,
exclude: /\.crit.css/,
loaders: ExtractNormalCSS.extract({ fallback: 'style-loader', use: ['css-loader', 'postcss-loader', 'sass-loader'] })
},
{
test: /\.mp4'$/,
loader: 'url-loader?limit=100000'
},
{
test: /\.(jpe?g|png|gif|svg|woff|woff2|ttf|eot)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', {
loader: 'image-webpack-loader',
query: {
gifsicle: {
interlaced: false
},
optipng: {
optimizationLevel: 7
}
}
}
]
}
]
},
plugins: [
new CopyWebpackPlugin([
{
from: './node_modules/swagger-ui/dist',
to: 'swagger-ui/dist'
}, {
from: './src/main/webapp/swagger-ui/',
to: 'swagger-ui'
}, {
from: './src/main/webapp/static/',
to: 'static'
}, {
from: './src/main/webapp/favicon.ico',
to: 'favicon.ico'
}, {
from: './src/main/webapp/robots.txt',
to: 'robots.txt'
}
]),
new HtmlWebpackPlugin({
template: './src/main/webapp/index.html',
chunksSortMode: 'dependency',
inject: 'body'
}),
//new ExtractTextPlugin('styles.css'),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery'
}),
ExtractNormalCSS,
ExtractCriticalCSS
]
};
};
webpack.prod.js
/* eslint-disable */
const path = require('path');
const webpack = require('webpack');
// const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
/* eslint-enable */
module.exports = webpackMerge(commonConfig(), {
devtool: 'source-map',
output: {
path: path.resolve('./target/www'),
filename: '[name].js'
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors',
minChunks(module) {
return (module.resource && module.resource.indexOf(path.resolve('node_modules')) === 0);
}
}),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
// this conflicts with -p option
new webpack.optimize.UglifyJsPlugin({
compressor: {
warnings: false
}
})
],
module: {
rules: [
{
enforce: 'pre',
test: /\.css$/,
loader: 'stripcomment-loader'
},
{
test: /\.js[x]?$/,
loaders: ['react-hot-loader', 'babel-loader?cacheDirectory'],
exclude: /node_modules/,
include: path.resolve('./src/main/webapp/app')
}
]
}
});
webpack.dev.js
/* eslint-disable */
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpackMerge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
/* eslint-enable */
module.exports = webpackMerge(commonConfig(), {
devtool: 'inline-source-map',
output: {
path: path.resolve('./target/www'),
filename: 'app.js'
},
plugins: [
new webpack.NoEmitOnErrorsPlugin(),
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
})
],
module: {
rules: [
{
test: /\.js[x]?$/,
loaders: ['react-hot-loader', 'babel-loader?cacheDirectory'],
exclude: /node_modules/,
include: path.resolve('./src/main/webapp/app')
}
]
},
devServer: {
contentBase: './target/www',
proxy: [
{
context: [
'/api', '/management', '/swagger-resources', '/v2/api-docs', '/h2-console'
],
target: 'http://127.0.0.1:8080/cond21cloud',
secure: false
}, {
context: ['/websocket'],
target: 'ws://l27.0.0.1:8080/cond21cloud',
ws: true
}
]
}
});