#Build error with React components

6 messages · Page 1 of 1 (latest)

shell wren
#

I've been migrating the current website of my company from React to Astro, but still keeping a few React components.

When running the "astro build" command (yarn), I got the following error message
"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."

File
./node_modules/react-dom/cjs/react-dom-server.node.production.min.js

I can't figure out what component is causing the issue, neither any wrong coding related to it.
With yarn run dev, everything runs normally

steady slateBOT
#

Hi @shell wren. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Sorry @shell wren, I seem to be having a bit of trouble. Don't worry though, I've pinged my supprt and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

shell wren
#

@steady slate I've been migrating the current website of my company from React to Astro, but still keeping a few React components.

When running the "astro build" command (yarn), I got the following error message
"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object."

File
./node_modules/react-dom/cjs/react-dom-server.node.production.min.js

I can't figure out what component is causing the issue, neither any wrong coding related to it.
With yarn run dev, everything runs normally

steady slateBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Hmm, I don't know enough to give you a confident answer yet. However, based on the information provided, it seems like there might be an issue with how one of your React components is being imported or used within Astro.

Here are a few things you could try based on the information from the Astro documentation:

  1. Check your import statements: Make sure that your import is linking to the correct place, the import has the same name as the imported component, and that you've included the extension in the import if necessary. Source (https://docs.astro.build/en/guides/troubleshooting/#my-component-is-not-rendering)

  2. If you're trying to access document or window within your React component, remember that these browser-specific objects are not available on the server. You might need to access these objects after rendering using lifecycle methods like useEffect(). Source (https://docs.astro.build/en/guides/troubleshooting/#document-or-window-is-not-defined)

  3. If you're seeing an error about expecting a default export, make sure that any component you're importing and rendering is working correctly. Source (https://docs.astro.build/en/guides/troubleshooting/#expected-a-default-export)

If you're still having trouble, consider asking for help on the Astro Discord (https://astro.build/chat) or checking if anyone else has reported a similar issue on the Astro GitHub (https://github.com/withastro/astro/issues).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: