2016-05-29 96 views
7

当我尝试在我的节点应用程序中使用猫鼬连接时,Webpack出现以下错误。未找到模块:错误:在与webpack绑定时无法解析模块“模块”mongodb

最初有一对夫妇更类似错误,

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

使我的WebPack配置文件中的以下更改的伎俩,

  • 我添加节点装载机和节点对象在我webpack配置文件。

    节点:{ 控制台: '空', FS: '空', 净: '空', TLS: '空' },

但波纹管误差仍然那里。任何想法如何解决它?

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 

,只要我做import mongoose from 'mongoose' 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 React, { Component, PropTypes } from 'react' 
import request from '../api/requestHandler' 
import { reduxForm } from 'redux-form' 

//import rethink from 'rethinkdb' 

import mongoose from 'mongoose' 
+0

你可以显示你的代码引发这些错误和警告,特别是句子:var mongoose = require('mongoose');和mongoose.connect('mongodb:// XXX',function(err){if(err)throw err; });' –

+0

嗨,谢谢你的回应。我正在做的是导入猫鼬,就像这样,这是当我得到所有这些错误 ''从'mongoose'导入猫鼬 – nitte93user3232918

+0

很明显,您的package.json文件或npm配置中都有错误。尝试做没有package.json(手动npm) –

回答

2

当的WebPack捆绑你的模块可以得出已导入(或需要),并在其所有相关拉动模块的依赖关系链,还捆绑了他们一路下跌至链的末端。

如果有一个文件,它不知道如何加载该依赖链,那么这种类型的错误将被抛出。

有时可以通过添加知道如何加载这种类型的依赖关系的加载程序来解决此问题。但是,如果依赖项是非本地模块,那么Webpack将无法加载它。一些加载程序知道如何加载非本地依赖项的模块,方法是将其删除并排除非本地部分,以便加载。例如,在fs模块中,您不需要能够从磁盘读取和写入文件,因为浏览器无法执行此操作,因此无需包含该部分。

这引发了一个问题:您需要在浏览器中使用mongoose模块的哪些功能?你能包括那个功能,而不是整个猫鼬模块吗?

如果你能做到这一点,那么你可能能够解决2个问题:

  1. 因为你,包括你的项目猫鼬的部分没有你可能解决的WebPack捆绑问题有问题的子依赖关系。
  2. 您将使用Webpack创建一个较小的包,因为您只需包含所需的部分,这样客户端的bundle.js负载就会小得多。

作为一个例子,我最近需要在客户端使用mongodb ObjectId生成器。我发现Webpack无法应对import mongodb from 'mongodb'组件,因此深入了解依赖关系,我发现mongodb取决于mongodb-core,这取决于bson,它有我需要的ObjectId方法。

通过只导入该依赖链的bson组件,我解决了Webpack问题,并使我的包更小。

如果您使用NPM 3再有就是那bson安装在node_modules根,如果你已经使用猫鼬或MongoDB的,所以你可以import它不把你的package.json明确提及它的好机会。这显然会带来这样的风险,即如果上层依赖性停止取决于它,那么你的构建将会中断,你需要独立地执行它。使用这种方法的优点是,您将始终使用上层依赖项正在使用的相同版本的bson,这可能很重要。

相关问题