Webpack automatically require a file in all files...?

Question

Using Webpack and building an app in React. In all my files, I have to include to type: var React = require('React'); seems like a useless repetition.

Is there something I can add in the config file ofwebpack to import/require React in all my files?

I would have to double-check, but I think that the way you're doing it now, adds React to your project numerous times, so your *compiled bundle* basically has the same code (React) a bunch times? — Gabriel Kunkel, Feb 02 '16 at 19:51
Possible duplicate of [Define global variable with webpack](https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack) — , Sep 10 '18 at 17:56

score 8 · Accepted Answer · answered Feb 02 '16 at 21:58

8

You can use ProvidePlugin to automatically require React when needed.

Just add to your webpack config file:

var webpack = require('webpack');

module.exports = {
  // Your configuration stuff.
  plugins: [
    new webpack.ProvidePlugin({
      React: 'react'
    })
  ]
};

Every time React is used in a file it will be auto-required/imported without having to do it explicitly.

answered Feb 02 '16 at 21:58

dreyescat

13,558
5
50
38

Working! Thanks. And is there a way to call a child? Ex: For `react-router`, I want to have access to `require('react-router').browserHistory` in all my modules. Is there a way to do similarly? – denislexic Feb 03 '16 at 12:53
@denislexic The provide plugin is very nifty! :-) Is there anything wrong with my recommendation below? (You don't have to vote on it, I'm just wondering if it caused you any trouble... If you tried it and it did or didn't work. I appreciate the feedback.) – Gabriel Kunkel Feb 04 '16 at 00:20
1

@denislexic Try to define `browserHistory: 'react-router/lib/browserHistory'` in the `ProvidePlugin`. So anytime a free `browserHistory` variable appears in your code it should be auto-required. – dreyescat Feb 04 '16 at 18:10
The solution does not work for me with `react-create-app` after running `eject`. – Gal Grünfeld Jun 15 '19 at 08:51

Gabriel Kunkel · Answer 2 · 2016-02-02T20:00:55.600

You only need to require it once in the entry point. While I don't use react, I only include Angular, or any other library that I use, once. Here's an example of how it might look:

// app.ts (my entry point) 
namespace app {
        "use strict";

        //////////// Conditional Requires for Development /////////////
        /* istanbul ignore if: only necessary for development environment */
        if (process.env.NODE_ENV === "development") {
            require("../src/index.html");
        }

        //////////// Require CSS /////////////////////////////////////
        require("../node_modules/codemirror/lib/codemirror.css");
        require("./main.css");

        //////////// Require Libraries ///////////////////////////////
        var angular: IAngularStatic = require("angular");
        require("../node_modules/angular-resource");
        require("../node_modules/angular-ui-codemirror");
        require("../node_modules/angular-sanitize");

        //////////// Initialize Angular //////////////////////////////
        angular.module("app", [
            "ui.codemirror",
            "ngResource",
            "ngSanitize"
        ]);

        //////////// Require Application Components //////////////////
        require("./components/durian.js");
        require("./components/testbox.js");
        require("./moreapplicationfiles/");
    }

This is one file, which I use as the jumping off point for all required libraries and application files.

Once Webpack has packed all of the files together it will do so in the order that I have listed here into one file, so just put React above all application files that use React and they will have access to all React methods and properties. The same advice goes for Flux, Redux, jQuery, or any other library. Of course, not all libraries play nice with Webpack, but it's rare that one doesn't.

As far as adding to the config file... You can also add in additional entry points which can include your JavaScript libraries, by listing all of the libraries in an array at the "entry." You just have to make sure that it will pack these libraries first, so test that they are in the correct order:

// In your webpack.config.js file

    {
        entry: [ "./node_modules/react", "./app.js"],
    }

Webpack automatically require a file in all files...?

2 Answers2