Webpack ne compile pas lorsque j'essaie d'importer un modèle mangouste

Question

J'essaie de créer une application de blog React simple avec MongoDB stockant les messages, mais webpack ne compilera pas lorsque j'essayerai d'importer un modèle Mongoose dans mon composant NewPost.

Voici les erreurs:

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. 

Voici mon fichier 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', 
    }, 
    }, 
}; 

Voici mon models.js fichier pour créer le schéma de base de données pour le poste:

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; 

Voici le composant (NewPost.jsx) J'essaie d'importer le modèle afin que je puisse utiliser ce formulaire pour démarrer sav postes dans la base de données.

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; 

De plus, mongoose est sauvegardé en tant que déviance. Les extraits de code spécifiques sont ci-dessus, mais voici le repo si vous souhaitez l'exécuter: https://github.com/capozzic1/react-blog

Answer 1

Le problème que vous avez, c'est que vous mélangez le client (React) et le code côté serveur (Mongoose). Bien que tous deux soient JS, Mongoose s'appuie sur des modules Node.js intégrés et Webpack ne peut pas résoudre ces modules, à moins que votre cible ne soit un nœud auquel elle les ignorera (vous pouvez en apprendre plus à ce sujet here).

Je vois ce que vous essayiez de faire, appelez les modèles Mongoose de vos composants React et récupérez des données à partir de là, n'est-ce pas? ... Ce n'est pas ainsi que ça fonctionne. La solution ici serait de supprimer ces modèles Mongoose, de séparer votre code (client/serveur), de créer une API et de gérer tous vos besoins à partir de là (Créer, Lire, Mettre à jour, Supprimer toutes vos ressources), voici un video tutorial vous aidera à créer une API très rapidement en utilisant node-restful mais uniquement à des fins de démonstration/pratique et this other one pour récupérer des données (d'une manière simple et facile).