web-dev-qa-db-fra.com

Webpack Express ne peut pas résoudre le module 'fs', la dépendance de la requête est une expression

Lorsque j'inclus Express dans mon projet, je rencontre toujours ces erreurs lorsque j'essaie de créer avec webpack.

webpack.config.dev.js

var path = require("path")

module.exports = {
  entry: {
    "server": "./server/server.ts"
  },
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: "/public/"
  },
  module: {
    loaders: [
      {
        test: /\.ts(x?)$/,
        exclude: /node_modules/,
        loader: "ts-loader"
      }, {
        test: /\.js(x?)$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }, {
        test: /\.json$/,
        loader: "json-loader"
      }, {
        test: /\.scss$/,
        exclude: /node_modules/,
        loaders: ["style-loader", "css-loader", "postcss-loader", "sass-loader"]
      }, {
        test: /\.css$/,
        loader: ["style-loader", "css-loader", "postcss-loader"]
      }, {
        test: /\.(jpe?g|gif|png|svg)$/i,
        loader: 'url-loader?limit=10000'
      }
    ]
  }
}

J'ai essayé:

  1. Installer 'fs' mais ça ne marche pas

  2. Lisez quelque part pour changer la propriété du noeud fs. Cela supprime les avertissements d'erreur mais je ne pense pas que ce soit une bonne solution permanente.

    module.exports = {
  node: {
    fs: "empty"
  }
}

    Durée: 2496ms Taille de l'actif Morceaux Nom des morceaux bundle.js 761 Ko 0 [émis] serveur bundle.js.map 956 Ko 0 [émis] serveur + 119 modules cachés

    AVERTISSEMENT dans ./~/express/lib/view.js Dépendances critiques: 78: 29-56 la demande d'une dépendance est une expression @ ./~/express/lib/view.js 78: 29-56 ERREUR dans ./ ~/express/lib/view.js

    Module introuvable. Erreur: impossible de résoudre le module 'fs' dans/Users/clementoh/Desktop/boilerplate2/node_modules/express/lib @ ./~/express/lib/view.js 18: 9-22 ERREUR dans ./~/ send/index.js

    Module introuvable. Erreur: impossible de résoudre le module 'fs' dans/Users/clementoh/Desktop/boilerplate2/node_modules/send @ ./~/send/index.js 24: 9-22 ERREUR dans ./~/etag/index. js

    Module introuvable. Erreur: impossible de résoudre le module 'fs' dans/Users/clementoh/Desktop/boilerplate2/node_modules/etag @ ./~/etag/index.js 22: 12-25 ERROR dans ./~/destroy/index. js

    Module introuvable. Erreur: impossible de résoudre le module 'fs' dans/Users/clementoh/Desktop/boilerplate2/node_modules/destroy @ ./~/destroy/index.js 14: 17-30 ERROR dans ./~/mime/mime. js

    Module introuvable. Erreur: impossible de résoudre le module 'fs' dans/Users/clementoh/Desktop/boilerplate2/node_modules/mime @ ./~/mime/mime.js 2: 9-22

javascriptnode.jswebpack
28
Clement

Il suffit de poster une réponse, puisque tout le monde ne lit pas les commentaires sur SO. @ Aurora0001 l'a cloué. La configuration de Webpack doit avoir cet ensemble:

"target": "node"
49
Christopher Davies

Je suis sur une pile Angular 2 - Electron - Webpack et j'avais besoin d'utiliser fs dans mon service, j'ai enfin trouvé comment faire:

1) Dans votre webpack.common.js, spécifiez target:'electron-renderer'

2) dans votre service ou composant: import * as fs from 'fs'; et utilisez fs comme pour un projet de noeud.

J'espère que ça aide!

4
Wetteren Rémi

J'ai résolu ce problème en deux étapes:

  1. Supprimer node_modules répertoire

  2. Ajouter target:'node' dans le fichier de configuration webpack

Puis lancez npm install. Cela a bien fonctionné pour moi.

3
Osman Goni Nahid

J'ai ajouté node: { fs: 'empty' } sans chance,

puis j'ai ajouté --config pour démarrer la commande:

webpack-dev-sever webpack.config.dev.js

Utilisez l'indicateur --config pour utiliser le fichier personnalisé.

webpack-dev-sever --config webpack.config.dev.js

2
Kevin Danikowski

Solution de travail/Hack/Patch pour Angular V6 et plus

La solution pour moi était de pirater le module Angular-CLI pour usurper les modules de nœuds manquants.

Après l’installation, localisez le fichier suivant:

node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js

Trouvez la ligne node et ajoutez ceci:

node: { crypto: true, stream: true, fs: 'empty', net: 'empty' }

Et c'est tout!!!

????????????????????

Remarque: vous devrez installer ce correctif chaque fois que vous mettez à jour le paquet. Alors utilisez ce script:

package.json 

"scripts": {
  ...
  "postinstall": "node patch-webpack.js"
  ...
}

patch-webpack.js 

const fs = require('fs');
const f = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/browser.js';

fs.readFile(f, 'utf8', function (err,data) {
  if (err) {
    return console.log(err);
  }
  let result = data.replace(/node: false/g, "node: {crypto: true, stream: true, fs: 'empty', net: 'empty'}");

  fs.writeFile(f, result, 'utf8', function (err) {
    if (err) return console.log(err);
  });
});

Source: https://blog.lysender.com/2018/07/angular-6-cannot-resolve-crypto-fs-net-path-stream-when-building-angular/

0
jpthor

Ajouter "target": "node", fonctionne en l'ajoutant à la webpack.config.js.

0
el-Joft