javascript - ReactJS ReferenceError: exports is not defined - Stack Overflow|Programmer puzzle solving

I have been trying to set up a basic ReactJS project without much success, I have these three files:

[index.html]

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>MarkEdit</title>
        <link rel="stylesheet" href="stylesheets/minireset.css"></link>
        <link rel="stylesheet" href="stylesheets/index.css"></link>
        <script src="@16/umd/react.development.js"></script>
        <script src="@16/umd/react-dom.development.js"></script>
        <script src="/[email protected]/babel.min.js"></script>
        <script type="text/babel" src="scripts/app.js"></script>
        <script type="text/babel" src="scripts/index.js"></script>
    </head>
    <body>
        <main id="application"></main>
    </body>
</html>

[scripts/app.js]

export default class App extends React.Component {
    render() {
        return (
            <h1>Hello, World!</h1>
        );
    }
}

[scripts/index.js]

ReactDOM.render(<App/>, document.getElementById("application"));

And I've been getting these errors:

ReferenceError: exports is not defined
Warning: React.createElement: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.

All the files are available and served through a Golang webserver. I do not have a JS bundler like Webpack and I was wondering what I'm currently doing wrong. I have tried import but I just get:

ReferenceError: import is not defined

Thank you for your help!

I have been trying to set up a basic ReactJS project without much success, I have these three files:

[index.html]

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>MarkEdit</title>
        <link rel="stylesheet" href="stylesheets/minireset.css"></link>
        <link rel="stylesheet" href="stylesheets/index.css"></link>
        <script src="https://unpkg./react@16/umd/react.development.js"></script>
        <script src="https://unpkg./react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg./[email protected]/babel.min.js"></script>
        <script type="text/babel" src="scripts/app.js"></script>
        <script type="text/babel" src="scripts/index.js"></script>
    </head>
    <body>
        <main id="application"></main>
    </body>
</html>

[scripts/app.js]

export default class App extends React.Component {
    render() {
        return (
            <h1>Hello, World!</h1>
        );
    }
}

[scripts/index.js]

ReactDOM.render(<App/>, document.getElementById("application"));

And I've been getting these errors:

ReferenceError: exports is not defined
Warning: React.createElement: type is invalid -- expected a string (for built-in ponents) or a class/function (for posite ponents) but got: undefined. You likely forgot to export your ponent from the file it's defined in, or you might have mixed up default and named imports.

All the files are available and served through a Golang webserver. I do not have a JS bundler like Webpack and I was wondering what I'm currently doing wrong. I have tried import but I just get:

ReferenceError: import is not defined

Thank you for your help!

Share Improve this question asked Jan 7, 2020 at 2:17 Whiteclaws 9521 gold badge12 silver badges35 bronze badges

1 This question is similar: stackoverflow./questions/59483131/… – Matt Carlotta Commented Jan 7, 2020 at 2:23
@MattCarlotta but I do use babel whereas the author of the question you just linked does not. – Whiteclaws Commented Jan 7, 2020 at 2:39
He does, he just didn't include it in his example (see his first example here: stackoverflow./questions/59461002/…). Again, JSX isn't valid HTML. As of now, you'll be making the client transpile it for EVERY visit. Instead, it should be piled to JS. However, when piled, it still needs a third party library to handle require (import piles to require) statements. – Matt Carlotta Commented Jan 7, 2020 at 2:42
1 Remend to startup a React app through Create-React-APP. github./facebook/create-react-app – zxxxj Commented Jan 7, 2020 at 2:43
2 @Whiteclaws create-react-app doesn't require you to use nodejs as a back-end. It uses npm to facilitate the creation of the front-end files. Your back-end can be whatever you want it to be so long as you municate with it via XHR. – Jhecht Commented Jan 7, 2020 at 2:58

| Show 3 more ments

2 Answers 2

Sorted by: Reset to default 1

You forgot your imports and these are important to use its features, otherwise it will reference error: "imports are not defined"

Try adding this

import React from "react";

before

export default class App extends React.Component {
    render() {
        return (
            <h1>Hello, World!</h1>
        );
    }
}

and inside your index.js file just add this

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("application");
ReactDOM.render(<App />, rootElement);

Are you following the same?

[scripts/App.js]

import React from "react";
export default class App extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

[scripts/index.js]

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

const rootElement = document.getElementById("application");
ReactDOM.render(<App />, rootElement);

Programmer puzzle solving

javascript - ReactJS ReferenceError: exports is not defined - Stack Overflow

2 Answers 2

Articles related to this article

comment list (0)