nataila nataila - 3 months ago 36
Node.js Question

React is not defined ReferenceError? I am using webpack and webpack-dev-server

this is my jsx:

var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(
<h1>hello world</h1>,
document.getElementById('content')
)


I build with webpack to
build/bundle.js
&

I import
bundle.js
into
index.html


index.html:

<!DOCTYPE html>
<html>
<head>
┊ <meta charset="utf-8">
┊ <meta name="viewport" content="width=device-width">
┊ <title></title>
</head>
<body>
┊ <div id="content"></div>
┊ <script src="./build/bundle.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>


But when I ran
webpack-dev-server
, chrome console error:

bundle.js:57 Uncaught ReferenceError: React is not defined


I am sure, I have run
npm install react


enter image description here

how can I fix it?(-_-)ゞ゛

Answer

You should add this into your app.js not .jsx

var React = require('react');
  var ReactDOM = require('react-dom');
  ReactDOM.render(
    <h1>hello world</h1>,
    document.getElementById('content')
  )

JSX is a transpiled language, interpreted by React components. So, there has to be React in app.js for React components to interpret the jsx!!

Comments