Update to accept new babel 6 module exports #503
Conversation
|
Interesting, could you share a couple files that have the issue? Like, one file that defines a component and another that puts the component in the global namespace? I wonder if, to support this case, it could be: var constructor
// First, try accessing the name globally:
constructor = window[className]
// If that doesn't work, try eval (to handle "My.Namespaced.Component")
if (!constructor) {
constructor = eval.call(window, className)
}
// Then, if it has a `.default` attribute, we assume it's exported from Weback in that way:
if (constructor && constructor.default) {
constructor = constructor.default
} |
| // Assume className is simple and can be found at top-level (window). | ||
| // Fallback to eval to handle cases like 'My.React.ComponentName'. | ||
| var constructor = window[className] || eval.call(window, className); | ||
| var constructor = window[className].default || window[className] || eval.call(window, className); |
There was a problem hiding this comment.
if window[className] returns undefined, will this throw TypeError: Cannot read property 'default' of undefined ?
There was a problem hiding this comment.
Yup, it sure would. Sorry about the delay on this. I think the solution you outlined above would work just fine. I'll update and resubmit.
With the update to Babel 6, modules are being exported differently. For instance, the default module is now under a default key. This is breaking things when using an expose loader with webpack. This adds a check for that before trying to import the module.
This uses @rmosolgo's suggestion for safely grabbing the class constructor from the window. It moves all of the logic into a private function that is called to set the constructor for each className.
|
@rmosolgo Cleaned this up a bit and rebased current master. Hopefully this will pass CI. 👍 |
|
|
||
| // If that didn't work, try eval | ||
| if (!constructor) { | ||
| constructor = eval.call(window, className)' |
|
And to answer your other question @rmosolgo I have bundle files that look something like this: require('expose?React!react');
require('expose?Navigation!../javascripts/application/views/shared/navigation');
require('expose?Flash!../javascripts/application/react-components/flash');
require("font-awesome-webpack!../stylesheets/font-awesome.config.js");
require('../stylesheets/bundles/breweries');Then it's being bundled up by webpack with that file as the entry point. I'm exposing, in this instance, the Navigation and Flash components globally, but they get exported with the |
|
|
||
| // Get the constructor for a className | ||
| // Not a part of the public API | ||
| function getConstructor(className) { |
There was a problem hiding this comment.
this function could be really useful for people using NodeJS-type builds, could you make it part of ReactRailsUJS?
(That way, people could override getConstructor to hook into their build systems!!)
There was a problem hiding this comment.
Oh I didn't think about that. Great idea! Coming...
There was a problem hiding this comment.
Am I reading the diff right? It looks like this function is in the source twice, but we only need the one that's attached to ReactRailsUJS, right?
This moves the getConstructor function into the public API, allowing anyone to override it if they have custom build behaviors that they need to account for.
|
@rmosolgo Ok then. Guess I missed that. Whoops. |
|
Wow, sorry I left this sitting around for so long! I was just thinking "I should write some docs for that new component lookup function" and then I didn't find it on master 😬 Thanks for this! |
|
Shipped in 1.8.0! |
|
|
👍2 participants
With the update to Babel 6, modules are being exported differently. For
instance, the default module is now under a default key. This is
breaking things when using an expose loader with webpack. This adds a
check for that before trying to import the module.