React: create-react-class UMD module does not work in AMD environment

Created on 15 May 2017  ·  23Comments  ·  Source: facebook/react

Most helpful comment

This should be fixed with [email protected]. Please verify (I plan to publish the final 15.6.0 version of it tomorrow).

All 23 comments

What would be the right fix here? These modules were really meant as one-offs, and I’m not sure we plan to support AMD there unless there’s an easy fix.

How is the UMD module generated?

@gaearon I don't really understand where that code is coming from or how it's bundled, but it looks like it only works with React being globally defined, that must be a bug surely?

Unfortunately it’s not really generated—we didn’t intend to post new versions, and there was some manual fiddling with Browserify-ed bundles to tack createClass onto the React global. Any fix would have to be manual.

it looks like it only works with React being globally defined, that must be a bug surely?

We are looking at the UMD bundle. Yes, this looks like a bug, I’m not disputing that, but it works in the browser (which was the main reason we made those bundles). So it’s not a high priority issue, but we’d love to see a fix there.

I'll see what I can do.

(function(f) {
  if (typeof exports === "object" && typeof module !== "undefined") {
    module.exports = f(require('react'));
  } else if (typeof define === "function" && define.amd) {
    define(['react'], f);
  } else {
    var g;
    if (typeof window !== "undefined") {
      g = window;
    } else if (typeof global !== "undefined") {
      g = global;
    } else if (typeof self !== "undefined") {
      g = self;
    } else {
      g = this;
    }
    if (typeof g.React === "undefined") {
      throw Error('React module should be required before createClass');
    }
    g.createReactClass = f(g.React);
  }
})(function(React)...

Should do it I think? Haven't tested. EDIT: Wups, changed React to react.

LGTM

Can you try preparing .js and .min.js for this change, based on the versions checked into 15-stable? I know it doesn’t sound like much fun.

@gaearon Branch 15-stable?

Yep.

May I know how files in addon/create-react-class/ be generated?

Even I have edited addons/create-react-class/create-react-class.js, I cannot get the .min.js one by running npm run build etc.

So, how can I get such minified file? Or, which source file I should edited instead?

It was generated by hand as a one-off because we didn’t think we’d make any changes to it. It’s silly but it is what it is. If you send a PR against non-minified version, I can minify it by hand again.

Pull request sent. I have tried this one in my requirejs amd environment. I
haven't found any problems. Please check.

2017年5月24日 18:22,"Dan Abramov" notifications@github.com寫道:

It was generated by hand as a one-off because we didn’t think we’d make
any changes to it. It’s silly but it is what it is. If you send a PR
against non-minified version, I can minify it by hand again.


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react/issues/9689#issuecomment-303681911,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADuAoymDnqvkTe2yHMTkLHxbDe2VRS7Pks5r9ATMgaJpZM4Na-SX
.

Is this only a problem for create-react-class, or for every addon?

During the progress of upgrading from 15.4.4 to 15.5.4, this is the only
problematic module I have encountered.

2017年5月24日 18:37,"Dan Abramov" notifications@github.com寫道:

Is this only a problem for create-react-class, or for every addon?


You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/facebook/react/issues/9689#issuecomment-303685818,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ADuAo4JRsx6hb0keDheRbZsg6Q88mxs-ks5r9Ah1gaJpZM4Na-SX
.

AMD is broken again?
In the react-dom.min.js (ReactDOM v15.5.4)require("react") makes impossible to use it with require.js

requirejs.config({
    paths: {
        jsx: '../vendor/react/jsx',
        JSXTransformer: '../vendor/react/JSXTransformer',
        React    : '../vendor/react/react.min',
        ReactDOM: '../vendor/react/react-dom.min',
    },
    /// ... skipped...
});

It rise up Uncaught Error: Script error for "react", needed by: ReactDOM
But if replace
React : '../vendor/react/react.min', to react : '../vendor/react/react.min',
It cause Script error for "React", needed by: ../dist/my-component

Normally, in components, i do import React from 'react';
So, in the react-dom.min.js, it should be the same, React name, i guess.

This doesn’t sound like a related issue to me. Can you file a new issue with a project reproducing it?

@gaearon , it sounds like this issue will not be resolved until 15.6 released?

Yes, we plan to fix it in 15.6.

Oh, you know about it and even have plans. Perfect!
So I will not create a new issue in this case.

@ua9msn I was referring to the issue in this thread (which doesn't sound related to what you described). Please file a new issue about the problem you experienced with a minimal reproducing example.

This should be fixed with [email protected]. Please verify (I plan to publish the final 15.6.0 version of it tomorrow).

Cool. It works. Thanks.

Was this page helpful?
0 / 5 - 0 ratings