Edit webpack setting - cannot call class as function

Question

Currently, I came across this. I react a bit to the component I made here https://github.com/brettjthom/react-basic-table , which uses the webpack package to combine it. It works with a self-contained example, but as soon as I try to import it into another project, for example here https://github.com/brettjthom/react-basic-table-test , it fails with an error

Cannot call a class as a function

Any ideas on where I went wrong?

Webpack for the main component.

var webpack = require('webpack');

// Options for Builds
var buildVar = process.argv.indexOf('-var') > -1;
var minify = process.argv.indexOf('-p') > -1;

// Different build types
var outputName = 'lib/react-basic-table';
outputName = outputName + (buildVar ? '-var' : '');
outputName = outputName + (minify ? '.min.js' : '.js');


var plugins = [
  new webpack.optimize.DedupePlugin()
]
if (minify) plugins.push(new webpack.optimize.UglifyJsPlugin()); 


module.exports = {
  entry: './src/index.jsx',

  module: {
    preLoaders: [
      { test: /\.jsx?$/, include: /src/, loaders: ['eslint?{fix:true}']}
    ],
    loaders: [
      { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel', query: {
        presets: ['react', 'es2015'],
        plugins: ["add-module-exports", "transform-es2015-modules-umd"]
      } }
    ]
  },

  externals: [{
    "react": {
        root: "React",
        commonjs2: "react",
        commonjs: "react",
        amd: "react"
    }
  }],

  output: {
    filename: outputName,
    libraryTarget: buildVar ? 'var' : 'umd',
    library: 'ReactBasicTable'
  },

  plugins: plugins,

  eslint: {
      failOnWarning: false,
      failOnError: true,
      configFile: './.eslintrc.js'
  },

  resolve: {
    extensions: ['', '.jsx', '.js']
  }
};

package.json for the main component

{
  "name": "react-basic-table",
  "version": "1.0.3",
  "description": "",
  "main": "./lib/react-basic-table.js",
  "dependencies": {
    "react": "^0.13.3",
    "classnames": "^2.1.5",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "babel": "^5.8.23",
    "babel-core": "^6.13.2",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-transform-es2015-modules-umd": "^6.12.0",
    "babel-preset-es2015": "^6.13.2",
    "babel-preset-react": "^6.11.1",
    "bootstrap": "^3.3.7",
    "eslint": "~2.11.1",
    "eslint-config-airbnb": "~9.0.1",
    "eslint-import-resolver-webpack": "~0.4.0",
    "eslint-loader": "~1.3.0",
    "eslint-plugin-import": "~1.12.0",
    "eslint-plugin-jsx-a11y": "~1.3.0",
    "eslint-plugin-react": "~5.1.1",
    "webpack": "^1.12.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-all": "node ./node_modules/webpack/bin/webpack.js && node ./node_modules/webpack/bin/webpack.js -p -d && node ./node_modules/webpack/bin/webpack.js -var -p -d && node ./node_modules/webpack/bin/webpack.js --config webpack.config.example.js",
    "build": "node ./node_modules/webpack/bin/webpack.js && node ./node_modules/webpack/bin/webpack.js -p -d && node ./node_modules/webpack/bin/webpack.js -var -p -d",
    "watch": "node ./node_modules/webpack/bin/webpack.js --watch",
    "build-example": "node ./node_modules/webpack/bin/webpack.js --config webpack.config.example.js",
    "watch-example": "node ./node_modules/webpack/bin/webpack.js --config webpack.config.example.js --watch",
    "lint": "eslint --fix ./src/**"
  },
  "author": "Brett Thom",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/brettjthom/react-basic-table.git"
  }
}

Webpack for example

var webpack = require('webpack');

var config = {
    entry: './index.jsx',
    output: {filename: 'bundle.js'},
    resolve: {
        extensions: ['', '.js', '.jsx'] 
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            exclude: /(node_modules)/,
            loaders: [
                'babel-loader?presets[]=react,presets[]=es2015',
            ]
        }]
    },
    plugins: []
}

module.exports = config;

package.json for example

{
  "name": "test-table",
  "version": "1.0.0",
  "description": "",
  "main": "index.jsx",
  "scripts": {
    "build": "node ./node_modules/webpack/bin/webpack.js"
  },
  "devDependencies": {
    "webpack": "~1.13.1",
    "babel-loader": "~6.2.4",
    "babel-preset-react": "~6.5.0",
    "babel-preset-es2015": "~6.9.0",
    "babel-core": "~6.9.1"
  },
  "dependencies": {
    "react": "~15.1.0",
    "react-dom": "~15.1.0",
    "react-basic-table": "^1.0.4"
  },
  "author": "",
  "license": "ISC"
}

thank

Answer 1

https://github.com/brettjthom/react-basic-table/blob/master/package.json 7

"react": "~15.1.0", // from "^0.13.3"

. .

0.14+ api.

Answer 2

, React , React.

, webpack React . webpack :

output: {
  path: './assets/javascripts/build/',
  filename: 'MyTableComponent.js',
  libraryTarget: 'umd',
  library: 'MyTableComponent',
  umNamedDefine: true
}

React init(), ReactDom DOM node. , , Table, webpack - :

import React from 'react'
import ReactDOM from 'react-dom'

class MyTableComponent extends React.Component {

  render() { }

}

// Now the method that will mount this component
function init(container, props) {
  let component = (
    <EmbeddedViewer props={props} />
  )

  ReactDOM.render(component, container)
}

// Just export the init() method
export { init }

, , , init. :

<script type="text/javascript" src="{{ base_url('assets/javascripts/build/MyTableComponent.js') }}"></script>
<script >
  document.addEventListener('DOMContentLoaded', ready, false);

  function ready() {
    var container = document.getElementById('container')
    MyTableComponent.init(container, {})
  }
</script>

webpack .

!