ReactJs - Multiple Components - Error: Uncaught ReferenceError: require is not defined

Question

I'm new to react, and I am having trouble with multiple components.

This is the error I get Uncaught ReferenceError: require is not defined

Code that I'm using.

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
    <script src="https://fbcdn-dragon-a.akamaihd.net/hphotos-ak-xtf1/t39.3284-6/11057100_835863049837306_1087123501_n.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel" src="js/layout.js"></script>
</body> 
</html>

layout.js

import React from "react";
import ReactDOM from "react-dom";

import Header from "./header";

class Layout extends React.Component {
    render() {
       return(
        <div>
           <Header/>
        </div>
    );
    }
}

const app = document.getElementById("app");
ReactDOM.render(<Layout/>, app);

And header.js

import React from "react";
import ReactDOM from "react-dom";

export default class Header extends React.Component {
    render() {
        return(
            <h1>Hello header</h1>
    );
    }
}

Yury Tarabanko · Accepted Answer · 2016-06-22 10:08:49Z

3

Babel handles only the transpilation part (i.e. converts es2015 and jsx syntax into valid ES5). But you still need to use either a bundler (webpack, browserify) or a module loader (systemjs or jspm) to load modules.

Here is an example using SystemJS. Example.

Configure systemjs loader to load libs from cdn

System.config({
    transpiler: 'babel',
    baseURL: '',
    map: {
      babel: 'https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js',
      react: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js',
      'react-dom': 'https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js'
    }
});

// load application
System.import('script.js');

Import local files

// inside script.js
import React from "react";
import ReactDOM from "react-dom";
import Header from "./header.js"; //note extension

class Layout extends React.Component {

answered Jun 22, 2016 at 10:08

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

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

1 Comment

xoomer Over a year ago

Thank You! Working nicely :)

Collectives™ on Stack Overflow

ReactJs - Multiple Components - Error: Uncaught ReferenceError: require is not defined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related