JSXTransformer in used in r.js optimizer can't load SourceMapGenerator

[thomasboyt]

This is a tricky issue, so I'll do my best to explain:

I've been using the jsx-requirejs-plugin to build my React app using AMD. I've been using a custom branch of React (with custom builds), which is based off of master.

Until recently, everything was working fine. But since 7675611, I've been unable to create optimized builds using the plugin. At first, I assumed it was an issue with the plugin, but it seems that the offending line is the changed transform function:

function transformReact(source) {
  return transform(visitors.react, source, {sourceMap: true});
}

exports.transform = transformReact;

Until this change, {sourceMap: true} wasn't forced on, and things worked just fine. With this change, it's no longer possible to build in an AMD environment, as this line errors out with:

Running "requirejs:dist" (requirejs) task
>> Tracing dependencies for: js/lib/requirejs/require
Error 0
TypeError: undefined is not a function
    at Object../array-set (eval at <anonymous> (/Users/thomasboyt/venmo-devops/venmo-web-views-base/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:23690:38)
, <anonymous>:8707:1)
    at s (eval at <anonymous> (/Users/thomasboyt/venmo-devops/venmo-web-views-base/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:23690:38), <anonymous>:4:5
21)
    at i (eval at <anonymous> (/Users/thomasboyt/venmo-devops/venmo-web-views-base/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:23690:38), <anonymous>:4:5
72)
    at Object../source-map/source-map-consumer (eval at <anonymous> (/Users/thomasboyt/venmo-devops/venmo-web-views-base/node_modules/grunt-contrib-requirejs/node_modules/require
js/bin/r.js:23690:38), <anonymous>:7854:30)
    at s (eval at <anonymous> (/Users/thomasboyt/venmo-devops/venmo-web-views-base/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:23690:38), <anonymous>:4:5
21)
    at i (eval at <anonymous> (/Users/thomasboyt/venmo-devops/venmo-web-views-base/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:23690:38), <anonymous>:4:5
72)
    at transform (eval at <anonymous> (/Users/thomasboyt/venmo-devops/venmo-web-views-base/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:23690:38), <anonym
ous>:10274:30)
    at Object.transformReact [as transform] (eval at <anonymous> (/Users/thomasboyt/venmo-devops/venmo-web-views-base/node_modules/grunt-contrib-requirejs/node_modules/requirejs/
bin/r.js:23690:38), <anonymous>:11686:10)
    at jsx.load.onLoad (eval at <anonymous> (/Users/thomasboyt/venmo-devops/venmo-web-views-base/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:23690:38), <
anonymous>:39:36)
    at Object.text.finishLoad (eval at <anonymous> (/Users/thomasboyt/venmo-devops/venmo-web-views-base/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:23690
:38), <anonymous>:152:13)

My best guess is that the array-set module isn't being correctly loaded (although it is included in the built file), but I don't know enough about Browserify to debug this. Hoping someone else can take a look and find out what's going on.

(in the meantime, I suppose I'll update my branch to undo the change that set {sourceMap: true})

[benjamn]

@thomasboyt is this still happening for you?

[thomasboyt]

@benjamn just updated to v0.9.0, and yep:

$ grunt requirejs
Running "requirejs:app" (requirejs) task
>> Tracing dependencies for: lib/requirejs/require
>> TypeError: undefined is not a function File: js/components/forms/user_add.js:
>> In module tree:
>>     js/app
>>       js/router
>>         js/flows/claim/app_view
>>           js/flows/claim/bank_first
>>             jsx
{ [Error: TypeError: undefined is not a function File: js/components/forms/user_add.js:
In module tree:
    js/app
      js/router
        js/flows/claim/app_view
          js/flows/claim/bank_first
            jsx

    at Object../array-set (eval at <anonymous> (/Users/thomasboyt/venmo-devops/venmo-web-views-base/node_modules/grunt-contrib-requirejs/node_modules/requirejs/bin/r.js:25178:38), <anonymous>:8747:1)
]
  originalError:
   { [TypeError: undefined is not a function File: js/components/forms/user_add.js: ]
     requireModules: [ 'jsx!js/components/forms/user_add' ],
     moduleTree:
      [ 'jsx',
        'js/flows/claim/bank_first',
        'js/flows/claim/app_view',
        'js/router',
        'js/app' ],
     fileName: '/Users/thomasboyt/venmo-devops/venmo-web-views-base/public/lib/jsx-requirejs-plugin/js/jsx.js' } }

Unfortunately still having to maintain my own branch :(

[ying80]

I have the same issue.

[felipecrv]

@thomasboyt thanks for tracking this issue down. I was trying to update React in jsx-requirejs-plugin and was puzzled by this.

I will disable it manually in the modified JSXTranformer jsx-requirejs-plugin provides.