browserify / browserify/factor-bundle

Uncaught TypeError: Cannot read property '0' of undefined at Object.require.624../cjs/react-is.development.js

オープン
#94 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
JavaScript
スター
397
フォーク
24
PR マージ指標
30日以内にマージされた PR はありません

説明

I have some React components that I am bundling with browserify, and I decided to try out factor-bundle to split code between pages of my app. Here is the js file I have written to browserify with factor-bundle:

```
var browserify = require('browserify');
var fs = require('fs');

var pwd = './usr/local/www/documents/media/js/react/'
var dest = './usr/local/www/documents/media/js/browserified/'

var files = [ pwd + 'a.js', pwd + 'b.js' ];
var b = browserify(files);
b.plugin('factor-bundle', {
outputs: [ dest + 'a.js', dest + 'b.js']
});
b.bundle().pipe(fs.createWriteStream(dest + 'common.js'));
```

When importing that newly created a.js bundle into an HTML doc, I get the following error that crashes the React component:

```
Uncaught TypeError: Cannot read property '0' of undefined
at Object.require.624../cjs/react-is.development.js (eval at globalEval (jquery.min.js:2), :57741:18)
at s (eval at globalEval (jquery.min.js:2), :1:262)
at eval (eval at globalEval (jquery.min.js:2), :1:313)
at Object.require.615../DataUtils (eval at globalEval (jquery.min.js:2), :57426:16)
at s (eval at globalEval (jquery.min.js:2), :1:262)
at eval (eval at globalEval (jquery.min.js:2), :1:313)
at Object.require.579.../util/DataUtils (eval at globalEval (jquery.min.js:2), :52263:19)
at s (eval at globalEval (jquery.min.js:2), :1:262)
at eval (eval at globalEval (jquery.min.js:2), :1:313)
at Object.require.587../cartesian/Area (eval at globalEval (jquery.min.js:2), :37928:14)
```

The error is not very informative, but by removing some lines of code, I was able to find that the presence of the following line was causing the issue to appear:

`import {Area, AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer} from "recharts";`

I am not sure to think that this issue has anything to do with recharts. If I browserify all my react code into a single bundle, I am able to import and use that bundle just fine. But if I import a.js with factor-bundle, this issue will appear.

Using the links given by the console log's error, the line that is failing looks something like this:
```
exports.parseChildIndex = parseChildIndex;
},{"./DataUtils":821,"./ShallowEqual":829,"lodash/flatten":650,"lodash/get":651,"lodash/isArray":656,"lodash/isNil":665,"lodash/isString":671,"react":757,"react-is":837}],837:[function(require,module,exports){
arguments[4][722][0].apply(exports,arguments)
},{"./cjs/react-is.development.js":835,"./cjs/react-is.production.min.js":836,"_process":710,"dup":722}],836:[function(require,module,exports){
....
```

Where the bolded [0] is what is marked as the breaking code. Not sure how or why this is happening, but using normal browserify does not cause this issue, which makes me think it has more to do with what's going on in factor-bundle than the `recharts` package.

I know this is an obscure issue. Any help would be appreciated because code-splitting would be very helpful for my app.

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

調査の方向性

Browserify スクリプトとその factor-bundle 出力から始め、次に recharts の import と生成された a.js バンドルを使って失敗を再現します。生成された factor bundle を通常の Browserify バンドルと比較し、arguments[4][722][0] 周辺の react-is セクションを調査します。分割されたバンドルが TypeError なしで読み込まれれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
javascript, react
領域
build-system, tooling
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
停滞
明瞭さ
説明が足りない
初心者へのやさしさ
30/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。