Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bundler error when installing packages via npm that contain react package #317

Open
paulm17 opened this issue Nov 11, 2024 · 6 comments
Open
Assignees
Labels
status: waiting for maintainer These issues haven't been looked at yet by a maintainer vite

Comments

@paulm17
Copy link

paulm17 commented Nov 11, 2024

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 paulm17 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 11, 2024
@paulm17 paulm17 changed the title Bundler error when installing packages via npm that contain react package Rollup: Bundler error when installing packages via npm that contain react package Nov 12, 2024
@paulm17
Copy link
Author

paulm17 commented Nov 12, 2024

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

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

yarn repo

Here is moving to a pnpm workspace:

pnpm repo

Here is using a basic vite app via npmjs modules.
via npm

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 paulm17 changed the title Rollup: Bundler error when installing packages via npm that contain react package Bundler error when installing packages via npm that contain react package Nov 12, 2024
@paulm17
Copy link
Author

paulm17 commented Nov 12, 2024

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.

Image

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
Copy link
Author

paulm17 commented Nov 13, 2024

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.

Image

@paulm17
Copy link
Author

paulm17 commented Nov 13, 2024

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.

@zannager zannager added the vite label Nov 13, 2024
@brijeshb42 brijeshb42 added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Nov 14, 2024
@brijeshb42
Copy link
Contributor

brijeshb42 commented Nov 14, 2024

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
Copy link
Author

paulm17 commented Nov 14, 2024

@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

@github-actions github-actions bot added status: waiting for maintainer These issues haven't been looked at yet by a maintainer and removed status: waiting for author Issue with insufficient information labels Nov 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
status: waiting for maintainer These issues haven't been looked at yet by a maintainer vite
Projects
None yet
Development

No branches or pull requests

4 participants