モジュールが見つかりません：エラー：モジュール 'module'を解決できませんwebpackにバンドル中にmongodb

Question

ノードアプリケーションでmongoose接続を使用しようとすると、Webpackが次のエラーを投げます。

は当初、私は私の中でノード・ローダーとノードオブジェクトを追加私のWebPACKの設定ファイルに以下の変更を加える

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

、のような多くのエラーがトリックをしたカップル、

• がありました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 

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'がそうであるようにコンポーネントファイルを反応させます。私はこのエラーが発生しています。

WebPACKのは、あなたのモジュールをバンドルするとき、それはあなたがインポート（または必要な）きたモジュールの依存関係のチェーンをたどり、その依存関係のすべてに引いても、すべての道チェーンの最後まで彼らを束ねる

import React, { Component, PropTypes } from 'react' 
import request from '../api/requestHandler' 
import { reduxForm } from 'redux-form' 

//import rethink from 'rethinkdb' 

import mongoose from 'mongoose' 

Answer 1

。

依存関係チェーンでのロード方法がわからないファイルがある場合、このタイプのエラーがスローされます。

これは、このタイプの依存関係をロードする方法を知っているローダを追加することで解決できる場合があります。ただし、依存関係が非ネイティブモジュールの場合、Webpackはロードできません。ローダーの中には、ネイティブではない部分をスタブして除外してロードするようにすることによって、ネイティブでない依存関係を持つモジュールをロードする方法があります。たとえば、fsモジュールでは、ブラウザがその部分を含める必要がないため、ディスクからファイルを読み書きする必要がありません。

これは疑問を提起します：ブラウザで必要なモンゴースモジュールの機能は何ですか？あなたはmongooseモジュール全体ではなく、その機能だけを含めることができますか？

あなたがこれを行うことができるしている場合、あなたは2つの問題解決することができるかもしれません：あなたは、あなたのプロジェクトに含めているマングースの一部を持っていないので、あなたはWebPACKのバンドリングの問題を解決する可能性があります

1. を問題のあるサブ依存関係
2. Webpackを使用してより小さいバンドルを作成するのは、必要な部分だけを含めるので、クライアントへのbundle.jsペイロードははるかに小さくなります。

例として、最近、クライアントでmongodb ObjectIdジェネレータを使用する必要がありました。私はWebpackがimport mongodb from 'mongodb'コンポーネントに対処できないことを発見したので、私が見つけた依存関係を掘り下げて見つけました。はmongodb-coreに依存します。bsonにはObjectIdメソッドが必要です。

その依存関係のbsonコンポーネントのみをインポートすることで、Webpackの問題が解決し、バンドルが大幅に小さくなりました。

あなたがNPM 3を使用している場合は、あなたはすでにマングースやMongoDBのを使用している場合、あなたのpackage.jsonでそれを明示的に参照をかけることなく、それをimportできるようbsonがnode_modulesのルートにインストールされていることを良いチャンスがあります。これは明らかに上位の依存関係がそれに応じて停止すると、ビルドが中断し、独立してnpm installする必要があるという危険性があります。この方法を使用する利点は、常に上位の依存関係が使用している重要なバージョンのbsonを使用することです。