React js with jsx: Uncaught ReferenceError: require is not defined

Question

In want add react in my existing web app, I have an index.js file where there is a button and a thanks.js file or there is a thank you message, writing in jsx, now if someone clicks on the botton I display the message. If I try to import thanks component into index.js it's not work, I get this error Uncaught ReferenceError: require is not defined

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>My app</title>
        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
    </head>
    <body>
        <div class="flex-center position-ref full-height">

            <div class="content">
                <div class="title m-b-md">
                    <div id="like_container"></div>
                </div>
            </div>
        </div>
        <!-- Load React. -->
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
        <!-- Babel -->
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

        <!-- Load our React component. -->
        <script src="js/src/index.js" type="text/babel"></script>
    </body>
</html>

index.js

'use strict';

import Thanks from './thanks';

class Like extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return <Thanks />;
    }

    return (
      <button onClick={() => this.setState({ liked: true }) }>
        Like
      </button>
    );
  }
}

let domContainer = document.querySelector('#like_container');
ReactDOM.render(<Like />, domContainer);

thanks.js

'use strict';

export default class Thanks extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <p>
        Thanks you for liking!
      </p>
    );
  }
}

Please help!

ikos23 · Accepted Answer · 2020-05-08 16:03:19Z

If you use npx create-react-app my-app to create an app - under the hood, you'll get Babel and webpack.

A bundler, such as webpack or Parcel lets you write modular code and bundle it together into small packages to optimize load time.

If you add React to some existing app by just adding React/Babel JS files like you do

<!-- Load React. -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
....

you can use JSX, but you are probably missing a bundler, so you cannot do things like:

import Thanks from './thanks';

To solve this, you could add some bundler to your project (and this is probably the right way to fix this, especially if you have a big app)

or you can just put your React code into JS files (or a single file) and load them together with React JS file(s) using <script></script>:

<!-- Load React. -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<!-- Custom files or it can be a single file -->
<script src="/js/my-thanks-component.js" type="text/babel"></script>
<script src="/js/my-another-component.js" type="text/babel"></script>

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

In this case, you don't need to do any import anywhere because you will get all your components loaded anyway, so you can just use them whenever you need it.

For instance:

my-components.js

class Thanks extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <p>
        Thanks you for liking!
      </p>
    );
  }
}

class Like extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return <Thanks />;
    }

    return (
      <button onClick={() => this.setState({ liked: true }) }>
        Like
      </button>
    );
  }
}

And then you load it:

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

Thanks to interested, It is possible to add a bundler without npm, npm not available in my case?
@Diyata If you are not using some package manager it can be a little tricky. You need to choose what bundler you would like to use, then follow its documentation of how to add and configure it. e.g. here is how you can add webpack locally webpack.js.org/guides/getting-started/#basic-setup

Collectives™ on Stack Overflow

React js with jsx: Uncaught ReferenceError: require is not defined

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related