Module not found: Error: cannot resolve module 'module' mongodb when typing with webpack

Question

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

Initially, there were a few more errors, such as

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

Making the following changes to the web package configuration file did the trick,

• I added the node-loader and node object to my webpack configuration file.

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

but the error below still exists. Any idea how to solve 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 component files, as soon as I do import mongoose from 'mongoose' . I get 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 binds your modules, it follows the chain of dependencies of the module that you imported (or require), and pulls in all its dependencies, and also ties them all the way to the end of the chain.

If there is a file in which it does not know how to boot into this dependency chain, then this type of error will be raised.

This can sometimes be resolved 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 independent dependencies, cutting and excluding the non-native part so that it loads. For example, in the fs module, you do not need to read and write files from disk, because the browser cannot do this, so you do not need to include this part.

The question arises: what functionality of the mongoose module do you need in the browser? Can you enable just this functionality, and not the entire mongoose module?

If you are able to do this, you can solve two problems:

• You can solve the Webpack binding problem because the part of the mongoose that you include in your project has no problem sub-dependencies.
• You will create a smaller package with Webpack, because you will only include the parts that you need, so the bundle.js payload for the client will be much less.

As an example, I recently needed to use the Mindodb ObjectId object generator in the client. I found that Webpack was unable to handle the import mongodb from 'mongodb' , so delved into the dependencies that I found that mongodb depends on mongodb-core , which depends on bson , which has the ObjectId method that I need.

bson importing only the bson component of this dependency chain, I ran into a Webpack problem and made my package a lot smaller.

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