2016-05-29 12 views
7

Podczas próby użycia połączenia mangusty w aplikacji mojego węzła pakiety WebPC rzucają następujące błędy.Nie znaleziono modułu: Błąd: nie można rozpoznać mongodb modułu "moduł" podczas pakowania w pakiet sieciowy

Początkowo było kilka więcej błędów, takie jak,

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

dokonać następujących zmian w moim pliku WebPack config wystarczyły,

  • dodałem Node-ładowarka i przedmiot węzła w moim plik konfiguracyjny webpacka.

    węzeł: { konsoli: 'pusty', fs: 'pusty', netto: 'pusty', tls: 'pusty' }

ale poniżej błąd jest nadal tam. Każdy pomysł, jak to rozwiązać?

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

W jednym z moich reagujących składników złożyć jak najszybciej zrobić import mongoose from 'mongoose'. Dostaję ten błąd.

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

Czy możesz wyświetlić swój kod, który zgłasza te błędy i ostrzeżenia, a zwłaszcza zdania: 'var mongoose = require ('mangusta'); i mongoose.connect ('mongodb: // XXX', function (err) { if (err) throw err; }); ' –

+0

Witam, dzięki za odpowiedź. Wszystko, co robię, to importowanie mangusty, tak jak to i to jest, gdy dostaję wszystkie te błędy 'importowanie mangusty z 'mangusty' – nitte93user3232918

+0

Oczywiście są błędy albo w pliku package.json, albo z konfiguracją npm. Spróbuj zrobić bez pakietu.json (ręcznie z npm) –

Odpowiedz

2

Kiedy WebPACK wiązki moduły wynika łańcuch zależności modułu, które zostały importowane (lub wymaganego) i ciągnie w całej jego zależnościami, a także wiązki im całą drogę w dół do końca łańcucha .

Jeśli istnieje plik, którego nie można załadować w łańcuchu zależności, zostanie zgłoszony ten typ błędu.

Można to czasami rozwiązać, dodając program ładujący, który wie, jak załadować ten typ zależności. Jeśli jednak zależność jest modułem innym niż rodzimy, wówczas pakiet Webpack nie może go załadować. Niektóre z ładowarek wiedzą, jak załadować moduły z zależnościami innymi niż rodzime poprzez wyszarzenie i wykluczenie części nienatywnej, aby załadować. Na przykład w module fs nie ma potrzeby czytania i zapisywania plików z dysku, ponieważ przeglądarka nie może tego zrobić, więc nie trzeba uwzględniać tej części.

Rodzi się pytanie: Jaką funkcjonalność modułu mangusty potrzebujesz w przeglądarce? Czy możesz uwzględnić tylko tę funkcjonalność, a nie cały moduł mangusty?

Jeśli jesteś w stanie to zrobić, to może być w stanie rozwiązać problemów 2:

  1. Możecie rozwiązać problemu Bundling Webpack ponieważ część mangusta, że ​​jesteś w tym projekcie nie ma problematyczne podwładności.
  2. Będziesz tworzyć mniejszy pakiet z pakietem Webpack, ponieważ będziesz zawierał tylko potrzebne części, więc ładunek pakietu bundle.js do klienta będzie znacznie mniejszy.

Jako przykład, ostatnio musiałem użyć generatora ObjectOd mongodb w kliencie. Odkryłem, że komponent Webpack nie był w stanie poradzić sobie z komponentem import mongodb from 'mongodb', więc w zależności od mongodb zależało od zależności, które znalazłem w zależności od bson, który potrzebował mi metody ObjectId.

Importując tylko komponent bson z tego łańcucha zależności, udało mi się rozwiązać problem związany z pakietem Webpack i znacznie zmniejszyć rozmiar pakietu.

Jeśli używasz KMP 3 to istnieje duża szansa, że ​​bson jest zainstalowany w głównym node_modules jeśli używasz już mongoose lub MongoDB, dzięki czemu można go bez import umieszczenie wyraźnego odniesienia do niej w swoim package.json. To oczywiście niesie ze sobą ryzyko, że jeśli górna zależność zostanie przerwana w zależności od tego, twoja kompilacja się zepsuje i będziesz musiał to zrobić niezależnie. Zaletą korzystania z tego podejścia jest to, że zawsze używasz tej samej wersji bson, której używa górna zależność, która może być ważna.

Powiązane problemy