Our application is equipped with Parcel and utilizes a UI library consisting of react components. This UI library is built with Rollup and is privately published on NPM.
I've been attempting to transition our application to Parcel 2, but I'm facing an issue where Parcel is unable to locate the ESM version of the UI library in the dist folder. Upon inspection of the node_modules directory, I discovered that the dist folder of the UI library contains only one file: index.cjs.js.
What's perplexing is that the UI library is configured to generate both CJS and ESM formats along with sourcemaps. When I compile the project locally, Rollup generates both CJS and ESM files along with their respective sourcemaps: index.cjs.js, index.cjs.js.map, index.esm.js, and index.esm.js.map. It appears that either: (1) Yarn is publishing only the CJS version to NPM or (2) When the UI library is added to the application, only the CJS version is being built. Neither of these scenarios seem logical to me.
Below are excerpts from our package.json and rollup.config.js files:
{
"name": "@thecb/components",
"version": "4.0.23",
"description": "Common lib for CityBase react components",
"main": "dist/index.cjs.js",
"module": "dist/index.esm.js",
"source": "src/index.js",
"scripts": {
"storybook": "start-storybook",
"build": "rollup -cm"
},
import resolve from "rollup-plugin-node-resolve";
import commonjs from "rollup-plugin-commonjs";
import babel from "rollup-plugin-babel";
import json from "rollup-plugin-json";
import visualizer from "rollup-plugin-visualizer";
import pkg from "./package.json";
import * as formattedInput from "formatted-input";
const globals = {
react: "React",
"react-dom": "ReactDOM"
};
const plugins = [
resolve({ preferBuiltins: false }),
babel({
exclude: "node_modules/**",
presets: ["@babel/env", "@babel/preset-react"]
}),
json(),
commonjs({
include: "node_modules/**",
namedExports: {
"formatted-input": Object.keys(formattedInput)
}
}),
visualizer()
];
const external = [...Object.keys(pkg.peerDependencies || {})];
const output_data = [
{
file: pkg.main,
format: "cjs"
},
{
file: pkg.module,
format: "esm"
}
];
export default output_data.map(({ file, format }) => ({
input: "src/index.js",
output: {
file,
format,
globals
},
plugins,
external
}));
Can anyone shed light on why the ESM version of this library might not be getting published or installed?