Exclude react from bundle, and include it directly from the layout

[YoussefTaghlabi]

I'm including React directly from my layout, and I would like webpack to exclude it from the bundle, and make react refers to the window global object React

I'm using the following:

{
        ...
        externals: {
            // Use external version of React
            "react": "React"
        },
        plugins: [
            new webpack.IgnorePlugin(/react/)
        ]
        ...
}

react gets excluded from the bundle, but client side I'm getting Uncaught Error: Cannot find module "react".

Any hints?

[xusiyuan841028]

@YoussefTaghlabi Do you add <script> tag in your page?

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>
<script type="text/javascript" src="/scripts/app.bundle.js"></script>

[YoussefTaghlabi]

@xusiyuan841028 Yep, I do. But webpack is looking for react while on my page I have React.
Even having window.react = React right after loading my React script from CDN doesnt solve it.
Internally webpack is returning Uncaught Error: Cannot find module "react"

[IngwiePhoenix]

Solution:

• Create a JS file called dummyReact.js

• Fill that with these contents:

  module.exports = window.React;

• Now add an alias in your config.webpack.js

  "react": "dummyReact.js"

• Make sure your react is loaded before the WebPack bundle, and this should work.

In addition, you can also use the ProvidePlugin in conjunction with the dummyReact.js.

[YoussefTaghlabi]

Thanks @IngwiePhoenix , the following did work indeed:

{
    ...
    resolve: {
        extensions: ['', '.js'],
        alias: {
            "react": "dummyReact.js"
        }
    },
    ...
    externals: {
        // Use external version of React
        "react": "React"
    },
    ...
    module: {
        noParse: [ "react" ]
    }
}

I had to remove new webpack.IgnorePlugin(/react/) for it to work as it seems webpack completely ignores anything that has to do with react.

My next question, how can I make use of ProvidePlugin in this use case?

[IngwiePhoenix]

Straight from the docs:

plugin ProvidePlugin
This plugin makes a module available as variable in every module. The module is required only if you use the variable.

Example: Make $ and jQuery available in every module without writing require("jquery").

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery"
})

http://webpack.github.io/docs/shimming-modules.html#order-of-loaders

I use it exactly like that for jQuery and other modules. Use something like this for React, maybe.

new webpack.ProvidePlugin({
    React: "React", react: "React", "window.react": "React", "window.React": "React"
})

ProvidePlugin correctly resolves aliases too. So if you just add the plugin like os, itll "just work" :)

[YoussefTaghlabi]

Perfect!
Thanks @IngwiePhoenix !

[IngwiePhoenix]

If you wonder how exactly this affects your code:

var $ = require("jquery");
reuqire("jquery-plugin");
require("other-plugin");

code();

// VS.

code();

Combining Alias and Provide, you are able to pretty much reduce the amount of "startup" code you write - effectively saving yourself lines of code (which in turn saves bytes with Uglify).

[IngwiePhoenix]

@YoussefTaghlabi Very welcome. =)

[YoussefTaghlabi]

That works really well!!
One more thing, is there anyway we can get rid off dummyReact.js and somehow directly export window.React from webpack?
Now that it's working, I'm trying to make it graceful :)

[IngwiePhoenix]

I have no idea how to achieve this, sorry. :) But this is actually a graceful soltution imo. But if you ever find something, feel free to post it.

[YoussefTaghlabi]

I sure will. Thanks for your help!

[sokra]

{
        ...
        externals: {
            // Use external version of React
            "react": "React"
        },
       ...
}

should be enough

[YoussefTaghlabi]

either external or ProvidePlugin works in conjunction with alias.