无法在基于节点/ webpack的项目中构建rollbar.js

时间:2016-06-22 15:59:48

标签: node.js webpack rollbar

我们希望在我们的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'错误消失,但适当的加载器"错误仍然存​​在。

1 个答案:

答案 0 :(得分:1)

我遇到了同样的问题。我修理了它:

  1. 使用fs安装npm install --save fs。或者,您可以按照评论中的建议将node: {fs: "empty"}添加到您的webpack配置中。其中任何一个都会处理rollbar / lib / parser.js中的fs导入。
  2. 安装json loader,然后将此加载程序添加到模块下的webpack配置中 - >装载机。这通知webpack在加载JSON文件时应该使用json加载器。然后,Webpack应该能够在rollbar / lib / notifier.js中导入package.json
    module: {
        loaders: [
            {
                test: /\.json$/,
                loader: "json"
            },
            ...
        ],
        ...
    }