我们希望在我们的node / webpack / babel / ES6 /基于React的项目中使用Rollbar.js。它不是100%清楚正确的NPM包使用什么,但它似乎是这个:
https://www.npmjs.com/package/rollbar
从那里开始,说明非常简单:添加对package.json
的引用,安装,然后关闭。所以这里是package.json
中的引用:
"rollbar": "0.6.2",
运行npm install
似乎运行正常,但是当我运行npm start
时,我在控制台中收到此错误:
ERROR in ./~/rollbar/lib/parser.js
Module not found: Error: Cannot resolve module 'fs' in [myProjectRoot]node_modules/rollbar/lib
@ ./~/rollbar/lib/parser.js 7:9-22
ERROR in ./~/rollbar/package.json
Module parse failed: [myProjectRoot]node_modules/rollbar/package.json Unexpected token (2:9)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (2:9)
at Parser.pp.raise ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13)
at Parser.pp.unexpected ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1490:8)
at Parser.pp.semicolon ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1469:73)
at Parser.pp.parseExpressionStatement ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1994:8)
at Parser.pp.parseStatement ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1772:188)
at Parser.pp.parseBlock ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:2009:21)
at Parser.pp.parseStatement ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1753:19)
at Parser.pp.parseTopLevel ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1666:21)
at Parser.parse ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:1632:17)
at Object.parse ([myProjectRoot]node_modules/webpack/node_modules/acorn/dist/acorn.js:885:44)
@ ./~/rollbar/lib/notifier.js 14:18-44
我无法理解这一点。它似乎暗示我的webpack项目无法解析Rollbar的package.json
文件,但这似乎不可能,因为我的webpack项目有无数其他NPM包,每个包都有自己的{{1文件。
有人遇到过这个问题吗?
更新:
如果相关,请填写完整的package.json
文件:
webpack.config.js
第二次更新:
仍然无法构建内容,但我获得了更多信息。如果我从代码中删除Rollbar导入,则控制台错误就会消失。我尝试过两种方式导入Rollbar,如下所示:
const path = require('path');
const webpack = require('webpack');
const glob = require('glob');
const modulesDirectories = glob.sync('src/**');
const assetsDirectories = glob.sync('assets/**');
Array.prototype.push.apply(
modulesDirectories,
assetsDirectories
);
modulesDirectories.push('assets');
modulesDirectories.push('/');
modulesDirectories.push('node_modules');
const modulesDirectoriesWithoutFiles = modulesDirectories.filter(directory => {
if (directory.slice(-4, -3) === '.' || directory.slice(-3, -2) === '.') {
return false;
}
return true;
});
module.exports = {
cache: true,
devtool: 'cheap-module-eval-source-map',
entry: [
'eventsource-polyfill',
'webpack-hot-middleware/client',
'./src/index.js'
],
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loader: 'babel',
query: {
// https://github.com/babel/babel-loader#options
cacheDirectory: true
},
include: path.join(__dirname, 'src'),
exclude: /node_modules/
},
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.woff|.ttf|.eot|.woff2$/, loader: `file-loader` },
{ test: /\.(png|jpe?g|gif|svg)$/, loader: `url-loader?limit=8192` },
]
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new webpack.DefinePlugin({
FIREBASE_CONFIG: JSON.stringify({
apiKey: [ourApiKey],
authDomain: [ourDomain],
databaseURL: [ourUrl],
storageBucket: [ourBucket],
})
})
],
resolve: {
extensions: ['', '.js', '.jsx'],
root: __dirname,
modulesDirectories: modulesDirectoriesWithoutFiles,
}
};
import rollbar from "rollbar";
两次尝试都会产生相同的错误。如果我将var Rollbar = require('rollbar');
添加到我的node: {fs: "empty"}
文件中,那么' fs'错误消失,但适当的加载器"错误仍然存在。
答案 0 :(得分:1)
我遇到了同样的问题。我修理了它:
fs
安装npm install --save fs
。或者,您可以按照评论中的建议将node: {fs: "empty"}
添加到您的webpack配置中。其中任何一个都会处理rollbar / lib / parser.js中的fs
导入。package.json
。
module: { loaders: [ { test: /\.json$/, loader: "json" }, ... ], ... }