Superagent with Webpack: "require is not defined"

Question

I am working on a React/Redux project, and have been struggling to get superagent working.

After following issues in the superagent issue and adding some workarounds to my webpack.config file, I was able to build my bundle with no errors. Unfortunately, I now get an error in the browser:

require is not defined

pointing to the line: module.exports = require("tty");

I believe tty is a core node module. Also, the require for tty is made from my require('superagent') call on the client.

Here is my webpack config:

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

var config = {
  devtool: 'cheap-module-eval-source-map',
  target: 'node',
  entry: [
    'webpack-hot-middleware/client',
    './client/index'
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/static/'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new webpack.DefinePlugin(
      {
        'process.env.NODE_ENV': '"development"',
        'global.GENTLY': false
      }
    ),
  ],
  module: {
    loaders: [
      { test: /\.json$/, loaders: ['json'], },
      { test: /\.js$/, exlude: /node_modules/, loaders: ['babel', 'eslint'], },
    ]
  },
  // build breaks on eslint without this workaround
  // https://github.com/MoOx/eslint-loader/issues/23
  eslint: {
    emitWarning: true
  },
  node: {
    __dirname: true,
  }
}

module.exports = config;

Anyone know what my issue might be? I've searched through webpack and superagent issues, and this seems to be the most relevant: https://github.com/facebook/react-native/issues/10

Answer 1

You can try what they suggest here -- I see you've added what they suggested to your webpack config, but maybe try their first suggestion of using their browser version instead require('superagent/lib/client).

I don't use superagent in my project, so I'm not sure why it isn't requiring properly. I have had issues with other libraries behaving in a similar manner however. I wind up using a browser version and then use webpack to alias it (so I don't have to remember to give the full path to the built version every time I require it in my project).

In your webpack config you can alias by doing something like this:

resolve: {
  alias: {
    'superagent': 'path/to/node_modules/superagent/lib/client'
  }
}

Then in your project, you can require('superagent') as usual and webpack will resolve it behind the scenes properly. Hope this helps!

Answer 2

Adding this (taken from another answer here) to my webpack config did the trick for me:

plugins.push(new webpack.DefinePlugin({ "global.GENTLY": false }));