admin管理员组

文章数量:1434422

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!

  • javascript
  • reactjs
Share Improve this question asked Jan 7, 2020 at 2:17 WhiteclawsWhiteclaws 9521 gold badge12 silver badges35 bronze badges 8
  • 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

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);

本文标签： javascriptReactJS ReferenceError exports is not definedStack Overflow

版权声明：本文标题：javascript - ReactJS ReferenceError: exports is not defined - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745634202a2667454.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。