Request: 웹팩

+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와 달리 몇 가지 추가 구성이 필요하다는 것입니다. 테스트를 성공적으로 실행한 방법은 예제 분기 및 diff를 참조하십시오.

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

내 계획은 그것을 자체 카르마 테스트로 바꾸고 다른 사람들이 예제로 사용할 수 있도록 PR을 제출하는 것입니다. 또한 개발이 진행됨에 따라 향후 문제를 발견할 수 있습니다.

예, 같은 것을 찾았습니다. 감사합니다. 이것을 우연히 발견한 다른 사람을 위해 관련 웹팩 문서는 다음과 같습니다. http://webpack.github.io/docs/configuration.html#node

@jaredmcdonald 감사합니다 :)

@pho3nixf1re webpack으로 테스트 요청에 대한 PR을 제출하면 좋을 것입니다(browserify 대신 추가 테스트) :+1:

네! 난 ~하려고한다. 빠른 개념 증명으로 내 지점에서만 교체했습니다. 이번 주말에 할게요.

불행히도 json webpack 로더를 추가해도 이 문제가 해결되지 않았습니다.

여기에서도 같은 문제입니다.

해결책: webpack이 *.json 파일을 처리할 수 있도록 json-loader 설치합니다. 그런 다음 해당 로더와 새 node 개체를 webpack.config.js 과 같이 추가합니다.

$ npm install --save-dev json-loader

웹팩.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 요소로 솔루션을 시도했지만 여전히 오류가 발생합니다...

안녕. 도움이 필요해 node js mysql을 반응 앱에 결합하고 싶습니다. 하지만 웹팩을 실행할 때 '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 변환기와 함께 dotev 및 webpack 를 사용하려고 하는 동안 이 문제가 발생했습니다. https://github.com/motdotla/dotenv/issues/114에 설명된 대로 웹팩을 import 'dotenv/config'; 로 가져오기

위의 노드 {} 솔루션이 내 webpack.config.js를 도왔지만 다음 오류와 함께 이에 종속된 내 ​​karma.conf.js가 손상되었습니다.

ReferenceError: 엄격한 모드는 전역 속성 '_crypto'의 암시적 생성을 금지합니다.

누구든지 dotenv 와 함께 작동하도록 이것을 해결했습니까?

webpack을 사용하는 React 앱에서 request 에 따라 달라지는 node-soap 을 사용하는 동안 이 문제가 발생합니다. 내 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 fetch API와 이 폴리필을 AJAX 요청에 사용하고 있습니다.

@garethderioth
@jaredmcdonald 는 위의 https://github.com/request/request/issues/1529#issuecomment -90347445에서 말했습니다.

예, 같은 것을 찾았습니다. 감사합니다. 이것을 우연히 발견한 다른 사람을 위해 관련 웹팩 문서는 다음과 같습니다. http://webpack.github.io/docs/configuration.html#node

그건 그렇고: 그 동안 나는 HTML5 fetch API와 이 폴리필을 AJAX 요청에 사용하고 있습니다.

React 앱 사용자 생성: CRA에는 이미 window.fetch 폴리필이 포함되어 있으므로 사용 사례를 충족하는 경우 request 대신 안전하게 사용할 수 있습니다.

@screendriver @josiahsprague 대신:

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

나는 썼다:

target: 'node',

그것은 내 모든 문제를 해결했습니다.

편집: https://webpack.github.io/docs/configuration.html#target 에서 자세한 내용을 읽을 수 있습니다.

@gaearon 제3의 라이브러리에 의존성이 필요하다면?
처음부터 해야 하는 것처럼 create-react-app의 저장소에서 문제 제기 :/

위에 게시된 오류 스크린샷은 관련이 없으며 해당 오류를 읽는 사람이라면 누구나 알 수 있습니다. 😂 어쨌든, @pedzed 의 댓글에 있는 두 가지 솔루션이 모두 저에게 효과가 있는 것 같습니다. 또 다른 잠재적인 솔루션은 상황에 따라 target: 'node-webkit 또는 다른 유사한 옵션 을 사용하는 것입니다.

제 경우에는 node-soap 에서 browser-soap 로 전환했지만 모든 사람에게 적용되는 것은 아닙니다.

나는 이것과 비슷한 다른 문제가 있었지만 그것을 경험할 수있는 사람을 위해 socketio/socket.io-client/issues/933이되었습니다.

+1
감사 해요!

@screendriver & @kilometers가 제공한 것을 사용하여 약간의 변경을 했습니다(감사합니다!).

Webpack은 빈 확장자가 있으면 불평했지만 대부분의 경우 이것이 필요하지 않다고 생각합니다.

````
var 경로 = 필요('경로')
var 요청 = 요구('요청')
var 웹팩 = 필요('웹팩')

module.exports = {
항목: './src/main.js',
출력: {
경로: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
파일 이름: 'build.js'
},
모듈: {
규칙: [
{
테스트: /.json$/,
로더: 'json-로더'
}
]
},
해결하다: {
/ 확장자: ['.webpack.js', '.web.js', '.js'] /
}
노드: {
콘솔: 사실,
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:

이 문제가 발생했는데 서버 측 렌더링을 위해 이중 클라이언트/서버 구성을 실행하고 있었기 때문입니다. 서버 측 렌더링 구성은 대상: '노드'로 표시되었지만 클라이언트 구성에는 지정되지 않았습니다. 클라이언트 구성에 target: 'web'을 추가했는데 오류가 사라졌습니다.

이 문제는 최근 활동이 없었기 때문에 자동으로 오래된 것으로 표시되었습니다. 더 이상의 활동이 없으면 폐쇄됩니다. 귀하의 기여에 감사드립니다.

요청이 현재 유지 관리 모드에 있으며 새로운 기능을 병합하거나 이 버그를 해결하지 않습니다. 자세한 내용은 #3142를 참조하세요.

Nuxt (또는 노드)와 함께 jQuery 를 사용하려고 하는 것과 동일한 문제가 있었습니다. 문제는 jQuery 및 Bootstrap 오고 jsdom 추가했다는 것입니다. nuxt.config.js head 섹션에서 직접 라이브러리를 가져오는 문제를 해결했습니다. 또 다른 방법은 nuxt 구성 플러그인에서 client mode 를 설정하는 것입니다. 누군가에게 도움이 되기를 바랍니다.