Can I detect if my script is being processed by Webpack?

Question

I'm trying to use isomorphic rendering in React so I can output static HTMLs as documentation for my application.

The problem is that I have a particular component that only runs on the client, because it references window. The solution is obvious: Not to render it on the server. Yes, I can not to render it on the server, but still, I need it to be included in my webpack bundle so I can render it on the client. The problem is that, the code that prevents my component from rendering on the server is:

function isServer() {
    return ! (typeof window != 'undefined' && window.document);
}

But isServer() is also true when webpack is bundling, and I want it to work normally while webpack is running.

So, how do I detect that webpack is running?

I'm looking for something like this:

function isWebpack() {
    // what do I put here?
}

Now I can render my client-only component normally if isServer() and !isWebpack().

Thanks!

EDIT

This is the component I'm trying to build:

function isServer() {
    return ! (typeof window != 'undefined' && window.document);
}

import React from 'react';

const LED = React.createClass({

    render: function () {

        if(!isServer()) {
            var LiveSchemaEditor  = require('../../src/components/LiveSchemaEditor.js');
            return <LiveSchemaEditor />;
        }

        return <div>I AM IN THE SERVER</div>;
    }
});

export default LED;

What's bugging me is that the webpack bundle includes the content of LiveSchemaEditor.js but it still prints I AM IN THE SERVER while on client. This doesn't make sense.

Answer 1

Put this in your webpack config under plugins:

new webpack.DefinePlugin({
    'process.env': {
        NODE_ENV: JSON.stringify('production'),
        APP_ENV: JSON.stringify('browser')
    }
}),

With that you can check if you're running in a browser or not this way:

if (process.env.APP_ENV === 'browser') {
    const doSomething = require('./browser-only-js');
    doSomething();
} else {
    const somethingServer = require('./server-only-js');
    somethingServer();
}

if (process.env.APP_ENV !== 'browser') {
    const somethingServer = require('./server-only-js');
    somethingServer();
}

Because these environment variables get replaced during the build, Webpack will not include resources that are server-only. You should always do these kinds of things in an easy way, with a simple, direct compare. Uglify will remove all dead code.

Since you used a function before and the function is not evaluated during build, Webpack wasn't able to know what requires it could skip.

(The NODE_ENV-variable should always be set to production in production mode, since many libraries including React use it for optimisations.)

Answer 2

You could also do this -

typeof __webpack_require__ === 'function'

I'm guessing this might change at anytime so use with caution. :/

Answer 3

in Node.js global.global is cycle reference, Webpack is not creating this cycle:

function is_node() {
    return typeof global !== 'undefined' && global.global === global;
}

Answer 4

Here's an improved version of @Ambroos ' answer.

// webpack.config.js
const DefinePlugin = require('webpack').DefinePlugin;

const config = {
    ...
    plugins: [
        new DefinePlugin({
            'DEBUG': false,
        }),
    ],
};

module.exports = (env, argv) => {
    switch (argv.mode) {
        case 'development': {
            config.plugins[0].definitions.DEBUG = true;
            break;
        }

        case 'production': {
            break;
        }

        default: {
            throw new Error('No matching configuration was found!');
        }
    }

    return config;
};

Answer 5

Changing the output of render() cause react to fail rehydrating the component, so serverside rendering will be discared.

Instead, consider using ComponentDidMount, which runs exclusively in the browser:

//file level const (cache the result)
let LiveSchemaEditor = () => null;

//...

componentDidMount() {
    LiveSchemaEditor  = LiveSchemaEditor || require('../../src/components/LiveSchemaEditor.js');
    this.setState({ editor: <LiveSchemaEditor/> });
}

render() {
    if(!this.state.editor){
        return <div>loading...</div>;
    }

    return this.state.editor;
}

Answer 6

This is what worked for me.

if(typeof process.env.NODE_ENV === "undefined") {
    // Not webpack
} else {
    // Its webpack
}