Request: Webpack

+1, voyant aussi ceci

Sortir:

ERROR in ./~/request/lib/har.js
Module not found: Error: Cannot resolve module 'fs' in /absolute/path/to/project/node_modules/request/lib
 @ ./~/request/lib/har.js 3:9-22

ERROR in ./~/request/~/tunnel-agent/index.js
Module not found: Error: Cannot resolve module 'net' in /absolute/path/to/project/node_modules/request/node_modules/tunnel-agent
 @ ./~/request/~/tunnel-agent/index.js 3:10-24

ERROR in ./~/request/~/tunnel-agent/index.js
Module not found: Error: Cannot resolve module 'tls' in /absolute/path/to/project/node_modules/request/node_modules/tunnel-agent
 @ ./~/request/~/tunnel-agent/index.js 4:10-24

ERROR in ./~/request/~/forever-agent/index.js
Module not found: Error: Cannot resolve module 'net' in /absolute/path/to/project/node_modules/request/node_modules/forever-agent
 @ ./~/request/~/forever-agent/index.js 6:10-24

ERROR in ./~/request/~/forever-agent/index.js
Module not found: Error: Cannot resolve module 'tls' in /absolute/path/to/project/node_modules/request/node_modules/forever-agent
 @ ./~/request/~/forever-agent/index.js 7:10-24

ERROR in ./~/request/~/tough-cookie/lib/cookie.js
Module not found: Error: Cannot resolve module 'net' in /absolute/path/to/project/node_modules/request/node_modules/tough-cookie/lib
 @ ./~/request/~/tough-cookie/lib/cookie.js 23:10-24

ERROR in ./~/request/~/form-data/lib/form_data.js
Module not found: Error: Cannot resolve module 'fs' in /absolute/path/to/project/node_modules/request/node_modules/form-data/lib
 @ ./~/request/~/form-data/lib/form_data.js 7:9-22

ERROR in ./~/request/~/har-validator/~/is-my-json-valid/~/jsonpointer/jsonpointer.js
Module not found: Error: Cannot resolve module 'console' in /absolute/path/to/project/node_modules/request/node_modules/har-validator/node_modules/is-my-json-valid/node_modules/jsonpointer
 @ ./~/request/~/har-validator/~/is-my-json-valid/~/jsonpointer/jsonpointer.js 1:14-32

Je l'ai compris. Le problème est que Webpack nécessite une configuration supplémentaire contrairement à browserify en raison de sa nature plus simple. Voir mon exemple de branche et de diff pour savoir comment j'ai réussi à exécuter les tests.

https://github.com/request/request/compare/master...pho3nixf1re :webpack-tests

Mon plan est de transformer cela en son propre test de karma et de soumettre un PR afin que d'autres puissent l'utiliser comme exemple. En outre, il peut révéler des problèmes futurs au fur et à mesure que le développement progresse.

Oui, j'ai trouvé la même chose, merci. Pour tous ceux qui tombent sur cela, les documents Webpack pertinents sont ici : http://webpack.github.io/docs/configuration.html#node

@jaredmcdonald merci beaucoup :)

@pho3nixf1re ce serait formidable si vous soumettez un PR sur la demande de test avec webpack (test supplémentaire, pas à la place du navigateur) :+1:

Oui! Je compte. Je ne l'ai remplacé que dans ma succursale comme preuve de concept rapide. Je m'en occupe ce week-end.

L'ajout du chargeur json webpack n'a malheureusement pas résolu le problème pour moi.

Même problème ici.

La solution : installez json-loader pour que webpack puisse gérer les fichiers *.json. Ajoutez ensuite ce chargeur et un nouvel objet node à votre webpack.config.js comme ceci :

$ npm install --save-dev json-loader

webpack.config.js

var path = require('path');

module.exports = {
  entry: 'index',
  output: {
    path: path.join(__dirname, 'scripts'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      { test: /\.json$/, loader: 'json-loader' }
    ]
  },
  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.js']
  },
  node: {
    console: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

L'ajout de l'objet node: { ... } évite l'erreur, mais je ne peux pas utiliser console dans le navigateur. Y a-t-il un moyen de contourner ceci?

je viens de comprendre :

node: {
    console: true
}

Cela m'a été d'une grande aide. Merci à tous ci-dessus.

Merci à tous, je suis tombé dessus moi-même.

de la chance ?

J'utilise webpack & request et j'ai l'erreur que vous avez tous ici.
J'ai essayé la solution avec l'élément json-loader & node et j'obtiens toujours les erreurs...

Salut. J'ai besoin d'aide. Je souhaite combiner node js mysql dans mon application React. Mais j'ai un message d'erreur ne peut pas résoudre le module 'net' lorsque j'exécute le webpack.
Veuillez consulter les codes ci-dessous :

import React from 'react'
import ReactDOM from 'react-dom'
import mysql from 'mysql'

export default class Server extends React.Component{
render(){
return(
<div>
<div>Success Inserting New Data</div>
<div>Company Name: {this.props.name}</div>
<div>Email: {this.props.email}</div>
</div>
);
}
}

var company_data = {
name: 'Company Name Sample',
email: '[email protected]'
};

let connection = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '',
database: 'earnmoredoless'
});

connection.connect();

let sql = connection.query('insert into account set ?', data, function(err, res){

`//success`
`if(!err){`

    `ReactDOM.render(`
        `<Server data={company_data} />,`
        `document.querySelector('#app')`
    `);`

`}else{`

    `console.log('Failed inserting new data.');`
`}`

});

+1
cela m'a sauvé

+1
Enregistré!

+1 J'ai moi-même eu des problèmes avec dotenv . La solution ci-dessus a résolu mon problème. Merci!

L'ajout du nœud { fs: 'empty' } résolu le problème cannot resolve module 'fs' pour moi, mais maintenant ma console a une erreur TypeError: fs.readFileSync is not a function . Je rencontre ce problème en essayant d'utiliser dotev et webpack avec le transpiler es6 babel. Importation du pack Web en tant que import 'dotenv/config'; comme décrit dans https://github.com/motdotla/dotenv/issues/114

Alors que la solution node {} ci-dessus a aidé mon webpack.config.js, elle a cassé mon karma.conf.js qui en dépend, avec l'erreur suivante :

ReferenceError : le mode strict interdit la création implicite de la propriété globale '_crypto'

Quelqu'un a-t-il résolu ce problème pour travailler avec dotenv ?

J'ai ce problème en essayant d'utiliser node-soap , qui dépend de request dans une application React qui utilise webpack. J'ai essayé de modifier ma configuration webpack pour qu'elle contienne ;

node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }

Comme suggéré ci-dessus, mais cela n'a pas résolu le problème pour moi. Je vois toujours ces erreurs ;

D'autres voient les mêmes problèmes;
https://gitter.im/vpulim/node-soap/archives/2016/04/13
https://gitter.im/vpulim/node-soap/archives/2016/01/11

Et pour autant que je sache, personne n'a encore de solution. Je ne suis pas très familier avec webpack, mais si personne d'autre n'a encore de solution, je peux essayer de raser ce yak ce week-end si j'ai le temps afin que je puisse déboguer davantage.

@kevhuang @sailingthoms @MrOutis ou @gaearon L' un d'entre vous a-t-il déjà découvert une solution pour cela ? Ou avez-vous des idées sur ce qu'il faut faire d'autre pour que node-soap / request fonctionnent avec React ? (De préférence avec create-react-app sans avoir à s'éjecter).

@screendriver Où avez-vous obtenu les informations sur l'_objet nœud_ ? Je ne le vois pas dans la documentation.

@richburdon , @lucasbento Vous avez un exemple pour vous aider ?

@garethderioth désolé je ne me souviens pas. Ça fait trop longtemps.

Au fait : en attendant, j'utilise l'API fetch HTML5 et ce polyfill pour mes requêtes AJAX.

@garethderioth
@jaredmcdonald l'a dit ci-dessus dans https://github.com/request/request/issues/1529#issuecomment -90347445

Oui, j'ai trouvé la même chose, merci. Pour tous ceux qui tombent sur cela, les documents Webpack pertinents sont ici : http://webpack.github.io/docs/configuration.html#node

Au fait : en attendant, j'utilise l'API fetch HTML5 et ce polyfill pour mes requêtes AJAX.

Créer des utilisateurs de l'application React : veuillez noter que CRA inclut déjà un polyfill window.fetch afin que vous puissiez l'utiliser en toute sécurité au lieu de request s'il répond à votre cas d'utilisation.

@screendriver @josiahsprague Au lieu de ça :

node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
}

J'ai écrit:

target: 'node',

Cela a résolu tous mes problèmes.

Edit : Vous pouvez en savoir plus à ce sujet ici : https://webpack.github.io/docs/configuration.html#target

@gaearon Et si la dépendance était requise par une troisième bibliothèque ?
Soulever un problème dans le référentiel de create-react-app, comme j'aurais dû le faire depuis le début :/

Ma capture d'écran des erreurs publiées ci-dessus n'est pas pertinente, ce qui est probablement évident pour quiconque lit ces erreurs. 😂 Quoi qu'il en soit, il semble que les deux solutions du commentaire de utiliser target: 'node-webkit ou une autre option similaire en fonction de votre situation.

Dans mon cas, je viens de passer de node-soap à browser-soap , mais cela ne fonctionnera pas pour tout le monde.

J'ai eu un problème différent qui est similaire à celui-ci, mais j'ai fini par être socketio/socket.io-client/issues/933 pour tous ceux qui pourraient le rencontrer

+1
Merci!

J'ai fait un petit changement en utilisant ce que @screendriver & @kilometers ont fourni (merci !).

Webpack s'est plaint s'il y avait une extension vide, cependant, je ne pense pas que cela serait nécessaire pour la plupart.

````
var chemin = require('chemin')
var request = require('request')
var webpack = require('webpack')

module.exports = {
entrée : './src/main.js',
sortir: {
chemin : chemin.resolve(__dirname, './dist'),
PublicPath : '/dist/',
nom de fichier : 'build.js'
},
module : {
des règles: [
{
tester : /.json$/,
chargeur : 'json-loader'
}
]
},
résoudre: {
/ extensions : ['.webpack.js', '.web.js', '.js'] /
}
nœud : {
console : vrai,
fs : 'vide',
net : 'vide',
tls : 'vide'
}
}
````

Meilleure solution simple sans affecter le code fourni :

Pour les personnes qui ont des problèmes avec storybook et ne veulent pas remplacer la configuration webpack d'origine de storybook, vous pouvez l'étendre en créant .storybook/webpack.config.js et ajouter :

// Load the default config generator.
const genDefaultConfig = require('@kadira/storybook/dist/server/config/defaults/webpack.config.js');

module.exports = function (config, env) {
    const newConfig = genDefaultConfig(config, env);

    // Extend to resolve fs issues
    newConfig.node = {
        fs: 'empty'
    };

    return newConfig;
};

  node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }

L'utilisation de cette erreur de code ci-dessus a été résolue mais

fs.writeFile('/home/react-hello-world/test.txt', 'aaa', function(err) { alert(err); });

fs.writeFile ne fonctionne pas, veuillez donner une solution.

@chandrasekarb essayez de définir fs sur true au lieu de "vide"

target: 'node', fonctionné pour moi :department_store:

J'ai rencontré ce problème et c'était parce que j'exécutais une double configuration client/serveur pour le rendu côté serveur. La configuration de rendu côté serveur a été marquée comme cible : « nœud », tandis que la configuration du client n'en avait pas spécifié. J'ai ajouté target: 'web' à la configuration du client et l'erreur a disparu.

Ce problème a été automatiquement marqué comme obsolète car il n'a pas eu d'activité récente. Il sera fermé si aucune autre activité ne se produit. Merci pour vos contributions.

La demande est maintenant en mode maintenance et ne fusionnera aucune nouvelle fonctionnalité ni ne corrigera ce bogue. S'il vous plaît voir #3142 pour plus d'informations.

J'ai eu le même problème en essayant d'utiliser jQuery avec Nuxt (ou Node), le problème était que j'importais jQuery et Bootstrap et j'ai ajouté jsdom pour le résoudre mais n'a pas fonctionné. Je l'ai résolu en important des bibliothèques directement dans la section head de nuxt.config.js , une autre façon consiste à définir client mode dans les plugins de configuration nuxt, j'espère que cela aidera quelqu'un.