Skip to content

Attempt to externalize React and ReactDOM when use Material UI with webpack

Notifications You must be signed in to change notification settings

vasconita/using-material-ui-webpack-externalizing-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Purpose

This example project has been created just for clarify why there's no way to externalize React from MaterialUI using Webpack with externals.

The project has two builds, each one with its entry point:

  • The first one instantiates MaterialUI Avatar component. As you can see, React is not included in the bundle. This is the desired behaviour because in webpack config file React is marked as external.
  • The second one instantiates MaterialUI RaisedButton component. In this case React is included in the result bundle. This is not correct, in webpack config file React is marked as external.

Both have same webpack config params.

Usage

In order to build the first example, working good, execute:

npm run build-good

In order to build the second example, working bad, execute: npm run build-bad

npm run build-bad

You will see the results in dist folder.

Why?

It seems Webpack resolver doesn't filter externals inside sources of referenced node packages in node_modules. Probably it makes sense thinking about package name collision.

The problem of second example is it has a reference to react-addons-pure-render-mixin package (that in fact is just a link to react package again). Since this import statement webpack stop resolving react as external.

About

Attempt to externalize React and ReactDOM when use Material UI with webpack

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published