WebPack Issue with Redis

Question

On trying to retrieve from redis from a Nodejs module different from the one that inserts, I get the "module not found error":

ERROR in ./~/redis/index.js
Module not found: Error: Cannot resolve module 'net' in E:\Code-     
Asst\node_modules\redis
 @ ./~/redis/index.js 3:10-24

ERROR in ./~/redis/index.js
Module not found: Error: Cannot resolve module 'tls' in E:\Code-  
Asst\node_modules\redis
@ ./~/redis/index.js 4:10-24

ERROR in ./~/redis/index.js
Module not found: Error: Cannot resolve module 'net' in E:\Code-  
Asst\node_modules\redis
@ ./~/redis/index.js 3:10-24

ERROR in ./~/redis/index.js
Module not found: Error: Cannot resolve module 'tls' in E:\Code-  
Asst\node_modules\redis
 @ ./~/redis/index.js 4:10-24

ERROR in ./~/redis-parser/lib/hiredis.js
Module not found: Error: Cannot resolve module 'hiredis' in E:\Code-  
Asst\node_modules\redis-parser\lib
@ ./~/redis-parser/lib/hiredis.js 3:14-32

I added this to my webpack config.

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

Now only this error is reported.

ERROR in ./~/redis-parser/lib/hiredis.js
Module not found: Error: Cannot resolve module 'hiredis' in E:\Code-  
Asst\node_modules\redis-parser\lib
@ ./~/redis-parser/lib/hiredis.js 3:14-32

I followed the advice on http://jlongster.com/Backend-Apps-with-Webpack--Part-I and now my webpack.config.js is this.

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var webpack = require('webpack');
var path = require('path');
var fs = require('fs');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
return ['.bin'].indexOf(x) === -1;
})
.forEach(function(mod) {
  nodeModules[mod] = 'commonjs ' + mod;
});

module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: {
    app: [
        'webpack/hot/dev-server',
        'webpack-hot-middleware/client?reload=true',
        path.join(__dirname, 'webclient', 'clientapp.jsx')
    ]
},
target: 'node',
output: {
    path: path.join(__dirname, 'webclient', 'dist'),
    publicPath: '/dist/',
    filename: 'bundle.js'
},
externals: nodeModules,
module: {
    loaders: [
        {
            test: /\.jsx$/,
            loaders: ['babel?presets[]=react,presets[]=es2015,presets[]=stage-0']
        }, {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }, {
            test: /\.(jpe?g|png|gif|svg)$/i,
            loaders: ['file-loader']
        }, {

            test: /\.json$/,
            loaders: ['json-loader']

        }
        // other loader
    ]
},
resolve: {
    extensions: ['', '.js', '.jsx', '/index.js', '/index.jsx']
},
node: {
console: 'empty',
fs: 'empty',
net: 'empty',
tls: 'empty',  
},
plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoErrorsPlugin(),
    new HtmlWebpackPlugin({template:  
    path.resolve('./webclient/index.html')})
 ]
};

My build and server starts without error, but on browser, I get this:

Uncaught ReferenceError: require is not defined

Any help will be highly appreciated - stuck and struggling for the last couple of days

My webpack dependencies in package.json are:

"webpack": "^1.13.2",
"webpack-dev-middleware": "^1.8.4",
"webpack-dev-server": "^1.16.1",
"webpack-hot-middleware": "^2.13.0"

Answer 1

The problem is that you're trying to run a back-end app (made for Node.JS) in the browser. The target: 'node' tells webpack not to touch any built-in node modules (such as fs or net, basically all the errors you got) so they remain regular requires which doesn't exist in the browser and you get the require is not defined error.

From your webpack config it looks like you're building a front-end app but you somehow want to use redis. That is simply not possible. You can't have modules that require built-in node modules in the browser. And if you think about it, it makes perfect sense, for instance you don't have access to the file system from the client.

What you need to do is build one front-end and one back-end app and then communicate the data you want to be in redis, for example with a REST API.