Develop Reference

Library built with Webpack 5 not tree shakeable

I have a React component library that is built by webpack 5.75.0. The library exports 2 components:
// src/index.ts
export { default as ComponentA } from "components/ComponentA";
export { default as ComponentB } from "components/ComponentB";
A simple CRA app uses this library and imports only ComponentA. But when analyzing the bundle I see that ComponentB's dependencies are in it and have not been tree-shaken.
The parent app is just a CRA app with no config overrides. Tree shaking works there for other modules (MUI, lodash-es, etc), so the problem is with the my library.
I seem to have followed all requirements: in my package.json I do have
"sideEffects": false,
"main": "lib/index.js",
"module": "lib/index.js",
Here's my babel config:
module.exports = {
presets: [
["#babel/preset-env", { targets: { node: "current", modules: false } }],
"#babel/preset-typescript",
[
"#babel/preset-react",
{
runtime: "automatic",
},
],
],
plugins: [
"#babel/plugin-syntax-jsx",
[
"#babel/plugin-transform-runtime",
{
regenerator: true,
useESModules: true,
},
],
],
};
And here's my webpack config:
const config = {
mode: "production",
devtool: false,
entry: "./src/index.ts",
output: {
path: path.resolve(__dirname, "lib"),
filename: "index.js",
module: true,
library: {
type: "module",
},
},
plugins: [
//...
],
module: {
rules: [
//...
],
},
resolve: {
//...
},
externals: [
"react",
"react-dom",
],
experiments: {
outputModule: true,
},
optimization: {
minimize: false,
},
};
But still, the ComponentB's dependencies are showing up in the bundle of the CRA app that uses this library.
Am I missing something? Is there some official example of how to configure tree-shaking library with webpack 5?
Thanks.
P.S. My question relates to this question, but since 2021 it's become possible to build ES modules with Webpack 5.

How to extract all used polyfill from multiple libs by rollup?

I use rollup to create multiple libs, rollup config file as below:
import terser from '#rollup/plugin-terser';
import { nodeResolve } from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import { babel } from '#rollup/plugin-babel';
import eslint from '#rollup/plugin-eslint';
const distDir = "dist/libs"
const api = {
input: "src/libs/api/index.js",
external: ["axios"],
output: [
{
file: `${distDir}/api.umd.js`,
format: "umd",
name: 'Api',
globals: {axios: 'axios'}
},
{
file: `${distDir}/api.es.js`,
format: "es"
}
],
plugins: [
terser(),
babel({babelHelpers: 'runtime', exclude: 'node_modules/**'}),
nodeResolve({
browser:true,
}),
commonjs(),
eslint({
throwOnError: true,
throwOnWarning: true,
include: ['src/**'],
exclude: ['node_modules/**']
})
]
}
const test = {
...
}
export default ()=>{
return [
api, // it contains some polyfill
test // it also contains some polyfill
]
};
My .babelrc is:
{
"presets": [
["#babel/preset-env", {
"corejs": {"version": "3", "proposals": false},
"useBuiltIns": "usage"
}
]
],
"plugins": [
[
"#babel/plugin-transform-runtime"
]
]
}
Now, api and test contain some polyfill. Is there a way to extract the used polyfills of all modules to form a single umd file but not Full Function polyfill.Thank you.

webpack - cannot find module from dist bundle

So I'm trying to require dynamically from my node application a dist asset. And I'm getting the following error:
{"applicationLog":{"severity":"ERROR","timestamp":"2022-08-05T06:54:57.275Z","exception":{"type":"Error","message":"Cannot find module '/Users/lekoma/evelin/product-listing-fragment/dist/modern/fragment.js'","stack":"Error: Cannot find module '/Users/lekoma/evelin/product-listing-fragment/dist/modern/fragment.js'\n at webpackEmptyContext (webpack://product-listing-fragment/./node_modules/#jsmdg/react-fragment-scripts/server/_sync?:2:10)\n at getFragment (webpack://product-listing-fragment/./node_modules/#jsmdg/react-fragment-scripts/server/fragmentSsrRouter.js?:84:98)\n at createFragmentSsrRouter (webpack://product-listing-fragment/./node_modules/#jsmdg/react-fragment-scripts/server/fragmentSsrRouter.js?:121:20)\n at eval (webpack://product-listing-fragment/./node_modules/#jsmdg/react-fragment-scripts/server/createServer.js?:142:5)\n at Plugin.exec (/Users/lekoma/evelin/product-listing-fragment/node_modules/avvio/plugin.js:132:19)\n at Boot.loadPlugin (/Users/lekoma/evelin/product-listing-fragment/node_modules/avvio/plugin.js:274:10)\n at processTicksAndRejections (node:internal/process/task_queues:83:21)","code":"MODULE_NOT_FOUND"},"message":"Could not read fragment entry point"}}
The dist folder structure looks like following:
/dist/modern/fragment.js
The output of the node generated code is in a different folder:
build/server/index.js
Do you know who I could achieve to read dynamically from the dist folder?
source code node index.js
function getFragment(fragmentAssets) {
try {
const { Fragment } = require(path.join(
paths.clientOutputDirectory,
MODERN_BROWSER_STAGE || 'modern',
getFragmentEntryPointFromAssets(fragmentAssets), // the resolving path is correct, but the module could not be found/interpreted
));
return Fragment;
} catch (error) {
unpreparedLogger.withException(error).error('Could not read fragment entry point');
process.exit(1);
}
}
webpack config
module.exports = function webpackServerConfig() {
return {
target: 'node', // in order to ignore built-in modules like path, fs, etc.
mode: 'development',
externalsPresets: { node: true }, // in order to ignore built-in modules like path, fs, etc
externals: [
nodeExternals({
allowlist: [/#jsmdg\/react-fragment-scripts\/.*/, /#jsmdg\/yoshi\/.*/]
})], // in order to ignore all modules in node_modules folder
entry: {
server: {
import: paths.serverEntry,
filename: 'server/index.js',
},
shared: {
import: paths.sharedEntry,
filename: 'shared/index.js',
},
},
resolve: {
extensions: paths.moduleFileExtensions
.map(ext => `.${ext}`)
.filter(ext => useTypescript || !ext.includes('ts')),
},
output: {
path: paths.BFFOutputDirectory,
clean: true,
},
optimization: {
minimize: isEnvProduction,
minimizer: [new TerserPlugin()],
},
module: {
strictExportPresence: true,
rules: [
{
oneOf: [
{
test: /\.(js|jsx|ts|tsx)$/,
include: [
paths.clientSourceDirectory,
paths.sharedSourceDirectory,
paths.serverSourceDirectory,
/node_modules\/(#jsmdg\/react-fragment-scripts|#jsmdg\/yoshi)\/.*/,
],
exclude: [
isEnvProduction ? /__mock/ : undefined,
].filter(Boolean),
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
presets: [[require.resolve('../babel/server')]],
},
},
],
},
],
},
};
};

how can I exclude some folders containing .vue files from being built in vuejs?

module.exports = {
presets: [
'#vue/app'
],
module:{
rules: [
{
test: /\.vue$/,
exclude: [
'./src/components/Homepages/number1',
'./src/components/Homepages/number2'
]
}
]
}
}
I am trying to include just one of 'Homepages/number1', 'Homepages/number2', 'Homepages/number3' folders in my project conditionally and others shoud be excluded from the project when running npm run build to decrease my dist folder size. I am trying this code but I am sure its not the right solution. I am doing this config in babel.config.js.

One option is to use the Copy plugin:
module.exports = {
plugins: [
new CopyPlugin({
patterns: [
{
from: path.posix.join(
path.resolve(__dirname, "src").replace(/\\/g, "/"),
"**/*"
),
globOptions: {
ignore: [
// Ignore all `txt` files
"**/*.txt",
// Ignore all files in all subdirectories
"**/subdir/**",
],
},
},
],
}),
],
};

mini-css-extract-plugin generates two additional JS files

I'm using the following webpack.config.js file to build two CSS files (editor.css and style.css) and a JS file (block.build.js) making use of the mini-css-extract-plugin plugin:
// Load webpack for use of certain webpack tools and methods
const webpack = require( 'webpack' );
// For extracting CSS (and SASS) into separate files
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
// Define JavaScript entry points
const entryPointNames = [ 'blocks', 'frontend' ];
// Setup externals
const externals = {};
// Setup external for each entry point
entryPointNames.forEach( entryPointName => {
externals[ '#/lg6' + entryPointName ] = {
this: [ 'lg6', entryPointName ]
}
} );
// Define WordPress dependencies
const wpDependencies = [ 'components', 'element', 'blocks', 'utils', 'date' ];
// Setup externals for all WordPress dependencies
wpDependencies.forEach( wpDependency => {
externals[ '#wordpress/' + wpDependency ] = {
this: [ 'wp', wpDependency ]
};
});
// Start of main webpack config
const config = {
// Set mode
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
// Go through each entry point and prepare for use with externals
entry: {
index: './index.js',
style: './style.scss',
editor: './editor.scss',
},
// Include externals
externals,
// Set output
output: {
// Place all bundles JS in current directory
filename: 'block.build.js',
path: __dirname,
library: [ 'pluginnamespace', '[name]' ],
libraryTarget: 'this'
},
// Fall back to node_modules for file resolution
resolve: {
modules: [ __dirname, 'node_modules' ]
},
optimization: {
splitChunks: {
cacheGroups: {
editor: {
name: 'editor',
test: /editor\.(sc|sa|c)ss$/,
chunks: 'all',
enforce: true,
},
style: {
name: 'style',
test: /style\.(sc|sa|c)ss$/,
chunks: 'all',
enforce: true,
},
default: false,
},
},
},
module: {
rules: [
{
// Run JavaScript files through Babel
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
// Setup SASS (and CSS) to be extracted
test: /\.(sc|sa|c)ss$/,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
sourceMap: process.env.NODE_ENV !== 'production',
},
},
{
loader: 'postcss-loader',
options: {
plugins: [ require( 'autoprefixer' ) ]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: process.env.NODE_ENV !== 'production',
},
},
],
},
]
},
plugins: [
// Setup environment conditions
new webpack.DefinePlugin( {
'process.env.NODE_ENV': JSON.stringify(
process.env.NODE_ENV || 'development'
)
} ),
new MiniCssExtractPlugin( {
filename: './css/[name].css',
} ),
// For migrations from webpack 1 to webpack 2+
new webpack.LoaderOptionsPlugin( {
minimize: process.env.NODE_ENV === 'production',
debug: process.env.NODE_ENV !== 'production',
} )
],
// Do not include information about children in stats
stats: {
children: false
}
};
module.exports = config;
Everything is working as expected but, for some reason, in addition to the block.build.js file, I'm getting two more JS files named 0.block.build.js and 2.block.build.js with the following content:
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[,function(n,w,o){}]]);
My question is, why are these two additional files are being created and how can I avoid this?
Thanks in advance

You should remove these 2 line
style: './style.scss',
editor: './editor.scss',
Also you can import those 2 scss file in your index.js
import "style.scss";
import "editor.scss";
And mini-css-extract-plugin will take care the rest for you

As an alternative, if you don't want to import the scss files in your js files, I found you can use a webpack plugin such as Ignore Emit Webpack in your webpack.config.js file to prevent the creation of the extra js files:
const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');
module.exports = {
// ...
plugins: [
new IgnoreEmitPlugin(['0.block.build.js', '2.block.build.js'])
]
// ...
};