Module not found: Error: Cannot resolve module 'module' mongodb while bundling with webpack

Question

Webpack is throwing the following errors when I try to use mongoose connect in my node application.

Initially there were a couple more errors like,

Module not found: Error: Cannot resolve module 'fs' 

Making the following changes in my webpack config file did the trick,

• I added node-loader and node object in my webpack config file.

  node: { console: 'empty', fs: 'empty', net: 'empty', tls: 'empty' },

but the bellow error is still there. Any idea how to resolve it?

WARNING in ./~/mongoose/~/mongodb/~/mongodb-core/~/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
 @ ./~/mongoose/~/mongodb/~/mongodb-core/~/require_optional/index.js 63:18-42 71:20-44 78:35-67

WARNING in ./~/mongoose/~/mongodb/~/mongodb-core/~/require_optional/README.md
Module parse failed: /Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/mongoose/node_modules/mongodb/node_modules/mongodb-core/node_modules/require_optional/README.md Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (1:0)
    at Parser.pp.raise (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:920:13)
    at Parser.pp.getTokenFromCode (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:2813:8)
    at Parser.pp.readToken (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:2508:15)
    at Parser.pp.nextToken (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:2500:71)
    at Parser.parse (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:1615:10)
    at Object.parse (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:882:44)
    at Parser.parse (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/lib/NormalModule.js:104:16)
    at DependenciesBlock.onModuleBuild (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10)
    at nextLoader (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25)
 @ ./~/mongoose/~/mongodb/~/mongodb-core/~/require_optional ^\.\/.*$

WARNING in ./~/mongoose/~/mongodb/~/mongodb-core/~/require_optional/LICENSE
Module parse failed: /Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/mongoose/node_modules/mongodb/node_modules/mongodb-core/node_modules/require_optional/LICENSE Unexpected token (1:40)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:40)
    at Parser.pp.raise (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:920:13)
    at Parser.pp.unexpected (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:1483:8)
    at Parser.pp.semicolon (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:1462:73)
    at Parser.pp.parseExpressionStatement (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:1976:8)
    at Parser.pp.parseStatement (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:1754:188)
    at Parser.pp.parseTopLevel (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:1648:21)
    at Parser.parse (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:1616:17)
    at Object.parse (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:882:44)
    at Parser.parse (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/lib/Parser.js:902:15)
    at DependenciesBlock.<anonymous> (/Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/webpack/lib/NormalModule.js:104:16)
 @ ./~/mongoose/~/mongodb/~/mongodb-core/~/require_optional ^\.\/.*$

ERROR in ./~/mongoose/~/mongodb/~/mongodb-core/~/require_optional/~/resolve-from/index.js
Module not found: Error: Cannot resolve module 'module' in /Users/nitesh/Documents/learnReact/day1/r3-foundation-boilerplate/node_modules/mongoose/node_modules/mongodb/node_modules/mongodb-core/node_modules/require_optional/node_modules/resolve-from
 @ ./~/mongoose/~/mongodb/~/mongodb-core/~/require_optional/~/resolve-from/index.js 3:13-30
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 221 kB [rendered]
        [0] ./~/css-loader!./~/postcss-loader!./src/styles/app.css 219 kB {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 8.56 kB [rendered]
        [0] ./~/css-loader!./~/postcss-loader!./src/styles/styles.css 7.06 kB {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 7.92 kB [rendered]
        [0] ./~/css-loader!./~/postcss-loader!./src/styles/slider.css 6.42 kB {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 234 kB [rendered]
        [0] ./~/css-loader!./~/postcss-loader!./src/styles/app_override.css 232 kB {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
Child extract-text-webpack-plugin:
                                     Asset     Size  Chunks       Chunk Names
      404a525502f8e5ba7e93b9f02d9e83a9.eot  75.2 kB               
    926c93d201fe51c8f351e858468980c3.woff2  70.7 kB               
     891e3f340c1126b4c7c142e5f6e86816.woff  89.1 kB               
      fb650aaf10736ffb9c4173079616bf01.ttf   151 kB               
      bae4a87c1e5dff40baa3f49d52f5347a.svg   386 kB               
    chunk    {0} extract-text-webpack-plugin-output-filename 41.4 kB [rendered]
        [0] ./~/css-loader!./~/postcss-loader!./src/styles/index.css 264 bytes {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
        [2] ./~/css-loader!./~/font-awesome/css/font-awesome.css 39.1 kB {0} [built]
        [3] ./~/font-awesome/fonts/fontawesome-webfont.eot 82 bytes {0} [built]
        [4] ./~/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.1 82 bytes {0} [built]
        [5] ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.1 84 bytes {0} [built]
        [6] ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.6.1 83 bytes {0} [built]
        [7] ./~/font-awesome/fonts/fontawesome-webfont.ttf?v=4.6.1 82 bytes {0} [built]
        [8] ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.6.1 82 bytes {0} [built]
Child extract-text-webpack-plugin:
    chunk    {0} extract-text-webpack-plugin-output-filename 88.8 kB [rendered]
        [0] ./~/css-loader!./~/postcss-loader!./~/sass-loader?outputStyle=expanded!./src/styles/foundation.scss 87.3 kB {0} [built]
        [1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [built]
Module not found: Error: Cannot resolve module 'module' mongodb

webpack.config.js

var path = require('path')
var webpack = require('webpack')
var autoprefixer = require('autoprefixer')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

var assetPath = '/assets/'
var absolutePath = path.join(__dirname, 'build', assetPath)

module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client',
    './src/index'
  ],

  target: 'node-webkit',

  output: {
    path: absolutePath,
    filename: 'bundle.js',
    publicPath: assetPath
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new ExtractTextPlugin("bundle.css")
  ],
  module: {
    loaders: [
      {
        test: /\.js$/,
        loaders: [ 'babel' ],
        exclude: /node_modules/,
        include: path.join(__dirname, 'src')
      },
      // fonts and svg
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
      {
        // images
        test: /\.(ico|jpe?g|png|gif)$/,
        loader: "file"
      },
      {
        // for some modules like foundation
        test: /\.scss$/,
        exclude: [/node_modules/], // sassLoader will include node_modules explicitly
        loader: ExtractTextPlugin.extract("style", "css!postcss!sass?outputStyle=expanded")
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract("style", "css!postcss")
      },

      { test: /\.json$/, loader: 'json-loader' },
      {
                test: /\.node$/,
                loader: 'node-loader'
      }


    ]
  },
  resolve: {
      extensions: [ '', '.js', '.json', '.jsx', '.es6', '.babel', '.node'],
      modulesDirectories: [ 'node_modules', 'app' ]
  },
  node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  },
  postcss: function(webpack) {
    return [
      autoprefixer({browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']})
    ]
  },
  sassLoader: {
    includePaths: [path.resolve(__dirname, "node_modules")]
  }
}

package.json

{
  "name": "nodeReactMongo",
  "version": "1.0.0",
  "description": "redux-react-router and foundation boilerplate",
  "keywords": [
    "redux",
    "react",
    "router",
    "routing",
    "frontend",
    "client",
    "webpack",
    "babel",
    "sass",
    "foundation",
    "postcss"
  ],
  "main": "index.js",
  "scripts": {
    "start": "node server"
  },
  "author": "nitte93",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.11.1",
    "classnames": "^2.2.0",
    "firebase": "^3.0.3",
    "font-awesome": "^4.3.0",
    "foundation-sites": "^6.1.2",
    "json-loader": "^0.5.4",
    "mongodb": "^2.1.20",
    "mongoose": "^4.4.19",
    "react": "^0.14.5",
    "react-addons-update": "^0.14.7",
    "react-dom": "^0.14.7",
    "react-modal": "^1.3.0",
    "react-router": "2.0.0-rc5",
    "react-router-redux": "^2.1.0",
    "redux": "^3.2.1",
    "redux-form": "^5.2.5",
    "redux-logger": "^2.5.2",
    "redux-thunk": "^1.0.3",
    "rethinkdb": "^2.3.1",
    "underscore": "^1.8.3",
    "what-input": "^1.1.4"
  },
  "optionalDependencies": {},
  "devDependencies": {
    "autoprefixer": "^6.3.2",
    "babel-core": "^6.3.15",
    "babel-loader": "^6.2.0",
    "babel-plugin-transform-runtime": "^6.5.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-react-hmre": "^1.0.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.9.0",
    "css-loader": "^0.23.1",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "jquery": "^2.2.4",
    "node-sass": "^3.4.2",
    "postcss-loader": "^0.8.0",
    "react-redux": "^4.4.5",
    "redux-devtools": "^3.1.0",
    "redux-devtools-dock-monitor": "^1.0.1",
    "redux-devtools-log-monitor": "^1.0.3",
    "sass-loader": "^3.1.2",
    "script-loader": "^0.6.1",
    "serve-static": "^1.10.2",
    "style-loader": "^0.13.0",
    "url-loader": "^0.5.7",
    "webpack": "^1.9.11",
    "webpack-dev-middleware": "^1.2.0",
    "webpack-hot-middleware": "^2.2.0"
  }
}

In one of my react components file as soon as I do import mongoose from 'mongoose'. I'm getting this error.

import React, { Component, PropTypes } from 'react'
import request from '../api/requestHandler'
import { reduxForm } from 'redux-form'

//import rethink from 'rethinkdb'

import mongoose from 'mongoose'

Answer 1

When Webpack bundles your modules it follows the dependency chain of the module that you've imported (or required) and pulls in all of its dependencies and also bundles them all the way down to the end of the chain.

If there's a file that it doesn't know how to load in that dependency chain then this type of error will be thrown.

This can sometimes be solved by adding a loader that knows how to load this type of dependency. If, however, the dependency is a non-native module then Webpack cannot load it. Some of the loaders know how to load modules with non-native dependencies by stubbing out and excluding the non-native part so that it will load. In the fs module for example you don't need to be able to read and write files from disk because the browser cannot do that so no need to include that part.

This raises the question: What functionality from the mongoose module do you need in the browser? Can you include just that functionality and not the entire mongoose module?

If you are able to do this then you might be able to solve 2 problems:

1. You might solve the Webpack bundling problem because the part of mongoose that you're including in your project does not have problematic sub-dependencies.
2. You will be creating a smaller bundle with Webpack because you'll only be including the parts that you need so the bundle.js payload to the client will be much smaller.

As an example, I recently needed to use the mongodb ObjectId generator in the client. I discovered that Webpack was unable to cope with the import mongodb from 'mongodb' component so digging into the dependencies I found that mongodb depends on mongodb-core which depends on bson which has the ObjectId method I needed.

By importing only the bson component of that dependency chain I got around the Webpack problem and made my bundle much smaller.

If you're using Npm 3 then there's a good chance that bson is installed in the root of node_modules if you're already using mongoose or mongodb so you can import it without putting an explicit reference to it in your package.json. This obviously carries the risk that if the upper dependency stops depending on it then your build will break and you'll need to npm install it independently. The advantage of using this approach is that you will always be using the same version of bson that the upper dependency is using which might be important.