未捕获的TypeError：fs.​​readFileSync不是函数

时间：2016-06-03 07:11:48

标签： meteor reactjs webpack mapbox-gl-js

我想让webpack和mapbox-gl在Meteor系统中一起工作。我到处都看到上面提到的错误但没有效果。这是我的webpack设置

{
  "root": "src",
  "devServer": {
    "host": "localhost"
  },
  "sass": {
    "module": true
  },
  "css": {
    "module": true
  },
  "node": {
    "fs": "empty"
  },
  "externals": {
    "fs": "{}",
    "tls": "{}",
    "net": "{}",
    "console": "{}"
  },
  "module": {
    "loaders": [
      { 
        "test": "/\\.js$/", 
        "include": "./node_modules/mapbox-gl/js/render/painter/use_program.js", 
        "loader": "transform/cacheable?brfs"
      }, {
        "test": "/\\.js$/",
        "include": "./node_modules/mapbox-gl-shaders/index.js",
        "loader": "transform/cacheable?brfs"
      }, {
        "test": "/\\.js$/",
        "include": "./node_modules/webworkify-webpack/index.js",
        "loader": "worker"
      }, {
        "test": "/\\.css$/",
        "loader": "style!css?importLoaders=1!autoprefixer",
        "include": [
            "./node_modules"
        ]
      }, {
        "test": "/\\.scss$/",
        "include": [
          "./node_modules"
        ]
      }, {
        "test": "/\\.sass$/",
        "loader": "!style!css!sass?indentedSyntax!",
        "include": [
          "./node_modules"
        ]
      }, { 
        "test": "/\\.json$/", 
        "loader": "json-loader" 
      }, { 
        "test": "/\\.(png|jpg|jpeg|gif)$/", 
        "loader": "url-loader" 
      }
    ]
  },
  "postcss": [ "autoprefixer({ browsers: [last 2 versions'] })" ],
  "postLoaders": [
    {
      "include": "./node_modules/mapbox-gl/",
      "loader": "transform",
      "query": "brfs"
    }
  ],
  "resolve": {
    "alias": {
      "webworkify": "webworkify-webpack"
    }
  }
}

为了您的信息，我使用Reactive Stack提供的webpack以及它设置webpack的方式略有不同。

这是我的package.json用于npm设置

"dependencies": {
    "meteor-node-stubs": "^0.2.3",
    "meteoredux": "0.0.2",
    "numeral": "^1.5.3",
    "object-assign": "^4.0.1",
    "react": "^0.14.8",
    "react-addons-create-fragment": "^0.14.8",
    "react-addons-css-transition-group": "^0.14.8",
    "react-addons-linked-state-mixin": "^0.14.8",
    "react-addons-perf": "^0.14.8",
    "react-addons-pure-render-mixin": "^0.14.8",
    "react-addons-test-utils": "^0.14.8",
    "react-addons-transition-group": "^0.14.8",
    "react-addons-update": "^0.14.8",
    "react-dom": "^0.14.8",
    "react-helmet": "^3.0.0",
    "react-mixin": "^3.0.4",
    "react-redux": "^4.4.4",
    "react-tap-event-plugin": "^0.2.2",
    "redux": "^3.4.0",
    "string": "^3.3.1"
  },
  "devDependencies": {
    "babel": "^6.3.26",
    "babel-core": "^6.7.4",
    "babel-loader": "^6.2.4",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-transform": "^2.0.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.2",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-0": "^6.5.0",
    "brfs": "^1.4.3",
    "css-loader": "^0.23.1",
    "expose-loader": "^0.7.1",
    "extract-text-webpack-plugin": "^0.9.1",
    "file-loader": "^0.8.5",
    "geojson": "^0.3.0",
    "less": "^2.3.1",
    "less-loader": "^2.2.3",
    "node-sass": "^3.6.0",
    "react-transform-catch-errors": "^1.0.0",
    "react-transform-hmr": "^1.0.1",
    "redbox-react": "^1.2.0",
    "sass-loader": "^3.2.0",
    "sass-resources-loader": "^1.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.0",
    "webpack-hot-middleware": "^2.4.1",
    "json-loader": "^0.5.4",
    "webworkify-webpack": "^1.1.0",
    "transform-loader": "^0.2.3",
    "mapbox-gl": "^0.19.0"
  }

我做错了什么？欣赏来自MDG的人可以解释错误，因为我相信它与Meteor系统有关。仅供参考，我使用npm start来运行页面

更新

根据@also的建议，我将部分设置移至webpack.conf.js 

const path = require('path');
const webpack = require('webpack');

module.exports = {
    resolve: {
        extensions: ['', '.js', '.jsx'],
        alias: {
            webworkify: 'webworkify-webpack'
        }
    },
    module: {
        loaders: [{
            test: /\.json$/,
            loader: 'json-loader'
        }, {
            test: /\.js$/,
            include: path.resolve('./node_modules/mapbox-gl-shaders/index.js'),
            loader: 'transform/cacheable?brfs'
        }],
        postLoaders: [{
            include: /node_modules\/mapbox-gl-shaders/,
            loader: 'transform',
            query: 'brfs'
        }]
    }
};

我从here获取设置。我的webpack.json 

{
  "root": "src",
  "devServer": {
    "host": "localhost"
  },
  "sass": {
    "module": true
  },
  "css": {
    "module": true
  },
  "module": {
    "loaders": [
      {
        "test": "/\\.css$/",
        "loader": "style!css?importLoaders=1!autoprefixer",
        "include": [
            "./node_modules",
          "./src/SewApps/client/css",
            "./src/SewApps/client/Search/css"
        ]
      }, {
        "test": "/\\.scss$/",
        "include": [
          "./node_modules",
          "./src/SewApps/client/css",
          "./src/SewApps/client/Search/css"
        ]
      }, {
        "test": "/\\.sass$/",
        "loader": "!style!css!sass?indentedSyntax!",
        "include": [
          "./node_modules"
        ]
      }, { 
        "test": "/\\.(png|jpg|jpeg|gif)$/", 
        "loader": "url-loader" 
      }
    ]
  },
  "postcss": [ "autoprefixer({ browsers: [last 2 versions'] })" ]
}

但我还是遇到了另一个错误

=> Exited with code: 8                        
W20160609-14:26:04.106(8)? (STDERR) 
W20160609-14:26:04.107(8)? (STDERR) /Users/muhaimincs/Documents/soulja/src/.meteor/local/build/programs/server/app/server.js:59
W20160609-14:26:04.107(8)? (STDERR)     import { ReactRouterSSR } from 'meteor/reactrouter:react-router-ssr';
W20160609-14:26:04.107(8)? (STDERR)     ^^^^^^
W20160609-14:26:04.107(8)? (STDERR) SyntaxError: Unexpected reserved word
W20160609-14:26:04.107(8)? (STDERR)     at /Users/muhaimincs/Documents/suolja/src/.meteor/local/build/programs/server/boot.js:278:30
W20160609-14:26:04.107(8)? (STDERR)     at Array.forEach (native)
W20160609-14:26:04.107(8)? (STDERR)     at Function._.each._.forEach (/Users/muhaimincs/.meteor/packages/meteor-tool/.1.3.1.r1m70++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/dev_bundle/server-lib/node_modules/underscore/underscore.js:79:11)
W20160609-14:26:04.107(8)? (STDERR)     at /Users/muhaimincs/Documents/soulja/src/.meteor/local/build/programs/server/boot.js:133:5

4 个答案:

答案 0 :(得分：1)

您正在为不匹配的test和include加载程序选项使用字符串。这些是not converted to regular expressions，所以事情像js$一样永远不会匹配 - 这意味着文件名中的文字$。当条件是字符串时，它将是compared against the full path，因此./node_modules/mapbox-gl/js/render/painter/use_program.js也不匹配。

由于未满足加载程序条件，因此加载程序未运行且fs.readFileSync调用未被brfs转换内联。

要解决此问题，它看起来像Reactive Stack Webpack插件read a webpack.conf.js file，您可以在其中使用实际正则表达式并匹配所有.js文件或特定文件需要改造。

例如，在webpack.conf.js中（请注意，此文件特定于此Meteor Webpack插件）：

module.exports = {
  module: {
    loaders: [
      {
        test: /mapbox-gl.+\.js$/,
        loader: 'transform/cacheable?brfs'
      }
    ]
  }
};

这将匹配路径中.js的所有mapbox-gl个文件。

我认为您希望更新所有module.loaders以使用正则表达式。如果你需要检查加载器是否匹配，快速破解是将loader更改为虚假的东西：

      {
        test: /mapbox-gl.+\.js$/,
        loader: 'XXXtransform/cacheable?brfs'
      }

如果匹配，Webpack将在无法找到加载程序时抛出异常。另一方面，如果您没有看到异常，则表示您的配置存在问题。

答案 1 :(得分：1)

以下webpack.config.js正在为我工​​作。它结合了@ brfs匹配器的好主意：

var webpack = require('webpack')
var path = require('path')

module.exports = {
  entry: './app.js',
  output: { path: __dirname, filename: 'bundle.js' },
  resolve: {
    extensions: ['', '.js'],
    alias: {
      webworkify: 'webworkify-webpack',
      'mapbox-gl': path.resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
    }
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'stage-0']
        }
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'node_modules/webworkify/index.js'),
        loader: 'worker'
      },
      {
        test: /mapbox-gl.+\.js$/,
        loader: 'transform/cacheable?brfs'
      }
    ]
  },
};

我有working example我一直在及时了解。

答案 2 :(得分：0)

这部分是多余的：

"node": {
  "fs": "empty"
}

不确定是否会导致问题，但您不需要它。

答案 3 :(得分：0)

我有类似的问题。试试这个：

确定哪个模块引发了%错误。对我而言，fs.readFileSync是mime的依赖关系。

我将其替换为不依赖于url-loader的{​​{1}}，因此不是file-loader。确保卸载mime，因为它仍然会抛出错误！

然后使用：

更新您的fs

url-loader

希望有所帮助！

相关问题
最新问题