Bundler error when installing packages via npm that contain react package

[paulm17]

Steps to reproduce

Clone repo: https://github.com/paulm17/charizardxx-app

• npm i
• npm run dev

Current behavior

The error:

Uncaught Error: @pigment-css/react: You were trying to call "css" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.

Despite it being in use.

Remove the "charizardxx" UI lib and pigment-css will continue to operate just fine. The issue is for whatever reason, the pigment-css/react page is perhaps running before the vite-plugin package?

I have also tested this with nextjs and I have the same issue. (can create next repo, if requested)

Expected behavior

There should be no bundler error.

Context

I have built a custom UI library to be built installed via npm.

A minimal production of the UI library using pigment-css is here:

https://github.com/paulm17/charizardxx

Search keywords: rollup, build process

[paulm17]

I moved over to using tsup. I still get the same issue.

Btw, for my UI lib. I'm using yarn workspace:

Here is moving to a pnpm workspace:

Here is using a basic vite app via npmjs modules.

I've reached an impasse here as both tsup and rollup show the same issue. Both yarn and pnpm show the same issue.

Any help really appreciated! Thanks

[paulm17]

After trying all day. I decided to clone the mantine repo. Pair it down to the essentials and take 1 component and convert it to pigment-css.

It works (in dev mode). Tomorrow I will see whether I can make an npm package and see what the result is.

After that. I'll do a postmortem and see if I can find anything. I can't understand why my other repos just don't work in dev nor pushing to npm. But then I have 1 repo which does work in dev and not when pushing to npm.

What's the issue here? 🤔

[paulm17]

I built the packages and put on NPM. Here is the result.

2 different repos, 2 different package managers, 2 different bundlers. Same result. There is definitely an issue here. It's not possible to bundle pigment-css in a UI lib.

[paulm17]

Just tried with the latest version v0.0.27. Going to take a step back from this. I'm just not able to solve it or debug this at all.

[brijeshb42]

If using a Pigment CSS package in your library, you need to tell pigment to transform code from node_modules for your library. By default, any code from node_modules is ignored -

pigment({
  theme,
  transformLibraries: ["@charizardxx/core"],
})

If other packages also use Pigment CSS API, you can just specify @charizadxx instead.

[paulm17]

@brijeshb42 Thank you! This has cleared the issue. I'm very new to Vite and never saw this in my googling. 😩

Edit: Please update the Vite documentation. I completely missed that the NextJS config had this and for whatever reason I was blind to it. 😦

One new issue however. When vite starts up:

undefined: You have specified "@charizardxx/core" in "transformLibraries" but it is not installed.

if (lib !== MATERIAL_WRAPPER_LIB) {
   console.warn(
      `${process.env.PACKAGE_NAME}: You have specified "${lib}" in "transformLibraries" but it is not installed.`,
   );
}

Might be worth adjusting that for those who aren't using MUI.

Thanks