Uncaught ReferenceError: require is not defined React.js

Question

I am writing the following in my React code:

var React = require('react');

I followed the React setup from tutorialspoint. I installed all the things at /Desktop/reactApp/. The React code is being run from /GitProjects/DjangoProjects/MyProj/MyApp/static/react/dashboard.js. I keep on getting the error Uncaught ReferenceError. Am I missing something?

Note: HTML file at /GitProjects/DjangoProjects/MyProj/MyApp/templates/dashboard.html is calling my dashboard.js code.

Kos · Accepted Answer · 2016-08-07 15:04:13Z

1

It sounds like you're trying to include a file dashboard.js in HTML.

If this file contains code like require('react'); then it means that you need to first compile it using a build tool that will actually find react and bundle it together with your own code.

In case of the tutorial you're linking, the build tool used is webpack. Your HTML should include the file generated by webpack (index.js, or whatever you have in output section of webpack config), rather than dashboard.js alone.

webpack.config.js

var config = {
   entry: './main.js',  # the main code of your app that require()s other files

   output: {
      path:'./',
      filename: 'index.js',  # the file you should be including in HTML
   },

answered Aug 7, 2016 at 15:04

Kos

72.7k28 gold badges174 silver badges239 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

User_Targaryen Over a year ago

Still getting that same error. Installed webpack. set the entry in webpack config to ./MyApp/static/MyApp/react/dashboard.js and output to ./MyApp/static/MyApp/bundles. Ran the command webpack. Successfully created the folder bundles. In my HTML I have, <script type="text/babel" src="{% static 'MyApp/react/dashboard.js' %}"></script> . Opening the browser and seeing the same error "require not defined".

Kos Over a year ago

why <script type="text/babel">? If you're using webpack, you should configure it to run Babel for you and output plain ES5 that you include as text/javascript. Also you shouldn't include dashboard.js in your HTML. Include the bundle instead.

User_Targaryen Over a year ago

Thanks a lot.. Done!!! Actually I had messed up the directory structure of my project.

Collectives™ on Stack Overflow

Uncaught ReferenceError: require is not defined React.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related