Running gunjs with Reactjs and webpack throws Reference Error in console

Question

I am trying to install gun.js and run it inside a Reactjs webpack bundled app

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

module.exports = {
    devtool: 'source-map',
    target: 'node',
    node: {
        fs: 'empty'
    },
    entry: {
        workboard: './src/workboard/main.js'
    },
    output: {
        path: __dirname, filename: '/public/[name]/js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react', 'stage-2', 'stage-1']
                }
            }
        ],
        noParse: [/aws-sdk/]
    },
    plugins: [
        new webpack.DefinePlugin({ "global.GENTLY": false })
    ]
};

package.json looks like this

{
  "name": "workbench",
  "version": "1.0.0",
  "description": "My local workbench",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cd public && serve"
  },
  "author": "kn@unisport.dk",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.7.7",
    "babel-preset-stage-1": "^6.5.0",
    "babel-preset-stage-2": "^6.5.0",
    "fetch": "^1.0.1",
    "react": "^0.14.8",
    "react-dom": "^0.14.8",
    "react-router": "^2.3.0"
  },
  "devDependencies": {
    "babel-core": "^6.5.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "bufferutil": "^1.2.1",
    "gun": "^0.3.992",
    "loader-utils": "^0.2.15",
    "url": "^0.11.0",
    "utf-8-validate": "^1.2.1",
    "webpack": "^2.1.0-beta.5"
  }
}

js test code in main.js looks like this

/**
 * Main.js
 */
'use strict';

/**
 * Setup Gun
 * TODO: add peers
 */
var Gun = require('gun');
var gun = Gun();

var React = require('react');
var ReactDom = require('react-dom');

var App = React.createClass({
    render() {
        return <div>Hello</div>
    }
});

var ROOT = document.getElementById('appmount');

ReactDom.render(
    <App />,
    ROOT
);

but when I load index.html that includes bundle.js I get this error in the console

Uncaught ReferenceError: require is not defined

module.exports = require("url");


/*****************
 ** WEBPACK FOOTER
 ** external "url"
 ** module id = 21
 ** module chunks = 0
 **/

what is it that I'm missing?

Update Changing node to 'web' as suggested, but this gives me

ERROR in ./~/ws/lib/WebSocketServer.js
Module not found: Error: Can't resolve 'tls' in '/Users/kn/Documents/workbench/node_modules/ws/lib'
 @ ./~/ws/lib/WebSocketServer.js 15:10-24

ERROR in ./~/diffie-hellman/lib/primes.json
Module parse failed: /Users/kn/Documents/workbench/node_modules/diffie-hellman/lib/primes.json Unexpected token (2:11)
You may need an appropriate loader to handle this file type.
| {
|     "modp1": {
|         "gen": "02",
|         "prime": "ffffffffffffffffc90fdaa22168c234c4c6628b80dc1cd129024e088a67cc74020bbea63b139b22514a08798e3404ddef9519b3cd3a431b302b0a6df25f14374fe1356d6d51c245e485b576625e7ec6f44c42e9a63a3620ffffffffffffffff"
 @ ./~/diffie-hellman/browser.js 2:13-41

ERROR in ./~/elliptic/package.json
Module parse failed: /Users/kn/Documents/workbench/node_modules/elliptic/package.json Unexpected token (2:9)
You may need an appropriate loader to handle this file type.
| {
|   "_args": [
|     [
|       {
 @ ./~/elliptic/lib/elliptic.js 5:19-45

ERROR in ./~/parse-asn1/aesid.json
Module parse failed: /Users/kn/Documents/workbench/node_modules/parse-asn1/aesid.json Unexpected token (1:25)
You may need an appropriate loader to handle this file type.
| {"2.16.840.1.101.3.4.1.1": "aes-128-ecb",
| "2.16.840.1.101.3.4.1.2": "aes-128-cbc",
| "2.16.840.1.101.3.4.1.3": "aes-128-ofb",
 @ ./~/parse-asn1/index.js 2:12-35

Installing tls results in this error

    ERROR in ./~/diffie-hellman/lib/primes.json
    Module parse failed: /Users/kn/Documents/workbench/node_modules/diffie-hellman/lib/primes.json Unexpected token (2:11)
    You may need an appropriate loader to handle this file type.
    | {
    |     "modp1": {
    |         "gen": "02",
    |         "prime": "ffffffffffffffffc90fdaa22168c234c4c6628b80dc1cd129024e088a67cc74020bbea63b139b22514a08798e3404ddef9519b3cd3a431b302b0a6df25f14374fe1356d6d51c245e485b576625e7ec6f44c42e9a63a3620ffffffffffffffff"
     @ ./~/diffie-hellman/browser.js 2:13-41

    ERROR in ./~/elliptic/package.json
    Module parse failed: /Users/kn/Documents/workbench/node_modules/elliptic/package.json Unexpected token (2:9)
    You may need an appropriate loader to handle this file type.
    | {
    |   "_args": [
    |     [
    |       {
     @ ./~/elliptic/lib/elliptic.js 5:19-45

    ERROR in ./~/parse-asn1/aesid.json
    Module parse failed: /Users/kn/Documents/workbench/node_modules/parse-asn1/aesid.json Unexpected token (1:25)
    You may need an appropriate loader to handle this file type.
    | {"2.16.840.1.101.3.4.1.1": "aes-128-ecb",
    | "2.16.840.1.101.3.4.1.2": "aes-128-cbc",
    | "2.16.840.1.101.3.4.1.3": "aes-128-ofb",
     @ ./~/parse-asn1/index.js 2:12-35

I tried to install primes, but Im getting

ERROR in ./~/diffie-hellman/lib/primes.json
Module parse failed: /Users/kn/Documents/workbench/node_modules/diffie-hellman/lib/primes.json Unexpected token (2:11)
You may need an appropriate loader to handle this file type.
| {
|     "modp1": {
|         "gen": "02",
|         "prime": "ffffffffffffffffc90fdaa22168c234c4c6628b80dc1cd129024e088a67cc74020bbea63b139b22514a08798e3404ddef9519b3cd3a431b302b0a6df25f14374fe1356d6d51c245e485b576625e7ec6f44c42e9a63a3620ffffffffffffffff"
 @ ./~/diffie-hellman/browser.js 2:13-41

ERROR in ./~/elliptic/package.json
Module parse failed: /Users/kn/Documents/workbench/node_modules/elliptic/package.json Unexpected token (2:9)
You may need an appropriate loader to handle this file type.
| {
|   "_args": [
|     [
|       {
 @ ./~/elliptic/lib/elliptic.js 5:19-45

ERROR in ./~/parse-asn1/aesid.json
Module parse failed: /Users/kn/Documents/workbench/node_modules/parse-asn1/aesid.json Unexpected token (1:25)
You may need an appropriate loader to handle this file type.
| {"2.16.840.1.101.3.4.1.1": "aes-128-ecb",
| "2.16.840.1.101.3.4.1.2": "aes-128-cbc",
| "2.16.840.1.101.3.4.1.3": "aes-128-ofb",
 @ ./~/parse-asn1/index.js 2:12-35

Updating once again after changing the code inside main.js Suggestion from @marknadal did the trick

main.js

/**
 * Main.js
 */
'use strict';

/**
 * Setup Gun
 * TODO: add peers
 */
var Gun = require('gun/gun');
var peers = [
    'http://localhost:8080/gun'
];
var gun = Gun(peers);

var React = require('react');
var ReactDom = require('react-dom');

var App = React.createClass({
    render() {
        return <div>Hello</div>
    }
});

var ROOT = document.getElementById('appmount');

ReactDom.render(
    <App />,
    ROOT
);

And webpack.config

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

module.exports = {
    devtool: 'source-map',
    target: 'web',
    node: {
        fs: 'empty'
    },
    entry: {
        workboard: './src/workboard/main.js'
    },
    output: {
        path: __dirname, filename: '/public/[name]/js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015', 'react', 'stage-2', 'stage-1']
                }
            },
            {
                test: /\.json$/,
                loader: 'json',
                include: [
                        /node_modules/
                    ]
            }
        ],
        noParse: [/aws-sdk/]
    },
    plugins: [
        new webpack.DefinePlugin({ "global.GENTLY": false })
    ]
};

and package.json - it does include a lot more than what's needed for this project, disregard that if you want to attempt to get this running on your own

{
  "name": "workbench",
  "version": "1.0.0",
  "description": "My local workbench",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cd public && serve"
  },
  "author": "kn@unisport.dk",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.7.7",
    "babel-preset-stage-1": "^6.5.0",
    "babel-preset-stage-2": "^6.5.0",
    "express": "^4.14.0",
    "fetch": "^1.0.1",
    "react": "^0.14.8",
    "react-dom": "^0.14.8",
    "react-router": "^2.3.0"
  },
  "devDependencies": {
    "babel-core": "^6.5.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0",
    "bufferutil": "^1.2.1",
    "gun": "^0.3.992",
    "json-loader": "^0.5.4",
    "loader-utils": "^0.2.15",
    "prime": "^0.5.0",
    "primes": "0.0.1",
    "tls": "0.0.1",
    "url": "^0.11.0",
    "utf-8-validate": "^1.2.1",
    "webpack": "^2.1.0-beta.5"
  }
}

Now when I use webpack --watch no warnings or errors are shown. Going to public/workboad and running serve, I see the react application running with no errors

Answer 1

Did @riscarrott 's answer work? I'm the author of gun, and it looks like 1 of the errors is gun related. However I am not a webpack expert so I am unsure what is the problem.

I do know that require('gun') actually loads ./index.js that in turn loads server-side specific logic (which won't work in the browser). If riscarrott 's answer does not work, try replacing require('gun') with require('gun/gun') and see if it works. If this is the case, please file a bug report on https://github.com/amark/gun so we can get this fixed for future people.

If this did not help, several other people on the team and the community use webpack and gun a lot. I'll see if I can get them to reply here.

EDIT: It looks like the de facto way of other projects, like jquery/angular/etc. (https://www.npmjs.com/package/angular) is to have you include them with a < script > tag. Therefore we also recommend you do this as well, as it avoids all these build problems.

<script src="/node_modules/gun/gun.js"></script>