Error for React Bootstrap Component in Astro File | Astro Lounge | Page 1

#

Hey guys, I'm getting an error in my Jumbo.astro section of my website when trying to use a React Bootstrap component.

#

The error:

TypeError: Cannot read properties of undefined (reading 'toString')
    at Object.check (eval at instantiateModule (file:///B:/GitHub/Alien-Insect-Portfolio-Website%20New/website/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55055:28), <anonymous>:31:32)
    at renderFrameworkComponent (eval at instantiateModule (file:///B:/GitHub/Alien-Insect-Portfolio-Website%20New/website/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55055:28), <anonymous>:113:33)
    at async Module.renderComponent (eval at instantiateModule (file:///B:/GitHub/Alien-Insect-Portfolio-Website%20New/website/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55055:28), <anonymous>:396:10)
    at async Module.renderChild (eval at instantiateModule (file:///B:/GitHub/Alien-Insect-Portfolio-Website%20New/website/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:55055:28), <anonymous>:17:13)

#

My Jumbo.astro component is being used in an index.astro file. Here is how it is being used:

#

---
import Layout from "/src/layouts/Layout.astro";
import Jumbo from "/src/components/sections/Jumbo.astro";
---

<Layout title="Alien Insect">
<Jumbo job='Technical Artist, Music Producer' />
</Layout>

#

In addition, here is my Jumbo.astro component. As you can see, it is using components from React Bootstrap:

---
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';

const {job} = Astro.props;
---

<section class="main jumbo" id="home" data-scroll-section>
    <Container>
        <Row>
            <Col className="text-center">
                <h1>Rishi Prasanna</h1>
                <p>{job}</p>
            </Col>
        </Row>
    </Container>
</section>

#

I just checked, and the line that is causing the error is this one:

<Col className="text-center">

#

I tried changing it to this, still the same error:

<Col class="text-center">

#Error for React Bootstrap Component in Astro File