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