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

The following webpack.config.js is working for me. It incorporates @also's good idea for the brfs matcher:

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'
      }
    ]
  },
};

I have a working example that I have been keeping up to date.