umd build fix

[franckamayou]

What kind of change does this PR introduce?

• bugfix
• feature
• refactoring / style
• build / chore
• documentation

Did you add tests for your changes?

• Yes, my code is well tested
• Not relevant

If relevant, did you update the documentation?

• Yes, I've updated the documentation
• Not relevant

Summary

This pr solves a problem for the umd build with React loaded from the <script> tag as a global library. When including React from the script tag, it is available to the global namespace as the window.React object. However, when specifying the external library in webpack externals: { "react" : "react" }, it will return an error Uncaught Error: Cannot find module "react". since React is not available as a module but instead as a global object. Using externals: { "react" : "React" } instead will actually make Webpack fail to build, since the import React from "react"; statement will not match any module.

It appears a solution, based on the comments on the link below (by user jide), is to specify externals: { "react" : "umd react" }, which takes care of both cases.

Does this PR introduce a breaking change?

Other information

This is a link describing the issue with webpack, packaging with react as an external library and umd.
Another link from stackoverflow with another potential solution.

[codecov]

Codecov Report

Merging #564 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #564   +/-   ##
=======================================
  Coverage   99.49%   99.49%           
=======================================
  Files           3        3           
  Lines         197      197           
  Branches       56       56           
=======================================
  Hits          196      196           
  Misses          1        1

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d4e7763...a768f74. Read the comment docs.

[okonet]

I'm not sure I'm familiar with this hack. Is it somewhere in docs?

Also, what is the problem exactly it solves? Please update the PR description.

[franckamayou]

Updated the PR description. Let me know if this is clear enough.

[rxmarbles]

It is an interesting fix, however I think we should stay inline w/ the webpack documentation which is that if you are going to use react as a script vs in your bundle we should be splitting our component externals the way the stack overflow answer provided

externals: {
  "react": {
    root: 'React',
    commonjs2: 'react',
    commonjs: 'react',
    amd: 'react'
  }
}

that way when webpack creates the bundle to should look for each of those and use the one accessible
@okonet what do you think?

[okonet]

Yes, I agree.

[okonet]

Can you please try following the official way and check if it solves it?

[franckamayou]

Sure thing, I'll let you know when I update the PR then

[franckamayou]

I've updated the PR, tested and verified that it works with my application.

[okonet]

Please fix the failing build and it’s good to go! Thanks!