CODEWITHSUNDEEP
javascriptnode.jsreactjsbrowserifybabeljs
RedGiant
RedGiant

Reputation: 4748

reactjs bundle script by browserify not working on the client side (Uncaught ReferenceError: Component is not defined)

I'm trying out using node.js and reactjs as a template rendering service for my php backend. Here's the guideline.

I wonder if there's a problem with my bundle.js built by browserify. I'm getting Uncaught ReferenceError: ItemPage is not defined on the client side because the component ItemPage is not global in the bundle.js, but I have no idea how to access it since it is wrapped in some functions that I really don't understand.

Here's my es6 component script:

import React from 'react';
import Tabs from 'grommet/components/Tabs';
import Tab from 'grommet/components/Tab';
class ItemPage extends React.Component {
    render(){
        return <Tabs onClick={this._onClick.bind(this)}>
            <Tab title="First Title">
                <h3>First Tab</h3>
                <p>Contents of the first tab !</p>
                <div>Something@@@@@@</div>
            </Tab>
            <Tab title="Second Title">
                <h3>Second Tab</h3>
                <p>Contents of the second tab</p>
            </Tab>
            <Tab title="Third Title">
                <h3>Third Tab</h3>
                <p>Contents of the third tab</p>
            </Tab>
        </Tabs>
    }
    _onClick(){
        alert("raging")
    }
}

The command I use to bundle the script:

browserify src/ItemPage.js -o /js/build/ItemPage.js -t [ babelify --presets [ es2015 react ] ]

Output:

    echo '<div id="app">';

     // reactjs markup content sent back from node.js
    echo $content;

    echo '</div>';

    echo '<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js"></script>';
    echo '<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js"></script>';

    echo '<script type="text/javascript" src="/js/build/ItemPage.js"></script>';

    echo '<script>
           var container = document.getElementById("app");
           var component = ItemPage;
           // Error!!!!
           React.renderComponent(component, container);
          </script>';

Error:

Uncaught ReferenceError: ItemPage is not defined

Here is my bundle file (2mb):

https://drive.google.com/file/d/0B1XYujDUsAgtb3NrSlBFQ19qckU/view?pref=2&pli=1

You can see that ItemPage isn't global in the script.

Update:

I have added default export to the file: 

import React from 'react';
import Tabs from 'grommet/components/Tabs';
import Tab from 'grommet/components/Tab';
class ItemPage extends React.Component {
    render(){
        return <Tabs onClick={this._onClick.bind(this)}>
            <Tab title="First Title">
                <h3>First Tab</h3>
                <p>Contents of the first tab !</p>
                <div>Something@@@@@@</div>
            </Tab>
            <Tab title="Second Title">
                <h3>Second Tab</h3>
                <p>Contents of the second tab</p>
            </Tab>
            <Tab title="Third Title">
                <h3>Third Tab</h3>
                <p>Contents of the third tab</p>
            </Tab>
        </Tabs>
    }
    _onClick(){
        alert("raging")
    }
}
export default ItemPage;

However ItemPage is still local and inaccessible on the client side.

Here is my latest build:

https://drive.google.com/file/d/0B1XYujDUsAgtZjNvaFdBUVlzU2s/view?usp=sharing

Upvotes: 1

Views: 247

Answers (2)

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

Aside from adding export you need to say browserify to generate UMD output by adding --standalone flag.

--standalone -s Generate a UMD bundle for the supplied export name. This bundle works with other module systems and sets the name given as a window global if no module system is found.

browserify src/ItemPage.js 
        -o /js/build/ItemPage.js
        --standalone ItemPage 
        -t [ babelify --presets [ es2015 react ] ]

multiline for the sake of readability

Upvotes: 2

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

You need to export ItemPage in your script

export default ItemPage

Upvotes: 1

Related Questions