The external component of the reaction cannot see React.Component

Question

The external React component says Uncaught TypeError: Cannot read property 'Component' of undefinedwhen I refer as an npm package.

I will bundle the package in package.jsonlike "react-mapbox": "https://github.com/varya/react-mapbox.git". Then i use it in code

import {render} from 'react-dom';

import MapBox from "react-mapbox";

render(
  <div>
    <h1>Hello, world!</h1>
    <MapBox />
  </div>
  ,
  document.getElementById('example')
);

But nothing works, I get this error. The full repo is here https://github.com/varya/react-mapbox-test I made a small example to illustrate.

react-mapbox - , , ? https://github.com/varya/react-mapbox webpack, https://github.com/varya/react-mapbox/blob/master/webpack.config.js , , , , . .

UPD

import React from 'react';, @aulizko, React . .

, https://github.com/varya/react-mapbox/commit/2687d66025aaa84553a79850aa8686e88f1f39d9 react . . - webpack , react. , https://github.com/varya/react-mapbox/tree/webpack Babel, , webpack, .

Answer 1

import React from 'react';, @aulizko, React . .

, https://github.com/varya/react-mapbox/commit/2687d66025aaa84553a79850aa8686e88f1f39d9 react . . - webpack , react. , https://github.com/varya/react-mapbox/tree/webpack Babel, , webpack, .

Answer 2

, jsx-, , , node .

, babel, - :

(0, _reactDom.render)(React.createElement(
  'div',
  null,
  React.createElement(
    'h1',
    null,
    'Hello, world!'
  ),
  React.createElement(_reactMapbox2['default'], null)
), document.getElementById('example'));

, , React.

React, jsx-.

- :

import React from 'react'; // <!--- add this!!!

import {render} from 'react-dom';

import MapBox from "react-mapbox";

// the rest of your code goes here...

Answer 3

, UMD, React, . CommonJS AMD, https://webpack.imtqy.com/docs/configuration.html#output-librarytarget. libraryTarget: 'commonjs2 libraryTarget: 'amd' output webpack , React .

Answer 4

React Component :

import {Component} from 'react';

:

import React, { Component, PropTypes } from 'react';