Astro.js and React JS Error When Deploy in Netlify

Question

When I try to deploy my first React component in Netlify with Astro.js it throws me this error in Netlify Deploy log:

This are captures of my Astro page and React App component

Does anybody knows hot to fix this?

Answer 1

Troubleshooting something similar and found this as helpful;

Make sure in your astro.config.mjs file you are importing react from @astrojs/react and NOT react

like this

import { defineConfig } from "astro/config";
import react from "@astrojs/react";
// other imports here

export default defineConfig({
    integrations: [
        //...otherIntegrations,
        react(),

    ],
});

Wherever you are using it in your .astro page / component; make sure you are using the client:load="react" directive

Like this exampleFile.astro

---
import ReactIslandComponent from '../reactComponent/component.jsx'
// other cool stuff imported
---

<div>
    <p>Example text</p>
    <ReactIslandComponent client:only="react" />
</div>

Make sure that the client:only="react" prop directive is passed to any react component you want to use in a .astro file