The external React ponent says Uncaught TypeError: Cannot read property 'Component' of undefined when I link as npm package.

I link a package in package.json as "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 that error. The full repo is here I made a small example to illustrate.

The react-mapbox package is my own, maybe I build it wrongly? This is its repo I built it with webpack, like that .config.js As I suppose, this build does not include react package assuming that this will be at the project which link it. But the ponent still do not see react object.

UPD

I added import React from 'react'; as @aulizko suggested, but this only provided React object onto a page. It still was not visible for the ponent.

To fix this I had to provide this changes I required react in the code of the ponent as well. And I have to build with Babel. For some reason the webpack build gives the same error even if react is required. I created a branch to illustrate this Now I'm happy with Babel, but with this branch you can see what's wrong with webpack if interested.

The external React ponent says Uncaught TypeError: Cannot read property 'Component' of undefined when I link as npm package.

I link a package in package.json as "react-mapbox": "https://github./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 that error. The full repo is here https://github./varya/react-mapbox-test I made a small example to illustrate.

The react-mapbox package is my own, maybe I build it wrongly? This is its repo https://github./varya/react-mapbox I built it with webpack, like that https://github./varya/react-mapbox/blob/master/webpack.config.js As I suppose, this build does not include react package assuming that this will be at the project which link it. But the ponent still do not see react object.

UPD

I added import React from 'react'; as @aulizko suggested, but this only provided React object onto a page. It still was not visible for the ponent.

To fix this I had to provide this changes https://github./varya/react-mapbox/mit/2687d66025aaa84553a79850aa8686e88f1f39d9 I required react in the code of the ponent as well. And I have to build with Babel. For some reason the webpack build gives the same error even if react is required. I created a branch to illustrate this https://github./varya/react-mapbox/tree/webpack Now I'm happy with Babel, but with this branch you can see what's wrong with webpack if interested.

• javascript
• reactjs

4 Answers 4

You're probably bundling your module as UMD which is causing the bundle to utilized a global React variable which doesn't exist in the consumer app. You need to export the bundle as a CommonJS or AMD module using https://webpack.github.io/docs/configuration.html#output-librarytarget. Simple add libraryTarget: 'monjs2 or libraryTarget: 'amd' to the output key in the webpack config and make sure you are importing react in your ponent.

I added import React from 'react'; as @aulizko suggested, but this only provided React object onto a page. It still was not visible for the ponent.

To fix this I had to provide this changes https://github./varya/react-mapbox/mit/2687d66025aaa84553a79850aa8686e88f1f39d9 I required react in the code of the ponent as well. And I have to build with Babel. For some reason the webpack build gives the same error even if react is required. I created a branch to illustrate this https://github./varya/react-mapbox/tree/webpack Now I'm happy with Babel, but with this branch you can see what's wrong with webpack if interested.

The thing is that the jsx-code that you see in your editor is not the code that will be executed by node or browser.

If you look into code that are generated by the babel, you'll see something like this:

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

So as you can see it uses React constant under the hood.

You need to explicitely import React if you want to use jsx-code.

Add something like this in your code and it'll work:

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

import {render} from 'react-dom';

import MapBox from "react-mapbox";

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

You have to import React's Component it this way:

import {Component} from 'react';

or even:

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