找不到模块：错误：在与webpack绑定时无法parsing模块“模块”mongodb
当我尝试在我的节点应用程序中使用mongoose连接时，Webpack会抛出以下错误。
最初有一些更多的错误，
Module not found: Error: Cannot resolve module 'fs' 在我的webpackconfiguration文件中做出以下更改的窍门，
-
我在我的webpackconfiguration文件中添加了节点加载器和节点对象。
节点：{console：'empty'，fs：'empty'，net：'empty'，tls：'empty'}，
但波纹pipe的错误仍然存在。 任何想法如何解决它？
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" } }
在我的一个反应组件文件中，只要我import mongoose from 'mongoose' 。 我得到这个错误。
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捆绑你的模块时，它遵循你已经导入（或者需要）的模块的依赖关系链，并且拉入所有的依赖关系，并且一直捆绑到链的末尾。
如果有一个文件，它不知道如何加载该依赖链，那么这种types的错误将被抛出。
有时候可以通过添加一个知道如何加载这种types的依赖的加载器来解决这个问题。 但是，如果依赖是一个非本地模块，那么Webpack将无法加载它。 一些加载器知道如何加载具有非本地依赖性的模块，通过将其排除并排除非本地部分以便加载它们。 例如在fs模块中，你不需要能够从磁盘读写文件，因为浏览器不能这样做，所以不需要包含那个部分。
这就产生了一个问题：你需要在浏览器中使用mongoose模块的哪些function？ 你能包括那个function，而不是整个mongoose模块？
如果你能做到这一点，那么你可能可以解决2个问题：
- 您可能会解决Webpack捆绑问题，因为您包含在项目中的mongoose部分没有问题的子依赖关系。
- 你将用Webpack创build一个更小的包，因为你只需要包含你需要的部分，所以客户端的bundle.js负载将会小得多。
作为一个例子，我最近需要在客户端使用mongodb ObjectId生成器。 我发现Webpack无法应付import mongodb from 'mongodb'组件的import mongodb from 'mongodb'因此深入了解依赖关系。我发现mongodb依赖于mongodb-core ， mongodb-core依赖于具有我需要的ObjectId方法的bson 。
通过只导入该依赖链的bson组件，我解决了Webpack问题，并使我的包更小。
如果您使用的是Npm 3，那么如果您已经使用node_modules或mongodb，则很有可能将bson安装在node_modules的根目录中，因此您可以在不在package.json明确引用它的情况下import它。 这显然有风险，如果上面的依赖关系停止依赖它，那么你的构build将打破，你需要npm install独立npm install 。 使用这种方法的优点是，您将始终使用与上层依赖关系正在使用的相同版本的bson ，这可能很重要。