Error: Cannot find module 'gl'

[Jinnified]

I spent a day on this issue and still couldn't figure out why, i had a small react-webpack thing running react-map-gl, which works fine, my webpack config is like this:

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

module.exports = {
  entry: [
    './src/index.js'
  ],
  output: {
    path: './src',
    filename: 'bundle.js',
    publicPath: '/'
  },
  devServer: {
    inline: true,
    contentBase: './src',
    port: 9898,
    historyApiFallback: true
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        query:{
          plugins: ['transform-decorators-legacy']
        },
        loader: 'babel'
      },
      {
        test: /\.js$/,
        include: path.resolve('node_modules/mapbox-gl-shaders/index.js'),
        loader: 'transform/cacheable?brfs'
      },
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      { 
        test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ],
    noParse: [/autoit\.js$/],
    postLoaders: [
      {
        include: /node_modules\/mapbox-gl-shaders/,
        loader: 'transform',
        query: 'brfs'
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {
      'webworkify': 'webworkify-webpack'
    }
  },
  stylus: {
    use: [yeticss()]
  }
};

However when I try to configure in this react boilerplate with pretty much the same settings, it keeps on throw me that error on the run time: Error: Cannot find module 'gl'. And the webpack setting is something like this:

const path = require('path');
const webpack = require('webpack');
const WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
const webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./isomorphic.config'));

module.exports = {
  cache: false,
  debug: false,
  context: __dirname,
  stats: {
    colors: true,
    hasErrors: true,
    hasWarnings: true,
    reasons: true,
    errorDetails: true
  },
  resolve: {
    modulesDirectories: [
      'src',
      'node_modules'
    ],
    extensions: ['', '.json', '.js', 'jsx'],
    alias: {
      src: path.join(path.dirname(__dirname), 'src'),
      'webworkify': 'webworkify-webpack'
    }
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        query: {
          cacheDirectory: true,
          plugins: ['transform-decorators-legacy'],
          presets: ['es2015', 'stage-0', 'react']
        },
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        include: path.resolve('node_modules/mapbox-gl-shaders/index.js'),
        loader: 'transform/cacheable?brfs'
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: webpackIsomorphicToolsPlugin.regular_expression('images'),
        loader: 'url?limit=10240&name=assets/img/[hash].[ext]'
      }
    ],
    postLoaders: [
      {
        include: /node_modules\/mapbox-gl-shaders/,
        loader: 'transform',
        query: 'brfs'
      }
    ],
    noParse: /\.min\.js/
  },
  output: {
    publicPath: '/assets/'
  },
  node: {
    __dirname: true,
    fs: 'empty'
  }
};

And the boilerplate i am based on is this one: https://github.com/ufocoder/redux-universal-boilerplate

I am not very good with webpack, i suspect there is something obvious I am missing here.
The file I am updating is: common.config.js, which was merged with both server and client config to produce a final webpack configure for this particular boilerplate

Any help could be much appreciated!

[Jinnified]

plus when i try to npm install gl manually, it just hangs on loadRequestedDeps

[Jinnified]

I've also looked into these posts, but they all don't seem to have a firmed conclusion on this issue:

mapbox/mapbox-gl-js#828
#21
mapbox/mapbox-gl-js#1649

initially, I thought it's something to do withwebworkify-webpack and its versions, And in my previous working case, i have webworkify-webpack at 1.1.7, and i have the same version in my new configure, also i tried to downgrad webworkify-webpack to 1.1.5 and 1.1.3, still throws the same error: Error: Cannot find module 'gl'

[Jinnified]

so I managed to install gl in my node_modules, the run time error is gone, but the browser will return error on validating react-map-gl styles it seems, Uncaught ReferenceError: require is not defined, validate_style.min.js:3, looks like browersify was not configured properly with webpack, something wrong with webworkify-webpack ?

[gaving]

Having the same hell here trying get 'gl' installed, ready to give up.

Did you do anything special to get it installed? Relevant webpack config:-

resolve: {
  modulesDirectories: [
    'src',
    'node_modules'
  ],
  extensions: ['', '.json', '.js', '.jsx'],
  alias: {
    react: path.resolve('./node_modules/react'),
    webworkify: 'webworkify-webpack',
    'mapbox-gl/js/geo/transform': path.resolve('./node_modules/mapbox-gl/js/geo/transform'),
    'mapbox-gl': path.resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
  }
},

[balthazar]

Closing in favor of #112.