meteor - Uncaught TypeError: fs.readFileSync is not a function

Question

I am trying to get webpack and mapbox-gl work together within Meteor system. I have look everywhere about the error mentioned above but none works. Here is my webpack setup

{
  "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"
    }
  }
}

For your information, I use webpack provided by the Reactive Stack and the way it setup the webpack slightly different.

and here is my package.json for the npm setup

"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"
  }

What have I done wrong? Appreciate someone from MDG can explain the error because I believe it has something to with Meteor system. FYI, I use npm start to run the page

UPDATE

Based on suggestion from @also, I move part of my setup to 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'
        }]
    }
};

which I get the setup from here. And my 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'] })" ]
}

but I still hit another error

=> 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

Answer 1

You're using strings for the test and include loader options which won't match. These are not converted to regular expressions, so things like js$ will never match–that would mean a literal $ in the filename. When the condition is a string, it will be compared against the full path, so ./node_modules/mapbox-gl/js/render/painter/use_program.js wouldn't match either.

Since the loader conditions aren't being met, the loader isn't running and the fs.readFileSync call isn't being inlined by the brfs transform.

To fix this, it looks like the Reactive Stack Webpack plugin will read a webpack.conf.js file, where you could use actual regular expressions and match all .js files or the particular files that need the transform.

For example, in webpack.conf.js (note that this file is specific to this Meteor Webpack plugin):

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

This will match all .js files with mapbox-gl in the path.

I think you'll want to update all your module.loaders to use regular expressions. If you need to check if a loader is matching, a quick hack is to change the loader to something bogus:

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

If it matches, Webpack will throw an exception when it can't find the loader. On the other hand, if you don't see an exception you know you've got a problem with your configuration.