ウェブパックでmongooseを使用しようとすると、大きな謎のエラーと警告を受ける

Question

webpackを使用して、私のes6 isomorphic reactアプリケーションをクライアントバンドルとサーバーバンドルにそれぞれコンパイルしています。私はマングースをインストールしたし、私のアプリのサーバ部分でそれを使用しようとしているが、私は建物をしようとすると、私は、コンソールでのいくつかの恐ろしいエラーを取得しています：

WARNING in ./~/mongoose/lib/drivers/index.js Critical dependencies: 8:11-74 the request of a dependency is an expression @ ./~/mongoose/lib/drivers/index.js 8:11-74

WARNING in ./~/mongoose/lib/drivers/SPEC.md Module parse failed: /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/mongoose/lib/drivers/SPEC.md Line 2: Unexpected token ILLEGAL You may need an appropriate loader to handle this file type. | | # Driver Spec | | TODO @ ./~/mongoose/lib/drivers ^./.*$

WARNING in ./~/express/lib/view.js Critical dependencies: 78:29-56 the request of a dependency is an expression @ ./~/express/lib/view.js 78:29-56

WARNING in ./~/es6-promise/dist/es6-promise.js Module not found: Error: Cannot resolve module 'vertx' in /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/es6-promise/dist resolve module vertx in /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/es6-promise/dist looking for modules in /Users/richie/Code/CreativeFlumeProjects/cf-website/src /Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx doesn't exist (module as directory) resolve 'file' vertx in /Users/richie/Code/CreativeFlumeProjects/cf-website/src resolve file /Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx doesn't exist /Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx.js doesn't exist looking for modules in /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx doesn't exist (module as directory) resolve 'file' vertx in /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules resolve file /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx doesn't exist /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx.js doesn't exist [/Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx] [/Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx] [/Users/richie/Code/CreativeFlumeProjects/cf-website/src/vertx.js] [/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx] [/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx] [/Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/vertx.js] @ ./~/es6-promise/dist/es6-promise.js 132:20-30

WARNING in ./~/bson/lib/bson/index.js Critical dependencies: 20:16-29 the request of a dependency is an expression 44:18-31 the request of a dependency is an expression 71:19-32 the request of a dependency is an expression @ ./~/bson/lib/bson/index.js 20:16-29 44:18-31 71:19-32

WARNING in ./~/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 @ ./~/require_optional/index.js 63:18-42 71:20-44 78:35-67

WARNING in ./~/require_optional/README.md Module parse failed: /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/require_optional/README.md Line 1: Unexpected token ILLEGAL You may need an appropriate loader to handle this file type. | # require_optional | Work around the problem that we do not have a optionalPeerDependencies concept in node.js making it a hassle to optionally include native modules | @ ./~/require_optional ^./.*$

WARNING in ./~/require_optional/LICENSE Module parse failed: /Users/richie/Code/CreativeFlumeProjects/cf-website/node_modules/require_optional/LICENSE Line 1: Unexpected identifier You may need an appropriate loader to handle this file type. | Apache License | Version 2.0, January 2004 |
http://www.apache.org/licenses/ @ ./~/require_optional ^./.*$ /Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235900 return map[req] || (function() { throw new Error("Cannot find module '" + req + "'.") }()); ^

Error: Cannot find module './node-mongodb-native'. at /Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235900:42 at webpackContextResolve (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235900:90) at webpackContext (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235897:30) at Object. (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:48684:37) at webpack_require (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:20:30) at Object. (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:52685:17) at webpack_require (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:20:30) at Object. (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:236259:15) at webpack_require (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:20:30) at Object.exports.contain.exports.reachTemplate.internals.Any.applyFunctionToChildren.internals.Err.toString.internals.getPath.internals.serializer.internals.annotate.internals.Response._prepare.internals.Response._processPrepare.internals.Auth.test.internals.Auth.payload.internals.Auth.response.internals.Authenticator.exports.wrap.internals.isIsoDate.internals.compare.internals.Date.min.internals.Date.max.internals.Connection._init.internals.Connection._start.internals.Connection._stop.internals.Connection._dispatch.internals.Methods._add.internals.state.internals.payload.internals.compare.internals.Number.min.internals.Number.max.internals.Number.greater.internals.Number.less.internals.Number.multiple.internals.Number.integer.internals.Number.negative.internals.Number.positive.internals.Object.length.internals.Object.min.internals.Object.max.internals.Object.assert.internals.compare.internals.String.min.internals.String.max.internals.String.creditCard.internals.String.length.internals.String.regex.internals.String.alphanum.internals.String.token.internals.String.email.internals.String.ip.internals.String.uri.internals.String.isoDate.internals.String.guid.internals.String.hex.internals.String.hostname.internals.String.lowercase.internals.String.uppercase.internals.Request.internals.Response.writeHead.internals.Topo.add.exports.execute.internals.prerequisites.internals.handler.internals.fromString.internals.pre.module.exports.internals.Plugin.internals.Plugin.register.internals.Protect.run.internals.Request.internals.Request._execute.internals.Request._lifecycle.internals.Request._invoke.internals.Server.start.internals.Server.initialize.internals.Server._start.internals.Server.stop._invoke.exports.send.internals.marshal.internals.fail.internals.transmit.internals.state.internals.input.exports.response.internals.Router.normalize.internals.parseParams.internals.Router.table.internals.Policy.get.internals.Policy._callGenerateFunc.internals.Policy.set.exports.generateKey.exports.encrypt.exports.decrypt.exports.hmacWithPassword.exports.seal.exports.unseal.internals.Array.items.internals.Array.ordered.internals.Array.min.internals.Array.max.internals.Array.length.internals.Binary.min.internals.Binary.max.internals.checkIpV6.exports.validate.internals.validate.internals.Definitions.parse.Items.serial.internals.unsign.Items.serial.internals.unsign.internals.decode.internals.Definitions.format.Items.serial.exports.prepareValue.internals.encode.internals.sign.internals.Parser.internals.Parser.parse.decoder.once.writeFile.internals.Parser.raw.decoder.once.internals.Parser.multipart.onPart.writeFile.exports.Dispenser.internals.Dispenser.internals.Client.request.internals.Client.read.internals.Client.parseCacheControl.internals.Client._shortcut.map../connection (/Users/richie/Code/CreativeFlumeProjects/cf-website/public/server.bundle.js:235702:19)

私は解決策の数を試してみましたgoogleから見つけた私のresolve.extensionsに ".node"を追加し、node-loaderを追加するだけでなく、いくつかの追加の設定をノードオブジェクトに追加することもできます。

Answer 1

問題を回避するために、サーバーコードを処理するwebpackの設定にはいくつかの補足が必要です。以下を追加

試してみてください。

target: 'node', 
    output: { 
     ..., 
     libraryTarget: 'commonjs', 
    }, 
    externals: [ 
     /^(?!\.|\/).+/i, 
    ], 

をnodeにtargetの設定を使用すると、ノードのコンテキストではなく、ブラウザで作業していることを認識してのWebPACKます。 libraryTarget: 'commonjs'を追加すると、webpackで簡単にrequire呼び出しを実行し、外部ライブラリから関数を取得できます。

その後、重要なことは正規表現でexternalsに起こります。基本的には、バンドルからの非相対パスを使用する要求は除外されます。そうすればimport 'react';はwebpackでパッケージ化されませんが、import './components/MyComponent.js';の場合はそれになります。

これは、あなたの組み込みサーバーコードにnode_modulesディレクトリが含まれていることを確認する必要があることを意味します。

なぜこれはすべてですか？ Nodeは、バンドルされていない多くのネイティブモジュールを使用しているためです。特定のOS上のNodeの正確なバージョンに固有のもので、それらをJavascriptバンドルにまとめることはできません。あなた自身のコードがwebpackを通過し、node_modulesのすべてのものが任意のNodeプロジェクトのようにアクセスされるだけです。

あなたのブラウザバンドルにこれらの警告/エラーが表示された場合は、おそらくブラウザバンドル内のサーバでのみ動作するモジュールを必要としている/インポートしていることを意味します。サーバーでのみ使用されているファイルで必要とすることを確認してください。あるいは、それらを選択的に要求する。 Can I detect if my script is being processed by Webpack?