找不到模块:错误:与webpack捆绑时无法解析模块'module'mongodb

时间:2016-05-29 05:58:03

标签: node.js mongodb mongoose webpack

当我尝试在节点应用程序中使用mongoose connect时,Webpack会抛出以下错误。

最初还有一些错误,例如,

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

在我的webpack配置文件中进行以下更改可以解决问题,

  • 我在webpack配置文件中添加了node-loader和node对象。

    节点:{   控制台:'空',   fs:'空',   net:'空',   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

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'

1 个答案:

答案 0 :(得分:2)

当Webpack捆绑您的模块时,它遵循您导入(或需要)的模块的依赖关系链,并引入其所有依赖关系,并将它们一直捆绑到链的末尾。< / p>

如果有一个文件,它不知道如何加载该依赖关系链,那么将抛出此类错误。

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

这就提出了一个问题:浏览器中你需要mongoose模块的哪些功能?你能包括那个功能而不是整个猫鼬模块吗?

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

  1. 您可以解决Webpack捆绑问题,因为您在项目中包含的mongoose部分没有问题的子依赖项。
  2. 您将使用Webpack创建一个较小的捆绑包,因为您只需要包含所需的部分,因此对客户端的bundle.js有效负载将会小得多。
  3. 举个例子,我最近需要在客户端使用mongodb ObjectId生成器。我发现Webpack无法处理import mongodb from 'mongodb'组件,因此深入研究我发现mongodb取决于mongodb-core的依赖关系依赖于bson ObjectId bson我需要的方法。

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

    如果您正在使用Npm 3,那么如果您已经使用了mongoose或mongodb,则很有可能node_modules安装在import的根目录中如果没有在package.json中明确引用它,可以npm install。这显然存在这样的风险:如果上层依赖性依赖于它,那么您的构建将会中断,并且您需要独立地bson它。使用此方法的优点是您将始终使用上层依赖项使用的相同版本的df[df.columns.difference(['b'])] Out: a c d 0 0.427809 0.459807 0.333869 1 0.678031 0.668346 0.645951 2 0.996573 0.673730 0.314911 3 0.786942 0.719665 0.330833 ,这可能很重要。