Modulo non trovato: Errore: impossibile risolvere il modulo 'module' mongodb durante il bundle con il webpack

Question

Webpack lancia i seguenti errori quando provo a utilizzare il mangusta connect nella mia applicazione di nodo.

Inizialmente ci sono stati un paio di errori come,

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

apportando le seguenti modifiche nel mio file webpack config ha fatto il trucco,

• ho aggiunto nodo-caricatore e oggetto nodo nel mio file di configurazione webpack.

  nodo: { console: 'vuoto', fs: 'vuoto', netto: 'vuota', tls: 'vuoto' },

ma l'errore soffietto è ancora Là. Qualche idea su come risolverlo?

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" 
    } 
} 

In uno dei miei componenti reagiscono presentare non appena faccio import mongoose from 'mongoose'. Sto ricevendo questo errore

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

Quando Webpack impacchetta i moduli segue la catena di dipendenza del modulo che hai importato (o necessario) e tira in tutte le sue dipendenze e anche bundle loro tutta la strada fino alla fine della catena .

Se esiste un file che non sa come caricare in tale catena di dipendenze, verrà generato questo tipo di errore.

Questo a volte può essere risolto aggiungendo un caricatore che sa come caricare questo tipo di dipendenza. Se, tuttavia, la dipendenza è un modulo non nativo, Webpack non può caricarlo. Alcuni caricatori sanno come caricare i moduli con dipendenze non native mediante l'eliminazione e l'esclusione della parte non nativa in modo che venga caricata. Nel modulo fs, ad esempio, non è necessario essere in grado di leggere e scrivere file dal disco perché il browser non può farlo, quindi non è necessario includere quella parte.

Ciò solleva la domanda: quale funzionalità del modulo mangusta è necessaria nel browser? Puoi includere solo quella funzionalità e non l'intero modulo mangusta?

Se siete in grado di fare questo allora si potrebbe essere in grado di risolvere i problemi: 2

1. Si potrebbe risolvere il problema bundling Webpack perché la parte della mangusta che si sta includendo nel progetto non ha sub-dipendenze problematiche.
2. Creerai un pacchetto più piccolo con Webpack perché includerai solo le parti di cui hai bisogno in modo che il carico utile di bundle.js sul client sia molto più piccolo.

Come esempio, di recente ho dovuto utilizzare il generatore ObjectId mongodb nel client. Ho scoperto che Webpack non era in grado di far fronte al componente , quindi scavando nelle dipendenze ho scoperto che mongodb dipende da mongodb-core che dipende da bson che ha il metodo ObjectId necessario.

Importando solo il componente bson di tale catena di dipendenze ho risolto il problema del Webpack e reso il mio bundle molto più piccolo.

Se stai usando Npm 3 poi c'è una buona probabilità che bson è installato nella directory principale del node_modules se si sta già utilizzando mangusta o MongoDB in modo da poter import senza mettere un esplicito riferimento ad esso nel vostro package.json. Questo ovviamente comporta il rischio che se la dipendenza superiore si interrompe a seconda di ciò, la tua build si interromperà e avrai bisogno di fare lo npm install in modo indipendente. Il vantaggio di utilizzare questo approccio è che si utilizzerà sempre la stessa versione di bson utilizzata dalla dipendenza superiore che potrebbe essere importante.