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）我正在尝试将模型导入，因此我可以使用此表单开始将帖子保存到数据库中。

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;

此外，mongoose被保存为dev依赖项。具体的代码片段在上面，但如果您想要运行它，请在此处进行回购：https://github.com/capozzic1/react-blog

Answer 1

您遇到的问题是您正在混合客户端（React）和服务器端代码（Mongoose）。虽然它们都是JS，但Mongoose依赖于一些内置的Node.js模块而Webpack无法解析这些模块，除非你的目标是它将忽略它们的节点（你可以了解更多关于它的信息{{3} }）。

我看到你要做的事情，从你的React组件调用Mongoose模型并从那里获取数据，对吧？......这不是它的工作方式。

这里的解决方案是删除那些Mongoose模型，分离您的代码（客户端/服务器），制作API并从那里处理您的所有需求（创建，读取，更新，删除所有资源），这里＆＃39; sa here可以帮助您使用video tutorial快速创建API，但仅用于演示/练习目的，node-restful用于获取数据（一种简单易用的方法）。

Answer 2

对于客户端应用程序，您应该使用'mongoose/browser'。它适用于Webpack。

当我尝试导入mongoose模型时，Webpack将无法编译

2 个答案: