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.

SyntaxError: Cannot use import statement outside a module - jest

I am using jest testing framework in my custom framework that builds upon react, and, babel.
when I run the command "npm run test". I am getting the below error.
/homes/akapil/ui_new/ui/portal/local-deps/slipstream-components/node_modules/antd/es/checkbox/index.js:1
({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import Checkbox from './Checkbox';
^^^^^^
SyntaxError: Cannot use import statement outside a module
1 | import Checkbox, { CheckboxChangeEvent } from 'antd/es/checkbox';
| ^
2 | import 'antd/es/checkbox/style';
3 | import React, { Component } from 'react';
4 |
at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
at Object. (portal/local-deps/slipstream-components/src/components/SCheckbox/SCheckbox.tsx:1:1)
My jest.config.js
module.exports = {
"roots": [
"<rootDir>/plugins"
],
"collectCoverageFrom": [
"plugins/**/*.{js,jsx,ts,tsx}",
"!plugins/**/*.d.ts"
],
"setupFiles": [
"<rootDir>/node_modules/react-app-polyfill/jsdom.js"
],
"setupFilesAfterEnv": [
"<rootDir>/setupTests.js"
],
"testMatch": [
"<rootDir>/plugins/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/plugins/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jsdom",
"testRunner": "<rootDir>/node_modules/jest-circus/runner.js",
"transform": {
"^.+\\.(js|jsx|mjs|cjs|ts|tsx)$": "<rootDir>/node_modules/react-app-rewired/scripts/utils/babelTransform.js",
"^.+\\.css$": "<rootDir>/node_modules/react-scripts/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)": "<rootDir>/node_modules/react-scripts/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"/node_modules/(?!(slipstream-components)/).*/"
],
"modulePaths": [],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
],
"resetMocks": true,
// "rootDir": "<rootDir>/plugins"
}

JavaScript - jest-haste-map: Haste module naming collision: {{name}}

I'm getting the following error when I run npm run test:
jest-haste-map: Haste module naming collision: {{name}}
The following files share their name; please adjust your hasteImpl:
* <rootDir>/packages/some-package/templates/js/package.json
* <rootDir>/packages/some-package/templates/ts/package.json
My jest.config looks like
module.exports = {
collectCoverage: true,
setupFiles: ['<rootDir>/jest.setup.js'],
preset: 'ts-jest',
testEnvironment: 'jsdom',
collectCoverageFrom: [
'<rootDir>/packages/**/__tests__/**/*.ts',
'!<rootDir>/packages/**/templates/**/*.ts',
],
testMatch: [
'<rootDir>/packages/**/*.test.ts'
],
transform: {
'^.+\\.js?$': '<rootDir>/node_modules/babel-jest'
},
testPathIgnorePatterns: [
'/node_modules/',
],
coveragePathIgnorePatterns: [
'/node_modules/',
],
projects: [
'<rootDir>/packages/*/jest.config.js'
]
};
Not sure what the warning is, and how I can fix it.

I got this warning as a result of package.json existing in my root directory and in my build directory. I was able to get rid of it by specifying that I only want Jest to look for tests in src by adding the following to my package.json:
"jest": {
"roots": ["src"]
}

Jest - SyntaxError: Unexpected identifier

Doing some testing of some NodeJS functions using Jest, but it doesn't like import statements, e.g. import DatabaseController from '../util/database-controller'.
I've doing some reading and people suggested installing babel-jest and updating my config (below), but I've not had any luck. What am I missing? From what I understand, it doesn't understand import statements as it's an es6 thing...
Jest part of my package.json:
"jest": {
"collectCoverageFrom": [
"src/**/*.{js,jsx}"
],
"resolver": "jest-pnp-resolver",
"setupFiles": [
"react-app-polyfill/jsdom"
],
"testMatch": [
"<rootDir>/**/__tests__/**/*.{js,jsx}",
"<rootDir>/**/?(*.)(spec|test).{js,jsx}"
],
"testEnvironment": "jsdom",
"testURL": "http://localhost",
"transform": {
"^.+\\.jsx?$": "babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$",
"^.+\\.module\\.(css|sass|scss)$"
],
"moduleNameMapper": {
"^react-native$": "react-native-web",
"^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
},
"moduleFileExtensions": [
"web.js",
"js",
"json",
"web.jsx",
"jsx",
"node"
]
},

Lately I find that I don't need babel-jest at all, and can get by simply with #babel/preset-env, and the following .babelrc:
{
"env": {
"test": {
"presets": [["#babel/preset-env"]]
}
}
}

This worked for my simple set-up:
devDependencies (in package.json):
"devDependencies": {
"babel-eslint": "^10.0.3",
"babel-preset-env": "^1.7.0",
"jest": "^24.9.0",
"parcel-bundler": "^1.12.3"
}
I simply created a babel.config.js as follows:
// babel.config.js
module.exports = {
presets: [
[
'#babel/preset-env',
{
targets: {
node: 'current',
},
},
],
],
};
Note - make sure to clear the cache before running!
Clear cache:
./node_modules/.bin/jest --clearCache