Getting large cryptic errors and warnings when trying to use mongoose with webpack

Question

I'm using webpack to compile my es6 isomorphic react application into client and server bundles, respectively. I've installed mongoose and are attempting to use it in the server portion of my app, but I'm getting some horrendous errors in the console when I try building:

WARNING in ./~/mongoose/lib/drivers/index.js Critical dependencies: 8:11-74 the request of a dependency is an expression @ ./~/mongoose/lib/drivers/index.js 8:11-74

WARNING in ./~/mongoose/lib/drivers/SPEC.md Module parse failed: /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/mongoose/lib/drivers/SPEC.md Line 2: Unexpected token ILLEGAL You may need an appropriate loader to handle this file type. | | # Driver Spec | | TODO @ ./~/mongoose/lib/drivers ^./.*$

WARNING in ./~/express/lib/view.js Critical dependencies: 78:29-56 the request of a dependency is an expression @ ./~/express/lib/view.js 78:29-56

WARNING in ./~/es6-promise/dist/es6-promise.js Module not found: Error: Cannot resolve module 'vertx' in /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/es6-promise/dist resolve module vertx in /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/es6-promise/dist looking for modules in /Users/richie/Code/CreativeFlumeProjects/cf-website/src /Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx doesn't exist (module as directory) resolve 'file' vertx in /Users/richie/Code/CreativeFlumeProjects/cf-website/src resolve file /Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx doesn't exist /Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx.js doesn't exist looking for modules in /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx doesn't exist (module as directory) resolve 'file' vertx in /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules resolve file /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx doesn't exist /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx.js doesn't exist [/Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx] [/Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx] [/Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx.js] [/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx] [/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx] [/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx.js] @ ./~/es6-promise/dist/es6-promise.js 132:20-30

WARNING in ./~/bson/lib/bson/index.js Critical dependencies: 20:16-29 the request of a dependency is an expression 44:18-31 the request of a dependency is an expression 71:19-32 the request of a dependency is an expression @ ./~/bson/lib/bson/index.js 20:16-29 44:18-31 71:19-32

WARNING in ./~/require_optional/index.js Critical dependencies: 63:18-42 the request of a dependency is an expression 71:20-44 the request of a dependency is an expression 78:35-67 the request of a dependency is an expression @ ./~/require_optional/index.js 63:18-42 71:20-44 78:35-67

WARNING in ./~/require_optional/README.md Module parse failed: /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/require_optional/README.md Line 1: Unexpected token ILLEGAL You may need an appropriate loader to handle this file type. | # require_optional | Work around the problem that we do not have a optionalPeerDependencies concept in node.js making it a hassle to optionally include native modules | @ ./~/require_optional ^./.*$

WARNING in ./~/require_optional/LICENSE Module parse failed: /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/require_optional/LICENSE Line 1: Unexpected identifier You may need an appropriate loader to handle this file type. | Apache License | Version 2.0, January 2004 |
http://www.apache.org/licenses/ @ ./~/require_optional ^./.*$ /Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235900 return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }()); ^

Error: Cannot find module './node-mongodb-native'. at /Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235900:42 at webpackContextResolve (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235900:90) at webpackContext (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235897:30) at Object. (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:48684:37) at webpack_require (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:20:30) at Object. (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:52685:17) at webpack_require (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:20:30) at Object. (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:236259:15) at webpack_require (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:20:30) at Object.exports.contain.exports.reachTemplate.internals.Any.applyFunctionToChildren.internals.Err.toString.internals.getPath.internals.serializer.internals.annotate.internals.Response._prepare.internals.Response._processPrepare.internals.Auth.test.internals.Auth.payload.internals.Auth.response.internals.Authenticator.exports.wrap.internals.isIsoDate.internals.compare.internals.Date.min.internals.Date.max.internals.Connection._init.internals.Connection._start.internals.Connection._stop.internals.Connection._dispatch.internals.Methods._add.internals.state.internals.payload.internals.compare.internals.Number.min.internals.Number.max.internals.Number.greater.internals.Number.less.internals.Number.multiple.internals.Number.integer.internals.Number.negative.internals.Number.positive.internals.Object.length.internals.Object.min.internals.Object.max.internals.Object.assert.internals.compare.internals.String.min.internals.String.max.internals.String.creditCard.internals.String.length.internals.String.regex.internals.String.alphanum.internals.String.token.internals.String.email.internals.String.ip.internals.String.uri.internals.String.isoDate.internals.String.guid.internals.String.hex.internals.String.hostname.internals.String.lowercase.internals.String.uppercase.internals.Request.internals.Response.writeHead.internals.Topo.add.exports.execute.internals.prerequisites.internals.handler.internals.fromString.internals.pre.module.exports.internals.Plugin.internals.Plugin.register.internals.Protect.run.internals.Request.internals.Request._execute.internals.Request._lifecycle.internals.Request._invoke.internals.Server.start.internals.Server.initialize.internals.Server._start.internals.Server.stop._invoke.exports.send.internals.marshal.internals.fail.internals.transmit.internals.state.internals.input.exports.response.internals.Router.normalize.internals.parseParams.internals.Router.table.internals.Policy.get.internals.Policy._callGenerateFunc.internals.Policy.set.exports.generateKey.exports.encrypt.exports.decrypt.exports.hmacWithPassword.exports.seal.exports.unseal.internals.Array.items.internals.Array.ordered.internals.Array.min.internals.Array.max.internals.Array.length.internals.Binary.min.internals.Binary.max.internals.checkIpV6.exports.validate.internals.validate.internals.Definitions.parse.Items.serial.internals.unsign.Items.serial.internals.unsign.internals.decode.internals.Definitions.format.Items.serial.exports.prepareValue.internals.encode.internals.sign.internals.Parser.internals.Parser.parse.decoder.once.writeFile.internals.Parser.raw.decoder.once.internals.Parser.multipart.onPart.writeFile.exports.Dispenser.internals.Dispenser.internals.Client.request.internals.Client.read.internals.Client.parseCacheControl.internals.Client._shortcut.map../connection (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235702:19)

I've tried a number of solutions found through google. Adding ".node" to my resolve.extensions, adding node-loader, as well as some additional configurations to the node object, all to no avail.

Answer 1

Your webpack config that handles the server code should have a few extras to avoid issues.

Try adding the following:

    target: 'node',
    output: {
        ...,
        libraryTarget: 'commonjs',
    },
    externals: [
        /^(?!\.|\/).+/i,
    ],

Setting the target to node makes webpack aware that you're working in a Node context, and not in a browser. Adding libraryTarget: 'commonjs' will make webpack use simple require calls to get functions from external libraries.

Then an important thing happens in the regex in externals. It basically excludes any requires that use a non-relative path from the bundle. That way if you do import 'react'; it won't be packaged by webpack, but if you do import './components/MyComponent.js';, it will.

That will also mean that you have to make sure your node_modules directory is included with your built server code.

Why do all this? Because Node uses a lot of native modules that can't be bundled right. They are specific to your exact version of Node on your specific OS, and you can't just pull those into a Javascript bundle. You want your own code to go through webpack, and all stuff from node_modules to just be accessed like any Node project.

Now if you get those warnings/errors in your browser bundle, it means that you're probably requiring/importing modules that only work on the server in your browser bundle. Make sure you only require them in files that are only used on the server. Alternatively, selectively require them. How you can do selective requires based on the build type can be found here: Can I detect if my script is being processed by Webpack?