Using webpack with require module on client side Javascript in NodeJS application

Question

I'm trying to follow this tutorial for creating a redux form in my NodeJS application. I put the code in my client side Javascript file and tried to run my application but I got a "require is not defined error". I'm using webpack to compile my Javascript file, which this other post suggested, so I'm not sure how I would go about using the require module on the client side. Is there a step I'm missing in order to be able to use the require module?

These are the lines in my client.js file that are causing the error:

import React, { Component, PropTypes } from 'react'
import { reduxForm } from 'redux-form'

This is what I have in webpack.config.js file:

var webpack = require('webpack');
var path = require('path');
var nodeExternals = require('webpack-node-externals');
var React = require('react');
var redux = require('redux');


var BUILD_DIR = path.resolve(__dirname, 'public');
var APP_DIR = path.resolve(__dirname, 'app');

var config = {
    entry: APP_DIR + '/client.js',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    target: 'node',
    externals: [nodeExternals()],
    module: {
        loaders: [
            {
                test: /\.jsx?/,
                include: APP_DIR,
                loader: 'babel'
            }
        ]
    }
};


module.exports = config;

`target: 'node',` --- so, are you targeting `nodejs` or browsers? — zerkms, May 30 '16 at 23:06
could i target both? like use require in both browser and nodejs? For now using redux, I am trying to target browser — user3226932, May 30 '16 at 23:09
You don't have your babel configured at the moment, have you? What is its config then? — zerkms, May 30 '16 at 23:19
You mean my .babelrc? all i have is { "presets": ["es2015", "react"] } — user3226932, May 30 '16 at 23:20
you mean my bundle.js? here it is: https://jsfiddle.net/88ahpjtz/ — user3226932, May 30 '16 at 23:25
Now remove `externals: [nodeExternals()],` and check https://webpack.github.io/docs/library-and-externals.html — zerkms, May 30 '16 at 23:31
thanks, that fixed the error. Any ideas why the redux form isn't showing up on my page tho? — user3226932, May 30 '16 at 23:45
Well, there is not enough information to help diagnosing those. Like - how do you bootstrap react — zerkms, May 30 '16 at 23:50
All i did was transfer the code from http://redux-form.com/5.2.5/#/examples/simple?_k=cycbjp over to my client.js and included the scripts for react and react-dom in my index.html, i also have the react, react-dom, redux and redux-form node modules. Not getting any errors and just followed the tutorial so I'm confused as to why the form isn't showing up — user3226932, May 31 '16 at 00:07

Using webpack with require module on client side Javascript in NodeJS application

0 Answers0