title: Uncaught TypeError: fs.readFileSync is not a function
body: <p>I am trying to get webpack and <a href="https://github.com/mapbox/mapbox-gl-js/blob/master/webpack.config.example.js" rel="noreferrer">mapbox-gl</a> work together within Meteor system. I have look everywhere about the error mentioned above but none works. Here is my webpack setup </p>
  
  <pre><code>{
    "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"
      }
    }
  }
  </code></pre>
  
  <p>For your information, I use webpack provided by the <a href="https://github.com/thereactivestack/meteor-webpack" rel="noreferrer">Reactive Stack</a> and the way it setup the webpack slightly different. </p>
  
  <p>and here is my <code>package.json</code> for the npm setup</p>
  
  <pre><code>"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"
    }
  </code></pre>
  
  <p>What have I done wrong? Appreciate someone from <a href="https://www.meteor.com/company" rel="noreferrer">MDG</a> can explain the error because I believe it has something to with Meteor system. FYI, I use <code>npm start</code> to run the page</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Based on suggestion from @also, I move part of my setup to <code>webpack.conf.js</code></p>
  
  <pre><code>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'
          }]
      }
  };
  </code></pre>
  
  <p>which I get the setup from <a href="https://github.com/mapbox/mapbox-gl-js/blob/master/webpack.config.example.js" rel="noreferrer">here</a>. And my <code>webpack.json</code></p>
  
  <pre><code>{
    "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'] })" ]
  }
  </code></pre>
  
  <p>but I still hit another error</p>
  
  <pre><code>=&gt; 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
  </code></pre>