webpack/gl-matrix: Cannot use 'in' operator to search for 'SIMD' in undefined

[thejmazz]

mapbox-gl-js version: ^0.24.0

Issue: webpack example config does not work out of the box.

1. Clone this: https://gist.github.com/thejmazz/16358f6327effd708e84bb88ffe75632 (exact same as example config, just added a babel loader - plus my comments for gl-matrix)
2. npm install, webpack, open index.html
3. Note you are confronted with this error:

Uncaught TypeError: Cannot use 'in' operator to search for 'SIMD' in undefined


My current solution:

For some reason this becomes undefined inside gl-matrix (and then 'SIMD' in this throws). If instead you alias gl-matrix to the dist version, it works:

webpack.config.js:

...
resolve: {
  alias: {
    'webworkify': 'webworkify-webpack',
    // This makes it work
    'gl-matrix': path.resolve('./node_modules/gl-matrix/dist/gl-matrix.js')
  }
},
...

[mourner]

To prevent issues like this (which are inevitable no matter what we do on the GL JS side), I'm thinking of dropping support for building GL JS itself with WebPack altogether, and suggest requiring the dist version instead. What do you think?

[thejmazz]

Perhaps suggest that as an alternative if the user is having webpack/browserify problems. Personally, I don't mind playing with webpack for a few hours to make things work (as I did today...) - I've now learned some tricks (if you have random errors in a module, try making an alias to the dist for that module!) and will likely have less issues down the road if another "random" webpack issue comes up with any project. My 2cents and why I'm not one to complain about problems like this.

The only reason I think it's good to keep using webpack, or other bundlers, is for tree shaking. I don't think I'm even taking advantage of this atm, but I'm sure some smart rollup/webpack2 people will figure it out - from what I understand, a dist only version limits tree shaking.

EDIT: See below, tree shaking needs ES6 entry points, not CommonJS

[tmcw]

webpack2 and rollup both are only capable of tree-shaking on modules with ES6 entry points. Mapbox GL JS currently uses CommonJS-style requires and exports, and so cannot be tree shook (sp?) with either tool.

[thejmazz]

I see. I think it is still worthwhile trying to keep up with a webpack.config.js while also simultaneously suggesting an "opt out, simpler" solution - require the dist file. This is because I feel as though some people will still want to do their own browserify/webpack and having no reference for that will just make it more difficult.

Should I PR my example webpack change?

[mourner]

@thejmazz see #3235 for my proposed solution and corresponding readme updates that should clear up any confusion.