Request: Webpack

+1, sehe das auch

Ausgabe:

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

Ich habe es herausgefunden. Das Problem ist, dass Webpack im Gegensatz zu browserify aufgrund seiner Barebone-Natur einige zusätzliche Konfigurationen erfordert. Sehen Sie sich meinen Beispiel-Branch und -Diff an, um zu erfahren, wie ich die Tests erfolgreich ausgeführt habe.

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

Mein Plan ist, daraus einen eigenen Karma-Test zu machen und eine PR einzureichen, damit andere sie als Beispiel verwenden können. Außerdem können im Verlauf der Entwicklung zukünftige Probleme aufgedeckt werden.

Ja, habe das gleiche gefunden, danke. Für alle anderen, die darüber stolpern, finden Sie die relevanten Webpack-Dokumente hier: http://webpack.github.io/docs/configuration.html#node

@jaredmcdonald vielen Dank :)

@pho3nixf1re es wäre toll, wenn Sie eine PR über eine Testanfrage mit Webpack einreichen (zusätzlicher Test, nicht anstelle des browserify-Tests) :+1:

Ja! Ich beabsichtige. Ich habe es in meiner Filiale nur als schnellen Proof of Concept ausgetauscht. Ich werde das dieses Wochenende in Angriff nehmen.

Das Hinzufügen des json Webpack Loader hat dies leider nicht für mich behoben.

Gleiches Problem hier.

Die Lösung: json-loader installieren, damit Webpack *.json-Dateien verarbeiten kann. Fügen Sie dann diesen Loader und ein neues node Objekt zu Ihrem webpack.config.js :

$ 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'
  }
};

Das Hinzufügen des node: { ... } Objekts vermeidet den Fehler, aber dann kann ich console im Browser nicht verwenden. Gibt es einen Weg, dies zu umgehen?

Ich habe es gerade herausgefunden:

node: {
    console: true
}

Dies war eine große Hilfe für mich. Danke an alle oben.

Danke an alle, bin selbst darauf gestoßen.

etwas Glück?

Ich verwende Webpack & Request und habe den Fehler erhalten, den Sie alle hier erhalten haben.
Habe die Lösung mit dem json-loader & node-Element ausprobiert und bekomme immer noch die Fehler ...

Hallo. Ich brauche Hilfe. Ich möchte den Knoten js mysql in meine React-App integrieren. Aber ich habe eine Fehlermeldung, die das Modul 'net' nicht auflösen kann, wenn ich das Webpack ausführe.
Bitte beachten Sie die folgenden Codes:

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
das hat mich gerettet

+1
Gerettet!

+1 Ich hatte selbst Probleme mit dotenv . Die obige Lösung hat mein Problem gelöst. Danke!

Das Hinzufügen des Knotens { fs: 'empty' } das Problem mit cannot resolve module 'fs' für mich behoben, aber jetzt hat meine Konsole einen Fehler TypeError: fs.readFileSync is not a function . Ich stoße auf dieses Problem, als ich versuche, dotev und webpack mit dem es6-Babel-Transpiler zu verwenden. Webpack als import 'dotenv/config'; importieren, wie in https://github.com/motdotla/dotenv/issues/114 beschrieben

Während die obige Knotenlösung {} meiner webpack.config.js geholfen hat, hat sie meine davon abhängige karma.conf.js mit dem folgenden Fehler gebrochen:

ReferenceError: Strikter Modus verbietet die implizite Erstellung der globalen Eigenschaft '_crypto'

Hat jemand das so gelöst, dass es mit dotenv funktioniert?

Ich habe dieses Problem beim Versuch, node-soap , was von request in einer React-App abhängt, die Webpack verwendet. Ich habe versucht, meine Webpack-Konfiguration so zu ändern, dass sie enthält;

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

Wie oben vorgeschlagen, aber das hat das Problem bei mir nicht gelöst. Ich sehe diese Fehler immer noch;

Andere sehen die gleichen Probleme;
https://gitter.im/vpulim/node-soap/archives/2016/04/13
https://gitter.im/vpulim/node-soap/archives/2016/01/11

Und meines Wissens hat noch keiner eine Lösung. Ich kenne mich mit Webpack nicht so gut aus, aber wenn noch niemand eine Lösung hat, kann ich dieses Wochenende versuchen, diesen Yak zu rasieren, wenn ich die Zeit habe, damit ich das weiter debuggen kann.

@kevhuang @sailingthoms @MrOutis oder @gaearon Hat jemand von euch schon eine Lösung dafür gefunden? Oder haben Sie eine Idee, was sonst noch zu tun ist, damit node-soap / request mit React funktioniert? (Am besten mit create-react-app ohne auswerfen zu müssen).

@screendriver Woher hast du die Informationen zum _node-Objekt_? Ich sehe es nicht in der Dokumentation.

@richburdon , @lucasbento Hast du ein Beispiel, das dir hilft?

@garethderioth Entschuldigung, ich kann mich nicht erinnern. Es ist zu lange her.

Übrigens: mittlerweile nutze ich für meine AJAX-Anfragen die HTML5-Fetch-API und dieses Polyfill.

@garethderioth
@jaredmcdonald sagte es oben in https://github.com/request/request/issues/1529#issuecomment -90347445

Ja, habe das gleiche gefunden, danke. Für alle anderen, die darüber stolpern, finden Sie die relevanten Webpack-Dokumente hier: http://webpack.github.io/docs/configuration.html#node

Übrigens: mittlerweile nutze ich für meine AJAX-Anfragen die HTML5-Fetch-API und dieses Polyfill.

Benutzer der React-App erstellen: Bitte beachten Sie, dass CRA bereits ein window.fetch Polyfill enthält, sodass Sie es sicher anstelle von request wenn es Ihrem Anwendungsfall entspricht.

@screendriver @josiahsprague Stattdessen:

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

Ich hab geschrieben:

target: 'node',

Es hat alle meine Probleme gelöst.

Edit: Mehr dazu könnt ihr hier lesen: https://webpack.github.io/docs/configuration.html#target

@gaearon Was ist, wenn die Abhängigkeit von einer dritten Bibliothek benötigt wird?
Ein Problem im Repository von create-react-app auslösen, wie ich es von Anfang an haben sollte :/

Mein Screenshot der oben geposteten Fehler ist irrelevant, was wahrscheinlich für jeden offensichtlich ist, der diese Fehler liest. 😂 Wie auch immer, es scheint, dass beide Lösungen in @pedzeds Kommentar für mich funktionieren würden. Eine andere mögliche Lösung ist die Verwendung von target: 'node-webkit oder einer anderen ähnlichen Option, abhängig von Ihrer Situation.

In meinem Fall habe ich gerade von node-soap auf browser-soap umgestellt, aber das wird nicht für alle funktionieren.

Ich hatte ein anderes Problem, das diesem ähnlich ist, aber am Ende war es socketio/socket.io-client/issues/933 für jeden, der es erleben könnte

+1
Danke!

Ich habe eine kleine Änderung vorgenommen, indem ich das verwendet habe, was @screendriver & @kilometers bereitgestellt haben (danke!).

Webpack beschwerte sich, wenn es eine leere Erweiterung gab, aber ich glaube nicht, dass dies für die meisten erforderlich wäre.

````
var-Pfad = erfordern('Pfad')
var request = require('request')
var webpack = require('webpack')

module.exports = {
Eintrag: './src/main.js',
Ausgang: {
Pfad: path.resolve(__dirname, './dist'),
öffentlicherPfad: '/dist/',
Dateiname: 'build.js'
},
Modul: {
Regeln: [
{
test: /.json$/,
Lader: 'json-loader'
}
]
},
beschließen: {
/ Erweiterungen: ['.webpack.js', '.web.js', '.js'] /
}
Knoten: {
Konsole: wahr,-
fs: 'leer',
Netz: 'leer',-
tls: 'leer'
}
}
````

Beste einfache Lösung, ohne den gebündelten Code zu beeinträchtigen:

Für Leute, die Probleme mit storybook haben und die ursprüngliche Webpack-Konfiguration von storybook nicht ersetzen möchten, können Sie sie erweitern, indem Sie .storybook/webpack.config.js erstellen und hinzufügen:

// 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'
  }

Die Verwendung dieses obigen Codefehlers wurde behoben, aber

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

fs.writeFile funktioniert nicht, bitte geben Sie eine Lösung an.

@chandrasekarb Versuchen Sie, fs auf "true" statt auf "leer" zu setzen

target: 'node', hat bei mir funktioniert :department_store:

Ich bin auf dieses Problem gestoßen und es lag daran, dass ich eine duale Client / Server-Konfiguration für das serverseitige Rendering ausgeführt habe. Die serverseitige Rendering-Konfiguration wurde als Ziel markiert: 'node', während für die Client-Konfiguration keine angegeben wurde. Ich habe target: 'web' zur Client-Konfiguration hinzugefügt und der Fehler ist verschwunden.

Dieses Problem wurde automatisch als veraltet markiert, da es in letzter Zeit keine Aktivität hatte. Es wird geschlossen, wenn keine weitere Aktivität stattfindet. Vielen Dank für Ihre Beiträge.

Request befindet sich jetzt im Wartungsmodus und wird keine neuen Funktionen zusammenführen oder diesen Fehler beheben. Weitere Informationen finden Sie unter #3142.

Ich hatte das gleiche Problem, als ich versuchte, jQuery mit Nuxt (oder Node) zu verwenden. Das Problem war, dass ich jQuery und Bootstrap importierte und jsdom hinzufügte head von nuxt.config.js importiert habe. Eine andere Möglichkeit besteht darin, client mode in nuxt-config-Plugins festzulegen.