找不到模块:错误:与Webpack捆绑时无法解析模块'module'mongodb [英] Module not found: Error: Cannot resolve module 'module' mongodb while bundling with webpack
问题描述
当我尝试在节点应用程序中使用猫鼬连接时，Webpack抛出以下错误.
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'
在我的webpack配置文件中进行以下更改可以达到目的，
Making the following changes in my webpack config file did the trick,
-
我在webpack配置文件中添加了node-loader和node对象.
I added node-loader and node object in my webpack config file.
节点:{ 控制台:空"， fs:空"， 净:空"， tls:空" }，
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
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
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"
}
}
我做import mongoose from 'mongoose'时，立即在我的一个React组件文件中.我收到此错误.
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'
推荐答案
当Webpack捆绑您的模块时，它遵循您已导入(或必需)的模块的依赖关系链，并提取其所有依赖关系并将其捆绑一直到链的末端.
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.
有时可以通过添加一个知道如何加载这种类型的依赖项的加载器来解决.但是，如果依赖项是非本地模块，则Webpack无法加载它.一些加载程序知道如何通过存根并排除非本地部分来加载具有非本地依赖性的模块.例如，在fs模块中，您不需要能够从磁盘读取和写入文件，因为浏览器无法做到这一点，因此不需要包括该部分.
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.
这引发了一个问题:浏览器需要mongoose模块的哪些功能?您可以仅包括该功能，而不包括整个猫鼬模块吗?
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?
如果您能够执行此操作，则可以解决2个问题:
If you are able to do this then you might be able to solve 2 problems:
- 您可能会解决Webpack捆绑问题，因为项目中包含的猫鼬部分不存在有问题的子依赖项.
- 您将使用Webpack创建一个较小的包，因为仅包含所需的部分，因此，客户端的bundle.js有效负载会小得多.
作为示例，我最近需要在客户端中使用mongodb ObjectId生成器.我发现Webpack无法处理import mongodb from 'mongodb'组件，因此深入研究依赖项后发现mongodb依赖于mongodb-core，而依赖于bson却具有我需要的ObjectId方法.
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.
通过仅导入该依赖关系链的bson组件，我解决了Webpack问题，并使捆绑包变得更小.
By importing only the bson component of that dependency chain I got around the Webpack problem and made my bundle much smaller.
如果您正在使用Npm 3，那么如果您已经在使用mongoose或mongodb，则很有可能在node_modules的根目录中安装了bson，因此您可以import而不用显式引用在您的package.json中.显然，这冒着这样的风险:如果上限依赖项停止依赖于它，则您的构建将中断，并且您需要独立地npm install.使用这种方法的优点是，您将始终使用与上级依赖项相同的bson版本，这可能很重要.
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.
这篇关于找不到模块:错误:与Webpack捆绑时无法解析模块'module'mongodb的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
