Modul nicht gefunden: Error: Cannot resolve Modul 'Modul' mongodb bei der Bündelung mit webpack

Webpack ist mit den folgenden Fehler, wenn ich versuche, mit Mungo-Verbindung in meine Knoten-Applikation.

Anfangs waren es ein paar mehr Fehler wie,

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

Die folgenden änderungen in meinem webpack config-Datei hat den trick,

Ich Hinzugefügt, Knoten-loader und mit dem node-Objekt in meinem webpack config-Datei.

Knoten: {
Konsole: 'leer',
fs: 'leer',
net: 'leer',
tls: 'leer'
},

aber der Balg Fehler ist immer noch da. Irgendeine Idee wie es zu lösen?

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

Paket.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 einem meiner Komponenten reagieren-Datei, sobald ich tun import mongoose from 'mongoose'. Ich bin immer diese Fehlermeldung.

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

//import rethink from 'rethinkdb'

import mongoose from 'mongoose'

Könnten Sie Ihre Anzeige code wirft diese Fehler und Warnung und vor allem Sätze wie : var mongoose = require('mongoose'); and mongoose.connect('mongodb://XXX', function(err) { if (err) throw err; });
Hi, Danke für die Antwort. Alles, was ich Tue, ist das importieren von Mungo, wie dies und das ist, wenn ich all diese Fehler import mongoose from 'mongoose
Natürlich gibt es Fehler, entweder in Ihrem Paket.json-Datei oder mit npm-Konfiguration. Versuchen Sie zu tun, ohne Verpackung.json (Händisch mit npm)
HALLO, ich habe aktualisiert die Frage mit meinem webpack.config.js und package.json, wo ich die Datei' importieren von mongoose.
haben Sie versuchen, zu importieren Mungo mit geschweiften Klammern : import { mongoose } from 'mongoose' ?
Ja, immer Noch das gleiche.
Hast du jemals das gelöst?
Ja, ich habe es gelöst. Das problem war, ich war versucht, zu importieren, die auf dem browser(client) Umgebung. Versuchen Sie, importieren Sie es in den Knoten Umgebung. Es sollte funktionieren. Lassen Sie mich wissen, wenn Sie nach wie vor ein Problem.
meins war in einer anderen situation - die gleichen Fehler, aber. Ich denke, sowas werde ich importieren erwartet, dass es server-Seite. Danke.

InformationsquelleAutor nitte93user3232918 | 2016-05-29

2

Wenn Webpack-bundles-Module es folgt die Abhängigkeit der Kette des Moduls, das Sie importiert haben (oder notwendig ist) und zieht in alle seine Abhängigkeiten und bündelt auch Sie den ganzen Weg hinunter an das Ende der Kette.

Wenn es eine Datei, die es nicht wissen, wie zu laden ist, die Abhängigkeit Kette dann diese Art von Fehler wird geworfen.

Diese können manchmal gelöst werden, indem ein loader, der weiß, wie laden Sie diese Art von Abhängigkeit. Wenn aber die Abhängigkeit ist ein nicht-native-Modul dann Webpack nicht geladen werden kann. Einige der Lader wissen, wie Sie Module laden, die mit nicht-nativen Abhängigkeiten von Lunte aus und unter Ausschluss der nicht-nativen Teil, so dass es geladen wird. In der fs Modul für Beispiel, die Sie nicht brauchen, um in der Lage zu Lesen und schreiben von Dateien von der Festplatte, weil der browser nicht, so dass keine Notwendigkeit, um diesen Teil.

Stellt sich die Frage: Welche Funktionalität von der mongoose-Modul müssen Sie im browser? Können Sie zählen nur, dass die Funktionalität und nicht die gesamte mongoose-Modul?

Wenn Sie sind in der Lage, dies zu tun, dann werden Sie vielleicht in der Lage zu lösen 2 Probleme:
1. Sie vielleicht lösen die Webpack Bündelung problem, weil der Teil des Mungos, dass Sie einschließlich der in Ihrem Projekt nicht problematisch sub-Abhängigkeiten.
2. Erstellen Sie ein kleineres Bündel mit Webpack werden, da Sie nur werden, einschließlich der Teile, die Sie brauchen, damit die bundle.js Nutzlast auf dem client wird viel kleiner sein.
Als ein Beispiel, vor kurzem musste ich die Verwendung der mongodb ObjectId-generator im client. Ich entdeckte, dass Webpack war überfordert mit der import mongodb from 'mongodb' Komponente, so Graben in die Abhängigkeiten fand ich, dass mongodb hängt mongodb-core abhängig bson hat die ObjectId Methode, die ich brauchte.

Durch den Import nur die bson Komponente, die Abhängigkeit Kette hab ich um die Webpack problem und machte mich auf den bundle-viel kleiner.

Wenn Sie mit Npm 3 dann gibt es eine gute chance, dass bson ist installiert in die root von node_modules wenn Sie bereits mit Mungo oder mongodb so können Sie import es ohne einen expliziten Verweis darauf in Ihre package.json. Dies birgt die Gefahr, dass, wenn die Obere Abhängigkeit hält hängt dann Ihren build zu brechen, und Sie müssen npm install es unabhängig. Der Vorteil bei dieser Vorgehensweise ist, dass Sie immer mit der gleichen version von bson dass die Ober-Abhängigkeit nutzt, die wichtig sein könnte.

InformationsquelleAutor Guy

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.