React.js "Uncaught ReferenceError: exports is not defined"-CodePudding

I'm trying to export this component from one file to another

export default function Form() {
    return (
        <div>
        <form action="./add_product.php">
        <div style={{display: 'flex', flexDirection: 'row'}}>
        <label htmlFor="Student">SKU </label>
        <input name="Student" />
        </div>
        </form>
        </div>
    )
}

file that this component is in is called add_product.js
I'm trying to export it into file named fns.js
this is my code in fns.js that tries to import component

import Form from './add_product';
ReactDOM.render(<Form />, document.getElementById("product_form"));

both files in one directory, I include CDN links of react and babel in my code but still getting error like "Uncaught ReferenceError: exports is not defined"
what's the solution to fix this?

CodePudding user response：

The imports will work if you are using code splitting.

There are articles about the setup using webpack which you can google "react webpack setup".

If you want to use the CDN way, which I also did when I was learning. The main thing is to add script tags for all the components.

HTML

<html>

<head>
    <title>Test</title>
    <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 crossorigin src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

<body>
    <h2>Testing 1 2 3 ...</h2>
    <div id="product_form"></div>

    <script type="text/babel" src="add_product.js"></script>
    <script type="text/babel" src="fns.js"></script>
</body>

</html>

fns.js

// import Form from './add_product';

ReactDOM.render(<>
    <h3>React CDN</h3>
    <Form />
</>,
    document.getElementById("product_form"));

add_product.js

// export default 

function Form() {
    return (
        <div>
            <form>
                <div style={{ display: 'flex', flexDirection: 'row' }}>
                    <label htmlFor="Student">SKU </label>
                    <input name="Student" />
                </div>
            </form>
        </div>
    )
}

I hope that helps.