CODEWITHSUNDEEP
javascriptreactjsbabeljsbrowserify
Robert C. Holland
Robert C. Holland

Reputation: 1813

Compiled react with browserify and babel says : ReferenceError: React is not defined

Problem: No build error, but when trying to use the file on browser, console says : ReferenceError: React is not defined.

Compiling react file using these two commands :

npx browserify \
-t [ babelify --presets [ @babel/preset-react @babel/preset-env ] ] \
./input.jsx -o ./temp1.js

Then : 

npx babel ./temp1.js \
--presets=@babel/preset-react,@babel/preset-env,minify \
--no-comments --out-file ./output.js

My input.jsx file looks like this :

import react from 'react';
import Testing from './component/testing.jsx'
import reactDOM from 'react-dom';

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

And the ./component/testing.jsx looks like this :

import React from 'react';

class Testing extends React.Component
{
    render()
    {
        return (
            <h1>Hello World</h1>
        );
    }
}

export default Testing;

package.json / versions :

{
"dependencies": {
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
},
"devDependencies": {
    "@babel/cli": "^7.2.0",
    "@babel/core": "^7.2.0",
    "@babel/preset-env": "^7.2.0",
    "@babel/preset-react": "^7.0.0",
    "babel-preset-minify": "^0.5.0",
    "babel-preset-react": "^6.24.1",
    "babelify": "^10.0.0",
    "browserify": "^16.2.3"
}
}

Node : v10.9.0
NPM : 6.2.0

Upvotes: 0

Views: 358

Answers (1)

enriquecastl
enriquecastl

Reputation: 840

I think you have a naming problem. On this import statement (input.jsx):

import react from 'react';

change react for React

Upvotes: 1

Related Questions