kristian nissen kristian nissen - 3 months ago 26
React JSX Question

Running gunjs with Reactjs and webpack throws Reference Error in console

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

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>