CODEWITHSUNDEEP
node.jsreactjsisomorphic
R.R
R.R

Reputation: 867

React is not defined in simple React component ( Universal )

I'm using 15.0.1 and using React to create Universal app

I was getting React is not defined in the following component

import {Component} from "react";

export default class HeroSearchView extends Component{

    render() {

        return (
            <div className='row'>
                hello
            </div>
        );
    }
}

The following code call that React component

import React from "react";
import { connect } from 'react-redux'
import Coupon from '../../common/components/Coupon'
import { actions as miscActions } from '../../redux/modules/misc'
import HeroSearchView from './components/HeroSearchView'


const mapStateToProps = (state) => ({
    misc:state.misc
})

export class HomeView extends React.Component{
    render() {

        return (
            <div>
                <HeroSearchView  />
                <Coupon {...this.props} />
            </div>
        );
    }
}

export default connect(mapStateToProps, Object.assign({}, miscActions))(HomeView)

I'm kind of scratching my head now what the following message means ...

ReferenceError: React is not defined
    at HeroSearchView.render (HeroSearchView.jsx:8:13)
    at [object Object].ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactCompositeComponent.js:679:34)
    at [object Object].ReactCompositeComponentMixin._renderValidatedComponent (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactCompositeComponent.js:699:32)
    at [object Object].wrapper [as _renderValidatedComponent] (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactPerf.js:66:21)
    at [object Object].ReactCompositeComponentMixin.performInitialMount (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactCompositeComponent.js:284:30)
    at [object Object].ReactCompositeComponentMixin.mountComponent (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactCompositeComponent.js:237:21)
    at [object Object].wrapper [as mountComponent] (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactPerf.js:66:21)
    at Object.ReactReconciler.mountComponent (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactReconciler.js:39:35)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactMultiChild.js:203:44)
    at ReactDOMComponent.Mixin._createContentMarkup (/Users/roy/development/org/pl-core/node_modules/react/lib/ReactDOMComponent.js:589:32)

[ Note ] : If I remove <HomeSearchView /> from my example code, it works fine ...

Any tips will be appreciated ...

Upvotes: 2

Views: 16814

Answers (4)

Dauren Akilbekov
Dauren Akilbekov

Reputation: 5025

You can do something like this to keep your code tidy.

import React, {Component} from "react";

export default class HeroSearchView extends Component {

    render() {

        return (
            <div className='row'>
                hello
            </div>
        );
    }
}

Upvotes: 2

Andrey
Andrey

Reputation: 371

If you are using Rails, then possible cause of error is that you added //= require react //= require react_ujs //= require components into your app/assets/javascripts/application.js

Upvotes: 0

Amit
Amit

Reputation: 3289

import React from "react";

export default class HeroSearchView extends React.Component{

    render() {

        return (
            <div className='row'>
                hello
            </div>
        );
    }
}

Change to this and it will work.

Upvotes: 0

Alexander
Alexander

Reputation: 397

You need to use

import React from "react"

and

export default class HeroSearchView extends React.Component

This is because JSX convert your file to actual JS that calls React.createElement, and because you only imported Component from react, it couldn't find references to React

Upvotes: 10

Related Questions