當我嘗試導入貓鼬模型時，Webpack不會編譯

Question

我想用MongoDB製作一個簡單的React博客應用程序來存儲帖子，但是當我嘗試將Mongoose模型導入到我的NewPost組件時，webpack不會編譯。

下面是錯誤：

WARNING in ./node_modules/mongoose/lib/drivers/index.js 
10:13-49 Critical dependency: the request of a dependency is an expression 

WARNING in ./node_modules/require_optional/index.js 
82:18-42 Critical dependency: the request of a dependency is an expression 

WARNING in ./node_modules/require_optional/index.js 
90:20-44 Critical dependency: the request of a dependency is an expression 

WARNING in ./node_modules/require_optional/index.js 
97:35-67 Critical dependency: the request of a dependency is an expression 

ERROR in ./node_modules/mongodb/lib/gridfs/grid_store.js 
Module not found: Error: Can't resolve 'fs' in 'D:\mydocs\webdev\gitprojs\ReactBlogFinal\node_modules\mongodb\lib\gridfs' 
@ ./node_modules/mongodb/lib/gridfs/grid_store.js 42:7-20 
@ ./node_modules/mongodb/index.js 
@ ./node_modules/mongoose/lib/drivers/node-mongodb-native/binary.js 
@ ./node_modules/mongoose/lib/drivers/node-mongodb-native/index.js 
@ ./node_modules/mongoose/lib/drivers/index.js 
@ ./node_modules/mongoose/lib/schema.js 
@ ./node_modules/mongoose/lib/browser.js 
@ ./models/models.js 
@ ./views/NewPost/NewPost.jsx 
@ ./routes.jsx 
@ ./index.jsx 
@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./index.jsx . 

ERROR in ./node_modules/mongodb-core/lib/connection/connection.js 
Module not found: Error: Can't resolve 'net' in 'D:\mydocs\webdev\gitprojs\ReactBlogFinal\node_modules\mongodb-core\lib\connection' 
@ ./node_modules/mongodb-core/lib/connection/connection.js 5:10-24 
@ ./node_modules/mongodb-core/index.js 
@ ./node_modules/mongodb/index.js 
@ ./node_modules/mongoose/lib/drivers/node-mongodb-native/binary.js 
@ ./node_modules/mongoose/lib/drivers/node-mongodb-native/index.js 
@ ./node_modules/mongoose/lib/drivers/index.js 
@ ./node_modules/mongoose/lib/schema.js 
@ ./node_modules/mongoose/lib/browser.js 
@ ./models/models.js 
@ ./views/NewPost/NewPost.jsx 
@ ./routes.jsx 
@ ./index.jsx 
@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./index.jsx . 

ERROR in ./node_modules/mongodb-core/lib/connection/connection.js 
Module not found: Error: Can't resolve 'tls' in 'D:\mydocs\webdev\gitprojs\ReactBlogFinal\node_modules\mongodb-core\lib\connection' 
@ ./node_modules/mongodb-core/lib/connection/connection.js 6:10-24 
@ ./node_modules/mongodb-core/index.js 
@ ./node_modules/mongodb/index.js 
@ ./node_modules/mongoose/lib/drivers/node-mongodb-native/binary.js 
@ ./node_modules/mongoose/lib/drivers/node-mongodb-native/index.js 
@ ./node_modules/mongoose/lib/drivers/index.js 
@ ./node_modules/mongoose/lib/schema.js 
@ ./node_modules/mongoose/lib/browser.js 
@ ./models/models.js 
@ ./views/NewPost/NewPost.jsx 
@ ./routes.jsx 
@ ./index.jsx 
@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./index.jsx . 

ERROR in ./node_modules/require_optional/index.js 
Module not found: Error: Can't resolve 'fs' in 'D:\mydocs\webdev\gitprojs\ReactBlogFinal\node_modules\require_optional' 
@ ./node_modules/require_optional/index.js 2:7-20 
@ ./node_modules/mongodb-core/lib/topologies/server.js 
@ ./node_modules/mongodb-core/index.js 
@ ./node_modules/mongodb/index.js 
@ ./node_modules/mongoose/lib/drivers/node-mongodb-native/binary.js 
@ ./node_modules/mongoose/lib/drivers/node-mongodb-native/index.js 
@ ./node_modules/mongoose/lib/drivers/index.js 
@ ./node_modules/mongoose/lib/schema.js 
@ ./node_modules/mongoose/lib/browser.js 
@ ./models/models.js 
@ ./views/NewPost/NewPost.jsx 
@ ./routes.jsx 
@ ./index.jsx 
@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./index.jsx . 

ERROR in ./node_modules/resolve-from/index.js 
Module not found: Error: Can't resolve 'module' in 'D:\mydocs\webdev\gitprojs\ReactBlogFinal\node_modules\resolve-from' 
@ ./node_modules/resolve-from/index.js 3:13-30 
@ ./node_modules/require_optional/index.js 
@ ./node_modules/mongodb-core/lib/topologies/server.js 
@ ./node_modules/mongodb-core/index.js 
@ ./node_modules/mongodb/index.js 
@ ./node_modules/mongoose/lib/drivers/node-mongodb-native/binary.js 
@ ./node_modules/mongoose/lib/drivers/node-mongodb-native/index.js 
@ ./node_modules/mongoose/lib/drivers/index.js 
@ ./node_modules/mongoose/lib/schema.js 
@ ./node_modules/mongoose/lib/browser.js 
@ ./models/models.js 
@ ./views/NewPost/NewPost.jsx 
@ ./routes.jsx 
@ ./index.jsx 
@ multi (webpack)-dev-server/client?http://localhost:3000 webpack/hot/dev-server ./index.jsx . 
webpack: Failed to compile. 

這裏是我的webpack.config.js文件：

const path = require('path'); 
const webpack = require('webpack'); 

// env 
const buildDirectory = 'public'; 

module.exports = { 
    entry: './index.jsx', 
    output: { 
    path: path.resolve(buildDirectory), 
    filename: 'app.js', 

    }, 

    externals: { 
    cheerio: 'window', 
    'react/lib/ExecutionEnvironment': true, 
    'react/lib/ReactContext': true, 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.jsx?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     options: { 
      presets: ['es2015', 'react', 'airbnb', 'stage-0'], 
     }, 
     }, 
     { 
     test: /\.(jpe?g|png|gif|svg)$/i, 
     use: [ 
      'file-loader?hash=sha512&digest=hex&name=[hash].[ext]', 
      'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false', 

     ], 
     }, 
    ], 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx'], 
    }, 

    devServer: { 
    hot: true, 
    inline: true, 
    port: 3000, 
    historyApiFallback: { 
     index: 'public/index.html', 
    }, 
    }, 
}; 

這是我models.js立案爲後創建數據庫模式：

const mongoose = require('mongoose'); 

const Schema = mongoose.Schema; 
const db = mongoose.connect('mongodb://127.0.0.1:27017'); 


const blogSchema = new Schema({ 
    title: String, 
    author: String, 
    body: String, 
    date: { type: Date, default: Date.now }, 
}); 

const Post = mongoose.model('Blog', blogSchema); 

module.exports = Post; 

這是組件（NewPost.jsx）我試圖導入模型，所以我可以使用這種形式來啓動sav將帖子插入數據庫。

import React from 'react'; 
import Layout from '../../components/Layout/Layout'; 
import Post from '../../models/models'; 

const NewPost =() => (
    <Layout> 
    <section className="form-wrapper" id="post-form"> 
     <h2>New Post</h2> 
     <form> 
     <label htmlFor="post-title">Post title</label><br /> 
     <input type="text" placeholder="Post title" required /> 
     <div className="text-wrapper"> 
      <textarea className="text-area" /> 
     </div> 
     <button type="submit">Submit</button> 
     </form> 
    </section> 
    </Layout> 
); 

export default NewPost; 

此外，貓鼬被保存爲dev-dependency。具體的代碼片段如上，但如果你想運行它，這裏是回購：https://github.com/capozzic1/react-blog

Answer 1

你遇到的問題是你在混合客戶端（React）和服務器端代碼（Mongoose）。雖然它們都是JS，但Mongoose依賴於一些內置的Node.js模塊，並且Webpack無法解析這些模塊，除非您的目標是它將忽略它們的節點（您可以瞭解更多關於它的信息here）。

我看到你在做什麼，從你的React組件調用Mongoose模型並從那裏獲取數據，對吧？這不是它工作的方式。

這裏的解決方案將刪除那些Mongoose模型，分離您的代碼（客戶端/服務器），創建一個API並處理您的所有需求（創建，讀取，更新，刪除所有資源），這裏是一個video tutorial將幫助您使用node-restful非常快速地創建API，但僅用於演示/練習目的和this other one用於獲取數據（一種簡單易用的方法）。