"ReferenceError: require is not defined", while creating React component using ES6/Babel

Question

I am trying to create an React component using ES6 in JSBin, but I keep on getting the below error. Can someone explain these?

JSBin Error: "ReferenceError: require is not defined at mudaza.js:17:14"

Alex Chirițescu · Accepted Answer · 2016-03-09 06:24:28Z

9

You cannot use imports or requires in JSBin. You need the bundled .js files of the libraries you want to use in your app in the head of your html file and then use a slightly different syntax to access the components or functions from the added libraries.

For example, to use react-router in a pen, you should add it in the head of the HTML page hosting your app:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/2.0.0/ReactRouter.min.js"></script>

Afterwards, in your app's source:

var { Router, Route, IndexRoute, hashHistory, Link } = ReactRouter;

instead of

import { Router, Route, IndexRoute, hashHistory, Link } from "react-router";

I've cloned and updated your JSBin with these changes.

A very good source for most modules .js files is https://cdnjs.com/.

answered Mar 9, 2016 at 6:24

Alex Chirițescu

6885 silver badges13 bronze badges

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

Collectives™ on Stack Overflow

"ReferenceError: require is not defined", while creating React component using ES6/Babel

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related