Request: Webpack

+1、これも見て

出力：

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

私はそれを考え出した。 問題は、Webpackはより基本的な性質であるため、browserifyとは異なりいくつかの追加の構成を必要とすることです。 テストを正常に実行する方法については、ブランチと差分の例を参照してください。

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

私の計画は、それを独自のカルマテストに変えてPRを提出し、他の人がそれを例として使用できるようにすることです。 また、開発が進むにつれて将来の問題が明らかになる可能性があります。

ええ、同じことを見つけました、ありがとう。 これに遭遇した他の人のために、関連するwebpackドキュメントはここにあります： http ：//webpack.github.io/docs/configuration.html#node

@jaredmcdonaldどうもありがとう:)

@ pho3nixf1re webpackを使用したテストリクエストに関するPRを送信するとよいでしょう（追加のテスト、browserifyの代わりではありません）：+ 1：

はい！ するつもりです。 概念実証として、ブランチで交換しただけです。 私は今週末に乗ります。

残念ながら、jsonwebpackローダーを追加してもこれは修正されませんでした。

ここで同じ問題。

解決策： json-loaderインストールして、webpackが* .jsonファイルを処理できるようにします。 次に、そのローダーと新しいnodeオブジェクトを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'
  }
};

node: { ... }オブジェクトを追加するとエラーは回避されますが、ブラウザでconsoleを使用できなくなります。 これを回避する方法はありますか？

私はちょうどそれを理解しました：

node: {
    console: true
}

これは私にとって大きな助けになりました。 上記のすべてに感謝します。

みんなありがとう、これにぶつかった。

運が良ければ？

私はwebpack＆requestを使用していますが、ここでエラーが発生しました。
json-loader＆node要素を使用してソリューションを試しましたが、それでもエラーが発生します...

こんにちは。 私は助けが必要です。 ノードjsmysqlをreactアプリに結合したいと思います。 しかし、webpackを実行すると、モジュール「net」を解決できないというエラーメッセージが表示されます。
以下のコードを参照してください。

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
これは私を救った

+1
保存しました！

+1自分でdotenv問題がありました。 上記の解決策は私の問題を解決しました。 ありがとう！

ノード{ fs: 'empty' }追加すると、 cannot resolve module 'fs'問題は解決しましたが、コンソールでエラーTypeError: fs.readFileSync is not a functionます。 es6 babel transpilerでdotevとwebpackを使用しようとしているときに、この問題が発生しています。 https://github.com/motdotla/dotenv/issues/114で説明されているように、webpackをimport 'dotenv/config';としてインポートします

上記のノード{}ソリューションは私のwebpack.config.jsを助けましたが、それに依存する私のkarma.conf.jsを壊し、次のエラーが発生しました。

ReferenceError：厳密モードでは、グローバルプロパティ '_crypto'の暗黙的な作成が禁止されています

dotenv動作するようにこれを解決した人

node-soapを使用しようとすると、この問題が発生します。これは、webpackを使用するReactアプリのrequestに依存します。 webpackの設定を変更して含まれるようにしました。

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

上で提案したように、しかしそれは私にとって問題を解決しませんでした。 私はまだこれらのエラーを見ています。

他の人も同じ問題を見ています。
https://gitter.im/vpulim/node-soap/archives/2016/04/13
https://gitter.im/vpulim/node-soap/archives/2016/01/11

そして、私が知る限り、まだ誰も解決策を持っていません。 私はwebpackにあまり詳しくありませんが、まだ解決策がない場合は、時間があれば、今週末にそのヤクを剃って、さらにデバッグできるようにするかもしれません。

@kevhuang @sailingthoms @MrOutisまたは@gaearonこれに対する解決策を見つけた人はいますか？ または、 node-soap / requestをReactで動作させるために他に何をする必要があるかについて何かアイデアはありますか？ （できれば、イジェクトせずにcreate-react-appを使用します）。

@screendriver _nodeオブジェクト_に関する情報はどこで入手しましたか？ ドキュメントに表示されていません。

@ richburdon 、 @ lucasbentoあなたを助けるための例がありますか？

@garethderiothすみません

ちなみに、その間、私はHTML5フェッチAPIとこのポリフィルをAJAXリクエストに使用しています。

@garethderioth
@jaredmcdonaldは、上記のhttps://github.com/request/request/issues/1529#issuecomment-90347445でそれを述べてい

ええ、同じことを見つけました、ありがとう。 これに遭遇した他の人のために、関連するwebpackドキュメントはここにあります： http ：//webpack.github.io/docs/configuration.html#node

ちなみに、その間、私はHTML5フェッチAPIとこのポリフィルをAJAXリクエストに使用しています。

React Appユーザーの作成：CRAにはすでにwindow.fetchポリフィルが含まれているため、ユースケースを満たす場合はrequest代わりに安全に使用できます。

@screendriver @josiahspragueこれの代わりに：

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

私が書いた：

target: 'node',

それは私のすべての問題を解決しました。

編集：ここでそれについてもっと読むことができます： https ：

@gaearon依存関係が3番目のライブラリで必要な場合はどうなりますか？
私が最初から持っているはずのように、create-react-appのリポジトリで問題を提起します：/

上記に投稿されたエラーのスクリーンショットは無関係です。これは、これらのエラーを読んだ人にはおそらく明らかです。 😂とにかく、 @ pedzedのコメントの両方の解決策が私のために働くようです。 別の考えられる解決策は、状況に応じてtarget: 'node-webkitまたは別の同様のオプションを使用することです。

私の場合、 node-soapからbrowser-soapに切り替えただけですが、それがすべての人に役立つわけではありません。

私はこれに似た別の問題を抱えていましたが、それを経験する可能性のある人にとっては、socketio / socket.io-client / issues / 933になってしまいました

+1
ありがとう！

@screendriverと@kilometersが提供するものを使用して小さな変更を

Webpackは空の拡張機能があると文句を言いましたが、ほとんどの場合、これは必要ないと思います。

`` ``
var path = require（ 'path'）
var request = require（ 'request'）
var webpack = require（ 'webpack'）

module.exports = {
エントリ： './ src / main.js'、
出力：{
パス：path.resolve（__ dirname、 '。/ dist'）、
publicPath： '/ dist /'、
ファイル名： 'build.js'
}、
モジュール：{
ルール：[
{{
テスト：/。json $ /、
ローダー： 'json-loader'
}
]
}、
解決： {
/拡張子：['。webpack.js'、 '。web.js'、 '。js'] /
}
ノード：{
コンソール：true、
fs： '空'、
ネット： '空'、
tls： '空'
}
}
`` ``

バンドルされたコードに影響を与えない最も簡単なソリューション：

ストーリーブックに問題があり、.storybook/webpack.config.jsを作成して、以下を追加することで拡張できます。

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

上記のコードを使用すると、エラーは解決されましたが

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

fs.writeFileが機能していません。解決策を教えてください。

@chandrasekarbは、fsを「空」ではなくtrueに設定してみてください

target: 'node',は私のために働いた：department_store：

この問題が発生しました。これは、サーバー側のレンダリング用にデュアルクライアント/サーバー構成を実行していたためです。 サーバー側のレンダリング構成はターゲットとしてマークされました： 'ノード'、クライアント構成には指定されていません。 ターゲット： 'web'をクライアント構成に追加すると、エラーはなくなりました。

この問題は、最近のアクティビティがないため、自動的に古いものとしてマークされています。 それ以上のアクティビティが発生しない場合は閉じられます。 貢献していただきありがとうございます。

リクエストは現在メンテナンスモードになっており、新機能をマージしたり、このバグに対処したりすることはありません。 詳細については、＃3142を参照してください。

Nuxt （またはノード）でjQueryを使用しようとしても同じ問題が発生しました。問題は、 jQueryとBootstrapをインポートし、 jsdomを追加したことです。 nuxt.config.js headセクションでライブラリを直接インポートすることを解決しました。別の方法は、nuxt構成プラグインでclient modeを設定することです。誰かに役立つことを願っています。