Browserify module not found with recursive require (post-Babel transpile)

Question

I have the Browserify entry-file index.js that imports from a file in the same directory and the the 'render' function from 'react-dom', which is installed in node_modules (see Package.json for versioning) --

// index.js
import { Header } from './header'
import { render } from 'react-dom'

render(<Header />, document.getElementById('root'));

I also have another file header.js which imports 'react' and creates a simple React class --

// header.js
import React from 'react'

export const Header = React.createClass({
    render:() => {
        return (
            <div>
                some header title
            </div>
        )
    }
});

I use Babel to transpile es6 code so the "import" statements map to the necessary "require" statements. As far as I can tell this step is working properly. After transpiling with Babel, I use Browserify to package all the dependencies into a single file. The problem I am running into is I'm getting an "Uncaught ReferenceError: React is not defined" once I attempt to render the packaged javascript.

It looks like imports work fine in index.js but are not being resolved properly in header.js. For example, if I import React from 'react' in index.js, everything renders properly. It looks like I'm having an issue with recursive requires, but I can't seem to figure out why that is the case. Any thoughts would be greatly appreciated. I would be glad to supply more information as well.

For reference, here is an excerpt from my Package.json --

{
  "dependencies": {
    "babel-preset-es2015": "~6.3.13",
    "babel-preset-react": "~6.1.18",
    "babel-register": "~6.2.0",
    "history": "^1.12.0",
    "material-ui": "^0.13.4",
    "react": "^0.14.3",
    "react-dom": "^0.14.3",
    "react-router": "~1.0.0",
    "react-tap-event-plugin": "^0.2.1"
  },
  "devDependencies": {
    "browserify": "~11.2.0",
    "del": "^2.1.0",
    "express": "~4.13.3",
    "express-urlrewrite": "~1.2.0",
    "gulp": "~3.9.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-babel": "~6.1.1",
    "gulp-print": "~2.0.1",
    "gulp-rename": "~1.2.2",
    "gulp-sass": "~2.1.0",
    "gulp-sourcemaps": "1.6.0",
    "gulp-uglify": "^1.5.1",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  }
}

Please read tag descriptions! babel is for questions about a Python library with that name. — Felix Kling

Felix Kling Felix Kling · Accepted Answer · 2015-12-14T05:55:37

For example, if I import React from 'react' in index.js, everything renders properly

Every file that uses JSX syntax (e.g. <Header />) needs to import React. You get the error because you are not doing that in index.js and it works once you are doing it.

If you'd look at the compiled code, you will see that <Header /> is converted to React.createElement(Header).

Browserify module not found with recursive require (post-Babel transpile)

1 Answers