Astro support?

[blimey85]

I've been using this in my Next.js projects and it works great. I'm working on an Astro project right now and can't get it to work, even though I have React loaded into Astro. This is my first Astro project and from what I have read, some React stuff works and some doesn't with Astro.

[Xevion]

Hey, this just happened to me, and I managed to solve it.

// The website states you should do this
import Balancer from "React-wrap-balancer";

// But it only worked if I did this
import { Balancer } from "react-wrap-balancer";

You can see where I solved it for my project on this commit. You'll be able to inspect all package versions here, too.

The precise error I got was

TypeError: Cannot read properties of undefined (reading 'toString')
    at Object.check (C:\Users\Xevion\projects\undefined.behavio.rs\node_modules\.pnpm\@astrojs+react@3.4.0_@types+react-dom@18.2.17_@types+react@18.2.39_react-dom@18.2.0_react@18._jyw2zw4waw6up4jito5lnr2tly\node_modules\@astrojs\react\server.js:23:32)
    at renderFrameworkComponent (C:\Users\Xevion\projects\undefined.behavio.rs\node_modules\.pnpm\astro@4.0.3_sass@1.69.5_typescript@5.3.2\node_modules\astro\dist\runtime\server\render\component.js:98:33)
    at async Module.renderComponent (C:\Users\Xevion\projects\undefined.behavio.rs\node_modules\.pnpm\astro@4.0.3_sass@1.69.5_typescript@5.3.2\node_modules\astro\dist\runtime\server\render\component.js:346:10)

Any time the page with the component was loaded (and astro build).

[zaini]

Just calling out that I had a similar issue when using this library with react router v7

I'd get this error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
    at renderElement (/home/zaini/hachi-website/node_modules/react-dom/cjs/react-dom-server.node.development.js:5734:15)
    at retryNode (/home/zaini/hachi-website/node_modules/react-dom/cjs/react-dom-server.node.development.js:5991:31)
    at renderNodeDestructive (/home/zaini/hachi-website/node_modules/react-dom/cjs/react-dom-server.node.development.js:5941:11)
    at renderNode (/home/zaini/hachi-website/node_modules/react-dom/cjs/react-dom-server.node.development.js:6398:18)
    at renderElement (/home/zaini/hachi-website/node_modules/react-dom/cjs/react-dom-server.node.development.js:5358:18)

But I changed my import to:

import { Balancer } from "react-wrap-balancer";

and it fixed the problem.