gunjs

gunjs

关注
发信
关注(28)粉丝(399)

使用 Reactjs 和 webpack 运行 gunjs 在控制台中引发参考错误

本文介绍了使用 Reactjs 和 webpack 运行 gunjs 在控制台中引发参考错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试安装 gun.js 并在 Reactjs webpack 捆绑应用程序中运行它

var path = require('path'),webpack = require('webpack');模块.出口 = {开发工具:'源地图'，目标:'节点'，节点:{fs: '空'},入口: {工作板:'./src/workboard/main.js'},输出: {路径:__dirname，文件名:'/public/[name]/js/bundle.js'},模块: {装载机: [{测试:/.js?$/,loader: 'babel-loader',排除:/node_modules/，询问: {预设:['es2015', 'react', 'stage-2', 'stage-1']}}],noParse: [/aws-sdk/]},插件: [new webpack.DefinePlugin({ "global.GENTLY": false })]};

package.json 看起来像这样

{"name": "工作台","版本": "1.0.0","description": "我的本地工作台","main": "index.js",脚本":{"test": "echo \"Error: no test specified\" && exit 1","start": "cd public && serve"},"作者": "[email protected]","license": "ISC",依赖关系":{"babel-core": "^6.7.7","babel-preset-stage-1": "^6.5.0","babel-preset-stage-2": "^6.5.0","获取": "^1.0.1",反应":^0.14.8"，"react-dom": "^0.14.8",反应路由器":^ 2.3.0"},开发依赖":{"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","枪": "^0.3.992","loader-utils": "^0.2.15","url": "^0.11.0","utf-8-validate": "^1.2.1","webpack": "^2.1.0-beta.5"}}

main.js 中的 js 测试代码是这样的

/*** Main.js*/'使用严格';/*** 设置枪* TODO:添加同行*/var Gun = require('gun');var gun = Gun();var React = require('react');var ReactDom = require('react-dom');var App = React.createClass({使成为() {return 
你好
}});var ROOT = document.getElementById('appmount');ReactDom.render(<应用程序/>,根);

但是当我加载包含 bundle.js 的 index.html 时，我在控制台中收到此错误

Uncaught ReferenceError: require is not definedmodule.exports = require("url");/******************* 网络包页脚** 外部网址"** 模块 ID = 21** 模块块 = 0**/

我错过了什么?

更新按照建议将节点更改为web"，但这给了我

 ./~/ws/lib/WebSocketServer.js 中的错误找不到模块:错误:无法解析/Users/kn/Documents/workbench/node_modules/ws/lib"中的tls"@ ./~/ws/lib/WebSocketServer.js 15:10-24./~/diffie-hellman/lib/primes.json 中的错误模块解析失败:/Users/kn/Documents/workbench/node_modules/diffie-hellman/lib/primes.json 意外令牌 (2:11)您可能需要一个合适的加载器来处理这种文件类型.|{|modp1":{|"gen": "02",|地王": ffffffffffffffffc90fdaa22168c234c4c6628b80dc1cd129024e088a67cc74020bbea63b139b22514a08798e3404ddef9519b3cd3a431b302b0a6df25f14374fe1356d6d51c245e485b576625e7ec6f44c42e9a63a3620ffffffffffffffff"@ ./~/diffie-hellman/browser.js 2:13-41./~/elliptic/package.json 中的错误模块解析失败:/Users/kn/Documents/workbench/node_modules/elliptic/package.json Unexpected token (2:9)您可能需要一个合适的加载器来处理这种文件类型.|{|_args":[|[|{@ ./~/elliptic/lib/elliptic.js 5:19-45./~/parse-asn1/aesid.json 中的错误模块解析失败:/Users/kn/Documents/workbench/node_modules/parse-asn1/aesid.json Unexpected token (1:25)您可能需要一个合适的加载器来处理这种文件类型.|{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

安装 tls 导致此错误

 ./~/diffie-hellman/lib/primes.json 中的错误模块解析失败:/Users/kn/Documents/workbench/node_modules/diffie-hellman/lib/primes.json 意外令牌 (2:11)您可能需要一个合适的加载器来处理这种文件类型.|{|modp1":{|"gen": "02",|地王": ffffffffffffffffc90fdaa22168c234c4c6628b80dc1cd129024e088a67cc74020bbea63b139b22514a08798e3404ddef9519b3cd3a431b302b0a6df25f14374fe1356d6d51c245e485b576625e7ec6f44c42e9a63a3620ffffffffffffffff"@ ./~/diffie-hellman/browser.js 2:13-41./~/elliptic/package.json 中的错误模块解析失败:/Users/kn/Documents/workbench/node_modules/elliptic/package.json Unexpected token (2:9)您可能需要一个合适的加载器来处理这种文件类型.|{|_args":[|[|{@ ./~/elliptic/lib/elliptic.js 5:19-45./~/parse-asn1/aesid.json 中的错误模块解析失败:/Users/kn/Documents/workbench/node_modules/parse-asn1/aesid.json Unexpected token (1:25)您可能需要一个合适的加载器来处理这种文件类型.|{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我试图安装素数，但我得到了./~/diffie-hellman/lib/primes.json 中的错误模块解析失败:/Users/kn/Documents/workbench/node_modules/diffie-hellman/lib/primes.json 意外令牌 (2:11)您可能需要一个合适的加载器来处理这种文件类型.|{|modp1":{|"gen": "02",|地王": ffffffffffffffffc90fdaa22168c234c4c6628b80dc1cd129024e088a67cc74020bbea63b139b22514a08798e3404ddef9519b3cd3a431b302b0a6df25f14374fe1356d6d51c245e485b576625e7ec6f44c42e9a63a3620ffffffffffffffff"@ ./~/diffie-hellman/browser.js 2:13-41./~/elliptic/package.json 中的错误模块解析失败:/Users/kn/Documents/workbench/node_modules/elliptic/package.json Unexpected token (2:9)您可能需要一个合适的加载器来处理这种文件类型.|{|_args":[|[|{@ ./~/elliptic/lib/elliptic.js 5:19-45./~/parse-asn1/aesid.json 中的错误模块解析失败:/Users/kn/Documents/workbench/node_modules/parse-asn1/aesid.json Unexpected token (1:25)您可能需要一个合适的加载器来处理这种文件类型.|{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

修改main.js里面的代码后再次更新@marknadal 的建议成功了

main.js

/*** Main.js*/'使用严格';/***设置枪* TODO:添加同行*/var Gun = require('枪/枪');var 同行 = ['http://localhost:8080/gun'];var gun = Gun(peers);var React = require('react');var ReactDom = require('react-dom');var App = React.createClass({使成为() {return 
你好
}});var ROOT = document.getElementById('appmount');ReactDom.render(<应用程序/>,根);

和 webpack.config

var path = require('path'),webpack = require('webpack');模块.出口 = {开发工具:'源地图'，目标:'网络'，节点:{fs: '空'},入口: {工作板:'./src/workboard/main.js'},输出: {路径:__dirname，文件名:'/public/[name]/js/bundle.js'},模块: {装载机: [{测试:/.js?$/,loader: 'babel-loader',排除:/node_modules/，询问: {预设:['es2015', 'react', 'stage-2', 'stage-1']}},{测试:/\.json$/,加载器:'json'，包括: [/节点模块/]}],noParse: [/aws-sdk/]},插件: [new webpack.DefinePlugin({ "global.GENTLY": false })]};

和 package.json - 它包含的内容比这个项目需要的要多得多，如果您想尝试自己运行它，请忽略这一点

{"name": "工作台","版本": "1.0.0","description": "我的本地工作台","main": "index.js",脚本":{"test": "echo \"Error: no test specified\" && exit 1","start": "cd public && serve"},"作者": "[email protected]","license": "ISC",依赖关系":{"babel-core": "^6.7.7","babel-preset-stage-1": "^6.5.0","babel-preset-stage-2": "^6.5.0","快递": "^4.14.0","获取": "^1.0.1",反应":^0.14.8"，"react-dom": "^0.14.8",反应路由器":^ 2.3.0"},开发依赖":{"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","枪": "^0.3.992","json-loader": "^0.5.4","loader-utils": "^0.2.15","prime": "^0.5.0",素数":0.0.1"，"tls": "0.0.1","url": "^0.11.0","utf-8-validate": "^1.2.1","webpack": "^2.1.0-beta.5"}}

现在当我使用 webpack --watch 时不会显示警告或错误.转到 public/workboad 并运行服务，我看到反应应用程序运行没有错误

解决方案

@riscarrott 的回答有效吗?我是 gun 的作者，看起来其中 1 个错误与枪支有关.但是我不是 webpack 专家，所以我不确定是什么问题.

我确实知道 require('gun') 实际上加载了 ./index.js，而后者又加载了服务器端特定的逻辑(在浏览器).如果 riscarrott 的答案不起作用，请尝试将 require('gun') 替换为 require('gun/gun') 并查看它是否有效.如果是这种情况，请在 https://github.com/amark/gun 上提交错误报告所以我们可以为未来的人解决这个问题.

如果这没有帮助，团队和社区中的其他几个人会大量使用 webpack 和 gun.我看看能不能让他们在这里回复.

它看起来像其他项目的事实上的方式，比如 jquery/angular/etc.(https://www.npmjs.com/package/angular) 是让你包括他们带有 <脚本 > 标签.因此，我们也建议您也这样做，因为它可以避免所有这些构建问题.

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": "[email protected]",
  "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?

UpdateChanging 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.jsSuggestion 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": "[email protected]",
  "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

解决方案

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>

这篇关于使用 Reactjs 和 webpack 运行 gunjs 在控制台中引发参考错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-24 07:04
Powered by LMLPHP ©2024 gunjs 0.048776