reactjs error Uncaught ReferenceError: require is not defined

Question

I am creating reactJS in .Net Core framework. I am using ReactJS as CDN in my .net app and My React App is throwing an error: require is not defined. I am attaching my code below:

var React = require('react');
var ReactDOM = require('react-dom');
var ReactBsTable = require('react-bootstrap-table');
var BootstrapTable = ReactBsTable.BootstrapTable;
var TableHeaderColumn = ReactBsTable.TableHeaderColumn;

var products = [{
    id: 1,
    name: "Product1",
    price: 120
}, {
    id: 2,
    name: "Product2",
    price: 80
}];

ReactDOM.render(
    <BootstrapTable data={products} version='4'>
        <TableHeaderColumn isKey dataField='id'>Product ID</TableHeaderColumn>
        <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
        <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
    </BootstrapTable>, document.getElementById('content')
);

Answer 1

Try using ES6 import instead of require

ie., try

import React from 'react';
import ReactDOM from 'react-dom';
import ReactBsTable from 'react-bootstrap-table';

Because require is not inbuilt react api. You need to install extra library for using require in react. CommonJs provides api for module loader like require

Answer 2

Please try this,

Main html file where you are using cdn add this.

<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>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel"></script>

<!-- Load our React component. -->
<script src="new_component.js"></script>

<!-- ... existing HTML ... -->

<div id="new_component_container"></div>

<!-- ... existing HTML ... -->

In the component file do this,

import ReactBsTable from  'react-bootstrap-table';
var BootstrapTable = ReactBsTable.BootstrapTable;
var TableHeaderColumn = ReactBsTable.TableHeaderColumn;

var products = [{
    id: 1,
    name: "Product1",
    price: 120
}, {
    id: 2,
    name: "Product2",
    price: 80
}];

const domContainer = document.querySelector('#new_component_container');
ReactDOM.render(
  <BootstrapTable data={products} version='4'>
    <TableHeaderColumn isKey dataField='id'>Product ID</TableHeaderColumn>
    <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
    <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
  </BootstrapTable>, 
domContainer);

For react bootstrap table also , use import only if you are installing the library. Again if you are using cdn for that too then import won't work.

For more info related to react cdn please view this.

https://reactjs.org/docs/add-react-to-a-website.html