Webpack warnings when running Mongoose for browser

[ianpaschal]

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

When using the browser version of Mongoose as described here, Webpack generates several warnings:

WARNING in ./node_modules/mongoose/lib/drivers/index.js
10:13-49 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/mongoose/lib/drivers/index.js
 @ ./node_modules/mongoose/lib/schema.js
 @ ./node_modules/mongoose/lib/browser.js
 @ ./node_modules/mongoose/browser.js
 @ ./src/store/index.js
 @ ./src/client.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/client.js

WARNING in ./node_modules/require_optional/index.js
82:18-42 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/require_optional/index.js
 @ ./node_modules/mongodb-core/index.js
 @ ./node_modules/mongodb/index.js
 @ ./node_modules/mongoose/lib/drivers/node-mongodb-native/binary.js
 @ ./node_modules/mongoose/lib/drivers/node-mongodb-native/index.js
 @ ./node_modules/mongoose/lib/drivers/index.js
 @ ./node_modules/mongoose/lib/schema.js
 @ ./node_modules/mongoose/lib/browser.js
 @ ./node_modules/mongoose/browser.js
 @ ./src/store/index.js
 @ ./src/client.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/client.js

WARNING in ./node_modules/require_optional/index.js
90:20-44 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/require_optional/index.js
 @ ./node_modules/mongodb-core/index.js
 @ ./node_modules/mongodb/index.js
 @ ./node_modules/mongoose/lib/drivers/node-mongodb-native/binary.js
 @ ./node_modules/mongoose/lib/drivers/node-mongodb-native/index.js
 @ ./node_modules/mongoose/lib/drivers/index.js
 @ ./node_modules/mongoose/lib/schema.js
 @ ./node_modules/mongoose/lib/browser.js
 @ ./node_modules/mongoose/browser.js
 @ ./src/store/index.js
 @ ./src/client.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/client.js

WARNING in ./node_modules/require_optional/index.js
97:35-67 Critical dependency: the request of a dependency is an expression
 @ ./node_modules/require_optional/index.js
 @ ./node_modules/mongodb-core/index.js
 @ ./node_modules/mongodb/index.js
 @ ./node_modules/mongoose/lib/drivers/node-mongodb-native/binary.js
 @ ./node_modules/mongoose/lib/drivers/node-mongodb-native/index.js
 @ ./node_modules/mongoose/lib/drivers/index.js
 @ ./node_modules/mongoose/lib/schema.js
 @ ./node_modules/mongoose/lib/browser.js
 @ ./node_modules/mongoose/browser.js
 @ ./src/store/index.js
 @ ./src/client.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/client.js

As far as I know, there is not a way to suppress these annoying warnings as Webpack devs insist they are important issues which module authors should address.

If the current behavior is a bug, please provide the steps to reproduce.

• Create a project with Webpack (I was using the vue-cli).
• Extend the Webpack config as described here.
• Import/require "mongoose/browser" anywhere in the app.

For completeness, here's my full config:

const path = require( "path" );
const webpack = require( "webpack" );

module.exports = {
	entry: "./src/client.js",
	output: {
		path: path.resolve( __dirname, "./dist" ),
		publicPath: "/dist/",
		filename: "build.js"
	},
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					"vue-style-loader",
					"css-loader"
				],
			},
			{
				test: /\.vue$/,
				loader: "vue-loader",
				options: {
					loaders: {
					}
					// other vue-loader options go here
				}
			},
			{
				test: /\.js$/,
				loader: "babel-loader",
				exclude: /node_modules/
			},
			{
				test: /\.(png|jpg|gif|svg)$/,
				loader: "file-loader",
				options: {
					name: "[name].[ext]?[hash]"
				}
			}
		]
	},
	node: {
		// Replace these Node.js native modules with empty objects, Mongoose's
		// browser library does not use them.
		// See https://webpack.js.org/configuration/node/
		dns: "empty",
		fs: "empty",
		"module": "empty",
		net: "empty",
		tls: "empty"
	},
	resolve: {
		alias: {
			"vue$": "vue/dist/vue.esm.js",
			"@": path.join( __dirname, "src" )
		},
		extensions: [ "*", ".js", ".vue", ".json" ]
	},
	devServer: {
		historyApiFallback: true,
		noInfo: true,
		overlay: true
	},
	performance: {
		hints: false
	},
	devtool: "#eval-source-map"
};

if ( process.env.NODE_ENV === "production" ) {
	module.exports.devtool = "#source-map";
	// http://vue-loader.vuejs.org/en/workflow/production.html
	module.exports.plugins = ( module.exports.plugins || [] ).concat( [
		new webpack.DefinePlugin({
			"process.env": {
				NODE_ENV: "\"production\""
			}
		}),
		new webpack.optimize.UglifyJsPlugin({
			sourceMap: true,
			compress: {
				warnings: false
			}
		}),
		new webpack.LoaderOptionsPlugin({
			minimize: true
		})
	] );
}

The import is simply:

import mongoose from "mongoose/browser";

What is the expected behavior?

• Webpack bundles without errors or warnings.

Please mention your node.js, mongoose and MongoDB version.

• Node: 8.11.3
• Mongoose: 5.2.2
• MongoDB: 4.0.0
• Webpack: 3.6.0

[vkarpov15]

Will look into fixing these warnings. They are just warnings and shouldn't impact mongoose functionality.

[ianpaschal]

Thanks!

I know they're just warnings but it's quite annoying to not get a clean build. Both in terminal and in web console they pollute the output making it difficult to work and to read actually relevant output.

Appreciate you looking into it.

[vkarpov15]

Fixed with #6771

[vkarpov15]

Fix will be in 5.2.6 that will ship next Monday 👍

[ianpaschal]

Thank you! Looking forward to it.

[ksloan]

FYI: This also fixed a problem we had loading the mongoose driver with storybook -- it was loading node-mongodb-native before. Fixed now, thanks!

[vkarpov15]

Great. This should also make Mongoose bundles much smaller because it isn't loading the MongoDB driver anymore.

[lewislbr]

I just had this issue and solved it by adding to the Webpack config:

externals: [
  { mongoose: 'commonjs mongoose' },
]