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，我会收到一个令人讨厌的错误，我找不到合理的解释：＆＃34; Uncaught TypeError：无法读取属性＆＃39; requestAnimationFrame＆＃39 ;未定义＆＃34;。

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

对此错误有任何想法吗？

Answer 1

我已经确定了问题并且解决方案非常简单。内部fdtwebpackclient更改：

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

使用：

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

Answer 2

我认为问题是你在捆绑的情况下有捆绑。 FixedDataTable似乎在寻找全局背景（即window）方面做了一些诡计。这打破了。

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

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

然后，包装器可能会使用FixedDataTable作为对等依赖项。您的主要项目将直接依赖于FixedDataTable。 Webpack可以处理将依赖关系映射到包装器。

React FixedDataTable Webpack bundle - Uncaught TypeError：无法读取属性＆＃39; requestAnimationFrame＆＃39;未定义的

2 个答案: