Question

当我作为npm包链接时，外部React组件显示Uncaught TypeError: Cannot read property 'Component' of undefined。

我将package.json中的包与"react-mapbox": "https://github.com/varya/react-mapbox.git"相关联。然后我在代码中使用它

import {render} from 'react-dom';

import MapBox from "react-mapbox";

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

但没有任何作用，我得到了那个错误。完整的回购在这里https://github.com/varya/react-mapbox-test我做了一个小例子来说明。

react-mapbox包是我自己的，也许我错误地构建了它？这是它的回购https://github.com/varya/react-mapbox 我使用webpack构建它，就像那个https://github.com/varya/react-mapbox/blob/master/webpack.config.js正如我想的那样，这个构建不包括react包，假设它将在链接它的项目中。但该组件仍未看到反应对象。

UPD

我在@aulizko建议中添加了import React from 'react';，但这只在页面上提供了React对象。该组件仍然无法看到。

要解决此问题，我必须提供此更改https://github.com/varya/react-mapbox/commit/2687d66025aaa84553a79850aa8686e88f1f39d9 我在组件的代码中也需要react。我必须用巴别塔建造。由于某种原因，即使需要react，webpack构建也会出现相同的错误。我创建了一个分支来说明这个https://github.com/varya/react-mapbox/tree/webpack现在我对Babel感到满意，但是如果有兴趣的话，你可以通过这个分支看到webpack有什么问题。

Answer 1

您可能将您的模块捆绑为UMD，这导致捆绑包使用了消费者应用程序中不存在的全局React变量。您需要使用https://webpack.github.io/docs/configuration.html#output-librarytarget将捆绑包导出为CommonJS或AMD模块。只需将libraryTarget: 'commonjs2或libraryTarget: 'amd'添加到webpack配置中的output键，并确保在组件中导入react。

Answer 2

我在@aulizko建议中添加了import React from 'react';，但这只在页面上提供了React对象。该组件仍然无法看到。

要解决此问题，我必须提供此更改https://github.com/varya/react-mapbox/commit/2687d66025aaa84553a79850aa8686e88f1f39d9 我在组件的代码中也需要react。我必须用巴别塔建造。由于某种原因，即使需要react，webpack构建也会出现相同的错误。我创建了一个分支来说明这个https://github.com/varya/react-mapbox/tree/webpack现在我对Babel感到满意，但是如果有兴趣的话，你可以通过这个分支看到webpack有什么问题。

Answer 3

问题是你在编辑器中看到的jsx代码不是由节点或浏览器执行的代码。

如果您查看由babel生成的代码，您将看到如下内容：

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

所以你可以看到它在引擎盖下使用React常数。

如果您想使用jsx代码，则需要明确导入React。

在您的代码中添加类似的内容，它将起作用：

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

import {render} from 'react-dom';

import MapBox from "react-mapbox";

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

Answer 4

你必须以这种方式导入React的Component：

import {Component} from 'react';

甚至：

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

外部反应组件无法看到React.Component

4 个答案: