React FixedDataTable Webpack bundle - Uncaught TypeError: Cannot read property 'requestAnimationFrame' of undefined

Question

我创建了一个名为 MyDataTable 的简单组件，作为 React FixedDataTable 组件的包装器，并将其与 Webpack 捆绑在一起。从此捆绑包生成的文件称为 my-components.js。直到这里才真正复杂。你可以试试源码看看效果如何：https://github.com/cosminnicula/fdtwebpack

现在，第二步是在单独的项目中使用这个 my-components.js 库。在这里 https://github.com/cosminnicula/fdtwebpackclient 你可以看到我是如何导入库并尝试使用 <MyDataTable /> 组件的：

'use strict';
//fdtwebpackclient/src/main.jsx

import React from 'react';
import MyDataTable from './../lib/my-components.js';

React.render(
    <div>
        Hello MyDataTable!
        <MyDataTable></MyDataTable>
    </div>
    , document.body
)

但是，如果我尝试浏览 index.html，我会收到一个严重的错误，我找不到合理的解释："Uncaught TypeError: Cannot read property 'requestAnimationFrame' of undefined"。

顺便说一句，包装器组件是从这里复制粘贴的 http://jsbin.com/temufa/18/edit?html,js,output，所以它应该可以工作。

知道这个错误吗？

Answer 1

我认为问题在于你有一个捆绑包的情况。 FixedDataTable 似乎在寻找全局上下文（即 window）。此处中断。

您可以像这样将 FixedDataTable 作为外部推送到那里，而不是将一个包捆绑在一个包中：

externals: {
    'fixed-data-table': 'fixed-data-table',
},

包装器可能应该使用 FixedDataTable 作为对等依赖项。那么您的主要项目将直接依赖于 FixedDataTable。 Webpack 可以处理将依赖项映射到您的包装器。

Answer 2

我已经确定了问题所在，解决方法也很简单。 fdtwebpackclient 内更改：

import MyDataTable from './../lib/my-components.js';
...
<MyDataTable></MyDataTable>

与：

import MyComponents from './../lib/my-components.js';
...
<MyComponents.MyDataTable></MyComponents.MyDataTable>

React FixedDataTable Webpack bundle - Uncaught TypeError: Cannot read property 'requestAnimationFrame' of undefined

React FixedDataTable Webpack bundle - Uncaught TypeError: Cannot read property 'requestAnimationFrame' of undefined

reactjs

webpack