当我尝试导入猫鼬模型时，Webpack 无法编译
Posted
技术标签:
【中文标题】当我尝试导入猫鼬模型时，Webpack 无法编译【英文标题】：Webpack will not compile when I try to import a mongoose model 【发布时间】：2018-01-05 04:33:01 【问题描述】：我正在尝试使用 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;
此外，猫鼬被保存为开发依赖项。具体代码sn-ps在上面，如果你想运行它，这里是repo：https://github.com/capozzic1/react-blog
【问题讨论】：
不要将服务器端代码与客户端代码混用 我应该在模型/组件之间放置某种类型的控制器吗？ React 在客户端执行，而 mongoose 不执行。这不是一个 MVC 框架，因此您想要在客户端中显示的所有数据都需要从客户端发出所有这些请求，有很多关于如何做到这一点的教程。所以基本上是一个 API。 哦，我明白了，比如客户端上的 ajax 请求和 express api？如果你把你的答案放进去，我会把它标记为答案 在我发布答案之前，您能回答我 3 个问题吗...您是 React 新手吗？您是否正在尝试进行服务器端渲染？项目只是为了练习吗？ 【参考方案1】：您遇到的问题是您正在混合客户端 (React) 和服务器端代码 (Mongoose)。虽然它们都是 JS，但 Mongoose 依赖于一些内置的 Node.js 模块，Webpack 无法解析这些模块，除非你的目标是它会忽略它们的节点（你可以了解更多关于它的信息 here）。
我明白你在做什么，从你的 React 组件调用 Mongoose 模型并从那里获取数据，对吧？...这不是它的工作方式。
这里的解决方案是删除那些 Mongoose 模型，分离您的代码（客户端/服务器），创建一个 API 并从那里处理您的所有需求（创建、读取、更新、删除所有资源），这里是 video tutorial这将帮助您使用 node-restful 快速创建 API，但仅用于演示/练习目的，this other one 用于获取数据（一种简单而简单的方法）。
【讨论】：
【参考方案2】：对于客户端应用程序，您应该使用'mongoose/browser'。它适用于 Webpack。
【讨论】：
以上是关于当我尝试导入猫鼬模型时，Webpack 无法编译的主要内容，如果未能解决你的问题，请参考以下文章