Search code examples
node.jsreactjsnpmrequire

Import "require" library into ReactJS project


I am learning ReactJS language and now I need to add request library into my project. So I downloaded library from github.com/request/request via npm install command and now I need to import this library into my project.

But when I will use:

import Request from 'request';

or

var request = require('request');

then I am not able to build my application (due some errors). I am not sure, if I can import 3rd party module (or how to call) into ReactJS by this way.

Can you provide me a little help please?

==== error included ====

In my .jsx file I have got:

import React from 'react';
var request = require('request');
import {Table, TableBody, TableFooter, TableHeader, TableHeaderColumn, TableRow, TableRowColumn} from 'material-ui/Table';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import FloatingActionButton from 'material-ui/FloatingActionButton';
import DialogWindow from '../components/DialogWindow.jsx'

import ContentAdd from 'material-ui/svg-icons/content/add';
import PlayArrow from 'material-ui/svg-icons/av/play-arrow';
import PlaylistAdd from 'material-ui/svg-icons/av/playlist-add';

As you can see, request is imported in 2nd line. When I will try to build my app, I will get this error:

ERROR in ./~/forever-agent/index.js
Module not found: Error: Can't resolve 'net' in 'folder with project\node_modules\forever-agent'
 @ ./~/forever-agent/index.js 6:10-24
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./src/containers/Album.jsx
 @ ./src/routes.js
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./~/tough-cookie/lib/cookie.js
Module not found: Error: Can't resolve 'net' in 'folder with project\node_modules\tough-cookie\lib'
 @ ./~/tough-cookie/lib/cookie.js 32:10-24
 @ ./~/request/lib/cookies.js
 @ ./~/request/index.js
 @ ./src/containers/Album.jsx
 @ ./src/routes.js
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./~/tunnel-agent/index.js
Module not found: Error: Can't resolve 'net' in 'folder with project\node_modules\tunnel-agent'
 @ ./~/tunnel-agent/index.js 3:10-24
 @ ./~/request/lib/tunnel.js
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./src/containers/Album.jsx
 @ ./src/routes.js
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./~/forever-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'folder with project\node_modules\forever-agent'
 @ ./~/forever-agent/index.js 7:10-24
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./src/containers/Album.jsx
 @ ./src/routes.js
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./~/tunnel-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'folder with project\node_modules\tunnel-agent'
 @ ./~/tunnel-agent/index.js 4:10-24
 @ ./~/request/lib/tunnel.js
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./src/containers/Album.jsx
 @ ./src/routes.js
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

ERROR in ./~/request/lib/har.js
Module not found: Error: Can't resolve 'fs' in 'folder with project\node_modules\request\lib'
 @ ./~/request/lib/har.js 3:9-22
 @ ./~/request/request.js
 @ ./~/request/index.js
 @ ./src/containers/Album.jsx
 @ ./src/routes.js
 @ ./src/index.jsx
 @ multi (webpack)-dev-server/client?http://127.0.0.1:8888 webpack/hot/dev-server react-hot-loader/patch ./src/index.jsx

Solution

  • Looks like a known issue with the library. A fix is described at https://github.com/request/request/issues/1529 (adding a node configuration object to your Webpack configuration) to get the library working in the browser.

    However, you might want to consider an alternative library such as isomorphic-fetch or axios.