Request: Webpack

+1, também vendo isso

Saída:

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

Eu descobri. O problema é que o Webpack requer alguma configuração extra, ao contrário do browserify, devido à sua natureza mais simples. Veja meu exemplo de branch e diff para saber como fiz os testes rodarem com sucesso.

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

Meu plano é transformar isso em seu próprio teste de carma e enviar um PR para que outros possam usá-lo como exemplo. Além disso, pode revelar problemas futuros à medida que o desenvolvimento avança.

Sim, encontrei o mesmo, obrigado. Para qualquer pessoa que se deparar com isso, os documentos relevantes do webpack estão aqui: http://webpack.github.io/docs/configuration.html#node

@jaredmcdonald muito obrigado :)

@ pho3nixf1re seria ótimo se você enviar um PR sobre a solicitação de teste com webpack (teste adicional, não no lugar do navegador): +1:

Sim! Eu pretendo. Só o substituí no meu ramo como uma rápida prova de conceito. Vou cuidar disso neste fim de semana.

Adicionar o carregador json webpack infelizmente não corrigiu isso para mim.

O mesmo problema aqui.

A solução: instale json-loader para que o webpack possa lidar com arquivos * .json. Em seguida, adicione esse carregador e um novo objeto node ao seu webpack.config.js assim:

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

Adicionar o objeto node: { ... } evita o erro, mas não posso usar console no navegador. Existe uma maneira de contornar isso?

Eu acabei de descobrir:

node: {
    console: true
}

Isso foi uma grande ajuda para mim. Obrigado a todos acima.

Obrigado a todos, esbarrei nisso sozinho.

alguma sorte?

Estou usando o webpack & request e recebo o erro que todos vocês obtiveram aqui.
Tentei a solução com o elemento json-loader & node e ainda obtive os erros ...

Oi. Eu preciso de ajuda. Eu quero combinar node js mysql em meu app react. Mas recebi a mensagem de erro não é possível resolver o módulo 'net' quando executo o webpack.
Por favor, veja os códigos abaixo:

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
isso me salvou

+1
Salvou!

+1 Tive problemas com dotenv . A solução acima resolveu meu problema. Obrigado!

Adicionar o nó { fs: 'empty' } resolveu o problema de cannot resolve module 'fs' para mim, mas agora meu console tem um erro TypeError: fs.readFileSync is not a function . Estou tendo esse problema ao tentar usar dotev e webpack com o transpiler es6 babel. Importando webpack como import 'dotenv/config'; conforme descrito em https://github.com/motdotla/dotenv/issues/114

Embora a solução node {} acima tenha ajudado meu webpack.config.js, ela quebrou meu karma.conf.js, que depende dele, com o seguinte erro:

ReferenceError: o modo estrito proíbe a criação implícita da propriedade global '_crypto'

Alguém resolveu isso para trabalhar com dotenv ?

Estou tendo esse problema ao tentar usar node-soap , que depende de request em um aplicativo React que usa webpack. Eu tentei modificar minha configuração do webpack para conter;

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

Como sugerido acima, mas isso não resolveu o problema para mim. Ainda estou vendo esses erros;

Outros estão vendo os mesmos problemas;
https://gitter.im/vpulim/node-soap/archives/2016/04/13
https://gitter.im/vpulim/node-soap/archives/2016/01/11

E, pelo que sei, ninguém ainda tem uma solução. Não estou muito familiarizado com o webpack, mas se ninguém mais tiver uma solução ainda, posso tentar raspar aquele iaque neste fim de semana se tiver tempo para poder depurar isso ainda mais.

@kevhuang @sailingthoms @MrOutis ou @gaearon Algum de vocês já descobriu uma solução para isso? Ou você tem alguma ideia sobre o que mais precisa ser feito para que node-soap / request trabalhe com o React? (De preferência com create-react-app sem ter que ejetar).

@screendriver Onde você obteve as informações sobre o _ objeto do nó_? Não estou vendo isso na documentação.

@richburdon , @lucasbento Você tem um exemplo para ajudá-lo?

@garethderioth, desculpe, não consigo me lembrar. Tem sido muito tempo.

A propósito: enquanto isso, estou usando a API de busca HTML5 e este polyfill para minhas solicitações AJAX.

@garethderioth
@jaredmcdonald disse isso acima em https://github.com/request/request/issues/1529#issuecomment -90347445

Sim, encontrei o mesmo, obrigado. Para qualquer pessoa que se deparar com isso, os documentos relevantes do webpack estão aqui: http://webpack.github.io/docs/configuration.html#node

A propósito: enquanto isso, estou usando a API de busca HTML5 e este polyfill para minhas solicitações AJAX.

Criar usuários do aplicativo React: observe que o CRA já inclui um polyfill window.fetch portanto, você pode usá-lo com segurança em vez de request se satisfizer seu caso de uso.

@screendriver @josiahsprague Em vez disso:

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

Eu escrevi:

target: 'node',

Resolveu todos os meus problemas.

Editar: Você pode ler mais sobre isso aqui: https://webpack.github.io/docs/configuration.html#target

@gaearon E se a dependência for exigida por alguma terceira biblioteca?
Levantando um problema no repositório do create-react-app, como eu deveria ter feito desde o início: /

Minha captura de tela dos erros postados acima é irrelevante, o que provavelmente é óbvio para qualquer pessoa que ler esses erros. 😂 De qualquer forma, parece que ambas as soluções no comentário de @pedzed funcionariam para mim. Outra solução potencial é usar target: 'node-webkit ou outra opção semelhante, dependendo da sua situação.

No meu caso, acabei de mudar de node-soap para browser-soap , mas isso não funcionará para todos.

Eu tive um problema diferente que é semelhante a este, mas acabou sendo socketio / socket.io-client / issues / 933 para qualquer um que possa ter isso

+1
Obrigado!

Fiz uma pequena alteração usando o que @screendriver & @kilometers forneceram (obrigado!).

O Webpack reclamou se houvesse uma extensão vazia, no entanto, não acho que isso seria necessário para a maioria.

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

module.exports = {
entrada: './src/main.js',
saída: {
caminho: path.resolve (__ dirname, './dist'),
publicPath: '/ dist /',
nome do arquivo: 'build.js'
},
módulo: {
as regras: [
{
teste: /.json$/,
carregador: 'json-loader'
}
]
},
resolver: {
/ extensions: ['.webpack.js', '.web.js', '.js'] /
}
nó: {
console: verdadeiro,
fs: 'vazio',
net: 'vazio',
tls: 'vazio'
}
}
`` ``

A melhor solução fácil sem afetar o código agrupado:

Para pessoas que têm problemas com o livro de histórias e não querem substituir a configuração original do pacote da web do livro de histórias, você pode estendê-la criando .storybook/webpack.config.js e adicionar:

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

O uso deste erro de código acima foi resolvido, mas

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

fs.writeFile não está funcionando, forneça alguma solução.

@chandrasekarb tente definir fs como verdadeiro em vez de 'vazio'

target: 'node', funcionou para mim: loja_de_partamento:

Eu encontrei esse problema porque estava executando uma configuração dupla de cliente / servidor para renderização do lado do servidor. A configuração de renderização do lado do servidor foi marcada como destino: 'nó', enquanto a configuração do cliente não tinha um especificado. Eu adicionei target: 'web' à configuração do cliente e o erro foi embora.

Este problema foi marcado automaticamente como obsoleto porque não teve atividades recentes. Ele será fechado se nenhuma outra atividade ocorrer. Obrigado por suas contribuições.

O Request está agora em modo de manutenção e não combinará nenhum novo recurso ou tratará desse bug. Consulte # 3142 para obter mais informações.

Eu tive o mesmo problema ao tentar usar jQuery com Nuxt (ou Node), o problema era que eu estava importando jQuery e Bootstrap e adicionei jsdom para resolver, mas não funcionou. Resolvi importando bibliotecas diretamente na seção head de nuxt.config.js , outra maneira é definir client mode em plugins de configuração nuxt, espero que ajude alguém.