browserify / browserify/factor-bundle

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

Offen
#94 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
Vorherrschende Sprache
JavaScript
Sterne
397
Forks
24
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

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.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Rechercherichtung

Beginne mit dem Browserify-Skript und seinen factor-bundle-Ausgaben und reproduziere dann den Fehler mit dem recharts-Import und dem generierten a.js-Bundle. Vergleiche die generierten factor bundles mit einem normalen Browserify-Bundle und untersuche den react-is-Abschnitt um arguments[4][722][0]; abgeschlossen ist die Aufgabe, wenn das aufgeteilte Bundle ohne den TypeError geladen wird.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
build-system, tooling
Issue-Typ
Bug
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
30/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.