How to use import and export functions using reactjs?

Question

I am new-learning React library and have this problem for two weeks now cant solve it. so when i have all the Functions in one file "Index.js"

function Header(){
    return(
        <header>
            <nav className="nav">
                <img src="./logo-react.png" width="100px"/>
                <ul className="nav-items">
                    <li>Price</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>
    )
}

function Maincont(){
    return (
        <div>
            <Header />
        </div>
    )
}

ReactDOM.render(< Maincont />,document.getElementById("root"))

it all works good no problem, but once I cut on of the Functions to other file "Header.js" and try to export-import it to the "index.js" it stops working I am using React with CDN links and this is my HTML Code as well

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="index.js" type="text/babel"></script>

I have also tried to change the type to Module but still no chance this is what shows me in console

index.js:3 Uncaught ReferenceError: require is not defined
    at <anonymous>:3:15
    at i (babel.min.js:24:29679)
    at r (babel.min.js:24:30188)
    at e.src.n.<computed>.l.content (babel.min.js:24:30503)
    at XMLHttpRequest.n.onreadystatechange (babel.min.js:24:29946)
(anonymous) @ index.js:3
i @ babel.min.js:24
r @ babel.min.js:24
e.src.n.<computed>.l.content @ babel.min.js:24
n.onreadystatechange @ babel.min.js:24
XMLHttpRequest.send (async)
s @ babel.min.js:24
(anonymous) @ babel.min.js:24
o @ babel.min.js:24
u @ babel.min.js:24
f @ babel.min.js:1
(anonymous) @ babel.min.js:1

<script src="index.js" type="text/babel"></script>

Omar Elnemr
– Omar Elnemr

2022-02-21 11:46:42 +00:00
Commented Feb 21, 2022 at 11:46 — Omar Elnemr
– Omar Elnemr, Commented Feb 21, 2022 at 11:46

Quentin · Accepted Answer · 2022-02-21 11:47:22Z

1

Babel doesn't polyfill require. You need to either:

Use ES6 modules where your entry point is loaded with <script type="module"> and then you use import and export instead of require and module.exports. I believe you will also need to make some changes to Babel to get it to handle ES6 module imports client-side.

Transpile and bundle your code before sending it to browser using a tool like Webpack or Parcel in combination with Babel.

answered Feb 21, 2022 at 11:47

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use import and export functions using reactjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related