ReferenceError: "component" is not defined when try to load compiled source by web pack (with demo)

Question

I try to work with webpack to integrate React inside Angular 1.x.

I have simple directive that calls React:

 app.directive('snaggsList', function(){
      return{
          restrict: 'E',
          scope:{},
          link:function(scope, el, attrs){
                 ReactDOM.render(React.createElement(InfiniteListSnaggs, null), el[0]);
          }
      }
  });

and my React file runs some logic and generates list of 2000 objects where each item is other component.

In plunker everything works fine, locally too when I use list-item.js as is.

However it doesn't work when I use JSX form.

Consider following template list-item.jsx:

var SnaggsItem = React.createClass({
    render: function(){
        return <article>
                <div className="title">
                 {this.props.minutesAgo} minutes ago
                </div>   
            </article>
    }
});

module.exports = SnaggsItem;

my webpack.config.js looks like:

module.exports = {
    entry: {        
        listItem: [
            './app/scripts/react/list-item.jsx'
        ]
    },
    output: {
        path: './app/scripts/react/build',
        filename: '[name]_c.js',
        library: "listExample",
        libraryTarget: "umd"
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, exclude: /node_modules/, loader: "jsx-loader"}
        ]
    }
};

so from command line I run: webpack and get new generated file named: listItem_c.js and I include it to index.html

When I run client I get an error:

angular.js:13236 ReferenceError: SnaggsItem is not defined.

This is a content of listItem_c.js:

(function webpackUniversalModuleDefinition(root, factory) {
    if(typeof exports === 'object' && typeof module === 'object')
        module.exports = factory();
    else if(typeof define === 'function' && define.amd)
        define([], factory);
    else if(typeof exports === 'object')
        exports["listExample"] = factory();
    else
        root["listExample"] = factory();
})(this, function() {
return /******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

/******/    // The require function
/******/    function __webpack_require__(moduleId) {

/******/        // Check if module is in cache
/******/        if(installedModules[moduleId])
/******/            return installedModules[moduleId].exports;

/******/        // Create a new module (and put it into the cache)
/******/        var module = installedModules[moduleId] = {
/******/            exports: {},
/******/            id: moduleId,
/******/            loaded: false
/******/        };

/******/        // Execute the module function
/******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/        // Flag the module as loaded
/******/        module.loaded = true;

/******/        // Return the exports of the module
/******/        return module.exports;
/******/    }


/******/    // expose the modules object (__webpack_modules__)
/******/    __webpack_require__.m = modules;

/******/    // expose the module cache
/******/    __webpack_require__.c = installedModules;

/******/    // __webpack_public_path__
/******/    __webpack_require__.p = "";

/******/    // Load entry module and return exports
/******/    return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    module.exports = __webpack_require__(1);


/***/ },
/* 1 */
/***/ function(module, exports) {


    var SnaggsItem = React.createClass({displayName: "SnaggsItem",
        render: function(){
            return React.createElement("article", null, 
                    React.createElement("div", {className: "title"}, 

                            React.createElement("span", {className: "title-time"}, 
                                this.props.minutesAgo, " minutes ago"
                            )
                        )
                    ), 

                )
        }
    });

    module.exports = SnaggsItem;

/***/ }
/******/ ])
});
;

BTW if Ill copy var SnaggsItem = React.createClass( ...) to other file - everything works.

For some reason InfiniteListSnaggs cannot find compiled component SnaggsItem.

Please help,

Here I reproduced an Error: PLUNKR

Why don't you require list-item.js from infinite-list.js and have webpack compile that into one file in stead? — hansn, May 06 '16 at 13:11
@hansn because In this case my directive cannot find `InfiniteListSnaggs`. I tried — snaggs, May 06 '16 at 16:17
Did you try to compile everything into one bundle with webpack and use require statements to include the files you need per script? — hansn, May 06 '16 at 16:50
@hansn, hmm, my angular project has about 200 files, so i cannot run on all project, thanks anyway — snaggs, May 06 '16 at 18:12
This looks relevant http://stackoverflow.com/q/34357489/3719266 — hansn, May 06 '16 at 18:19

ReferenceError: "component" is not defined when try to load compiled source by web pack (with demo)

0 Answers0