Webpack conditional require

Question

I'm writing an isomorphic Key Value Store with webpack.

This is currently my approach to load the libraries, which obviously doesn't work, because webpack wants to resolve both require. Whats' the right approach?

var db = null;

if (typeof window === 'undefined') {
    // node context
    db = require('level');
} else {
    // browser context
    db = require('gazel');
}

I know, that you can provide a target to webpack. But I have no idea how to use that.

Thanks!

Check out this SO question which deals with conditional build based on environment. — r0dney
– r0dney, Commented Jul 6, 2015 at 15:54
Thanks, indeed this worked :) I set a BROWSER plugin in webpack and now I'm using normal nodejs (node file.js) and webpack for the browser build — vardump
– vardump, Commented Jul 13, 2015 at 16:57

Juho Vepsäläinen · Accepted Answer · 2018-04-01 19:12:45Z

16

I think resolve.alias would work for you. You would set db module to point at level or gazel depending on which build you are creating.

edited Apr 1, 2018 at 19:12

answered Jul 6, 2015 at 18:19

Juho Vepsäläinen

27k13 gold badges83 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Blazes Over a year ago

Updated link: webpack.js.org/configuration/resolve/#resolve-alias

Lonelydatum · Accepted Answer · 2016-04-22 01:51:13Z

11

webpack.config.js

module.exports = {
plugins: [
    new webpack.DefinePlugin({
        "process.env": {
            BROWSER: JSON.stringify(true)
        }
    })
]}

your-universal.js

var db = null;
if (!process.env.BROWSER) {
    // node context
    db = require('level');
} else {
    // browser context
    db = require('gazel');
}

answered Apr 22, 2016 at 1:51

Lonelydatum

1,2462 gold badges15 silver badges26 bronze badges

8 Comments

Jason Boyd Over a year ago

Just a minor point, but why do so many people have this JSON.stringify(true) crap? This is literally (literally) equivalent to "true"...

Andy Over a year ago

@JasonBoyd I wonder that myself, I think it started as a way to be make people pay attention because with string values people would easily misunderstand the need for the extra quotes in 'process.env.NODE_ENV': '"production"'. They might mistakenly remove them, especially in the case of "true".

pvande Over a year ago

The extra quotes are necessary because the value string is directly interpolated into the source code in place of the reference. With DefinePlugin configured to substitute 'process.env.NODE_ENV': '"production"', the code if (process.env.NODE_ENV == "production") { ... } becomes if ("production" == "production") { ... }. Without the extra quotes, it becomes if (production == "production") { ... }, which uses an undeclared variable.

GabiDi Over a year ago

Careful using this approach because if, for example, if 'level' is a purely nodeJS (server) module, webpack will fail to compile your code. Best to use the first answer to 'stub' any purely server side required modules.

Danny R Over a year ago

Shouldn't this be if(process.env.BROWSER === 'true') {} ?

|

Collectives™ on Stack Overflow

Webpack conditional require

2 Answers 2

1 Comment

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related