Fluentui: office-ui-fabric-react.umd.js requires "ReactDOM"

[LukeOwlclaw]

Environment Information

• Package version(s): [email protected]

Reproduce:

• npm i office-ui-fabric-react
• Open node_modules\office-ui-fabric-react\dist\office-ui-fabric-react.umd.js and look for require("ReactDOM") and define(["React","ReactDOM"].

Actual behavior:

ReactDOM does not exist (anymore).

Expected behavior:

It probably should require react-dom.
And about define(["React": Shouldn't React be lowercased here?

Priorities and help requested:

Are you willing to submit a PR to fix? No

Requested priority: I think this is a blocking issue since the UMD package just won't work. But since nobody noticed so far and I am no expert at all, I just let you decide.

[KevinTCoughlin]

Thanks for reporting @LukeOwlclaw. Will take a look ASAP.

[LukeOwlclaw]

Is there any progress? For each new version I need to fix the bug manually.

[ronaldborman]

If you (just like me) are bitten by this bug and are using RequireJS, there is a workaround without modifying the source. Just add the following to the data-main entry point:

  map: {
    'office-ui-fabric-react': {
      'ReactDOM': 'react-dom',
      'React': 'react'
    }
  }

[luthv]

Got bitten by this as well, I was trying to use fluentui with single-spa and the uppercase naming is breaking other libraries that are loaded with systemjs.

An alternative would be to define the react externals with lower case and the alternative casing as root property, as described in this webpack doc

module.exports = {
  //...
  externals : {
    react: {
      commonjs: 'react',
      amd: 'react',
      root: 'React' // indicates global variable
    },
   "react-dom": {
      commonjs: 'react-dom',
      amd: 'react-dom',
      root: 'ReactDOM' // indicates global variable
    }
  },