Q:

Webpack will not compile when I try to import a mongoose model

I am trying to make a simple React blog app with MongoDB storing the posts, but  webpack won't compile when I try to import a Mongoose model into my NewPost component. 
Here are the errors: 
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.

Here is my webpack.config.js file: 
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',
    },
  },
};

Here is my models.js file for creating the database schema for the post:
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;

Here is the component(NewPost.jsx) I'm trying to import the model into so I can use this form to start saving posts into the database.
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;

Also, mongoose is saved as a dev-dependency. The specific code snippets are above, but here is the repo if you'd like to run it: https://github.com/capozzic1/react-blog

A:

The problem you have is that you're mixing client (React) and server side code (Mongoose). While both of them are JS, Mongoose relies on some built-in Node.js modules and Webpack can't resolve those modules, unless your target is node which it will ignore them (You can learn more about it here).
I see what you were trying to do, call Mongoose models from your React components and fetch data from there, right?... that's not the way it works.
The solution here would be removing those Mongoose models, separate your code (client/server), make an API and handle all your needs from there (Create, Read, Update, Delete all your resources), here's a video tutorial that will help you to create an API really quickly using node-restful but just for demo/practice purposes and this other one for fetching data (an easy and simple way).

