First occurrence of require('') in bundle is not getting literalified

[tssajo]

Hi,

I have a project in which I use react.js and require('react') is what I want to literalify. So I put the following into my package.json file:

"literalify": {"react": "window.React"}

I use browserify to create the bundle on the fly, which works except for this bug.

I have many occurrences of

var React = require('react'),

in my source files and all of them are getting replaced with

var React = window.React,

as expected, except the very first one!

Here is how I run browserify:

browserify({
    transform: [reactify]
})
.external('react')
.require('./ordering.jsx')
.require('./cartStore.js')
.transform(literalify.configure({'react': 'window.React'}))
.bundle()

I have no idea why literalify is not replacing the very first require('react') with window.React which occurs in my ./ordering.jsx file. I spent hours investigating this but I got nowhere so far.

If I send you my files, can you please take a look at them?

Is it possible that it is related to the file extension .jsx being used on that file instead of simply .js ? I must use .jsx file extension because of react.js / JSX ...

[tssajo]

Well, I just figured it out. I had to add {global: true} option to the transform like this:

.transform({global: true}, literalify.configure({'react': 'window.React'}))`

The above fixed it. I wish I didn't spend 5 hours on this... :( Please consider including this info as your browserify example on your main page.

[pluma]

That's odd. global: true should only be necessary if you need to convert third-party modules (i.e. files that reside in node_modules). I'm more inclined to believe that it has to do with the file extension and/or a conflict with the reactify transform.

Thanks for the report. I'll have to investigate this further.

[styfle]

@tssajo I had the same problem and adding global fixed it like you said. Thanks!

Below is my code

index.js

var browserify = require('browserify');
var literalify = require('literalify');
var filename = process.argv[2];

if (!filename) {
    console.log('');
    return;
}

browserify()
    .add(filename)
    .transform(
        {global: true},
        literalify.configure({
            'react': 'window.React',
            'react-dom': 'window.ReactDOM',
        })
    )
    .bundle()
    .pipe(process.stdout);

Usage

node index.js "path/to/my/main.js" > output.js

[rarkins]

+1 same problem/solution here

[tssajo]

Well, it sucks that after one and a half years I first reported this problem it is still there. So much happened since then. For example, I no longer use, or would ever touch Nodejs, I've been using Go ("golang") instead for the past year or so. I will never look back to the crappy world of bug-ridden Nodejs world! ;)