Fix build process for mapbox gl

package.json

@@ -91,6 +91,6 @@
     "webpack": "1.13.2",
     "webpack-cleanup-plugin": "^0.3.0",
     "webpack-dev-server": "1.15.1",
-    "webworkify-webpack": "^1.1.7"
+    "webworkify-webpack": "^1.1.3"
   }
 }

src/app.jsx

@@ -9,7 +9,6 @@ import { StyleStore } from './stylestore.js'
 import { WorkspaceDrawer } from './workspace.jsx'
 
 import theme from './theme.js'
-import layout from './layout.scss'
 
 export default class App extends React.Component {
 	static childContextTypes = {
@@ -78,9 +77,7 @@ export default class App extends React.Component {
 				workContext={this.state.workContext}
 				mapStyle={this.state.currentStyle}
 			/>
-			<div className={layout.map}>
 			<Map mapStyle={this.state.currentStyle} />
 		</div>
-		</div>
 	}
 }

src/layout.scss

@@ -1,12 +1,8 @@
-@mixin full-height {
+.map {
     position: fixed;
     top: 0;
     bottom: 0;
 	height: 100%;
-}
-
-.map {
-    @include full-height;
     width: 100%;
 
     & > div {

src/map.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import MapboxGl from 'mapbox-gl';
-import diffStyles from 'mapbox-gl-style-spec/lib/diff'
+//import diffStyles from 'mapbox-gl-style-spec/lib/diff'
-import theme from './theme.js'
+import { fullHeight } from './theme.js'
 import Immutable from 'immutable'
 
 export class Map extends React.Component {
@@ -50,6 +50,11 @@ export class Map extends React.Component {
 	}
 
 	render() {
-		return <div ref={x => this.container = x}></div>
+			return <div style={{
+				...fullHeight,
+				width: "100%",
+			}}>
+				<div ref={x => this.container = x}></div>
+			</div>
 	}
 }

src/theme.js

@@ -3,6 +3,13 @@ const caps = {
 	letterSpacing: '.2em'
 }
 
+export const fullHeight = {
+	position: "fixed",
+	top: 0,
+	bottom: 0,
+	height: "100%",
+}
+
 const baseColors = {
 	black: '#242424',
 	gray: '#313131',

webpack.config.js

@@ -24,19 +24,6 @@ loaders.push({
 		'sass'
 	]
 });
-
-// Mapbox GL
-loaders.push({
-	test: /\.json$/,
-  loader: 'json-loader'
-});
-
-loaders.push({
-	 test: /\.js$/,
-   include: path.resolve('node_modules/mapbox-gl-shaders/index.js'),
-   loader: 'transform/cacheable?brfs'
-});
-
 // local css modules
 loaders.push({
 	test: /[\/\\]src[\/\\].*\.css/,
@@ -61,7 +48,7 @@ module.exports = {
 		alias: {
 			'webworkify': 'webworkify-webpack',
 			// TODO: otherwise I get a max call stack error in browser?
-			'mapbox-gl': path.resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
+			// 'mapbox-gl': path.resolve('./node_modules/mapbox-gl/dist/mapbox-gl.js')
 		},
 		extensions: ['', '.js', '.jsx']
 	},
@@ -73,6 +60,9 @@ module.exports = {
 			query: 'brfs'
 		}]
 	},
+	node: {
+		fs: "empty"
+	},
 	devServer: {
 		contentBase: "./public",
 		// do not print bundle build stats

webpack.loaders.js

@@ -47,5 +47,14 @@ module.exports = [
 		test: /\.png/,
 		exclude: /(node_modules|bower_components)/,
 		loader: "url-loader?limit=10000&mimetype=image/png"
+	},
+	{
+		test: /\.json$/,
+		loader: 'json-loader'
+	},
+	{
+		 test: /\.js$/,
+		 include: '/node_modules/mapbox-gl-shaders/index.js',
+		 loader: 'transform/cacheable?brfs'
 	}
 ];

webpack.production.config.js

@@ -32,11 +32,25 @@ module.exports = {
 		filename: '[chunkhash].js'
 	},
 	resolve: {
+		alias: {
+			'webworkify': 'webworkify-webpack',
+		},
 		extensions: ['', '.js', '.jsx']
 	},
 	module: {
 		loaders
 	},
+	module: {
+		loaders,
+		postLoaders: [{
+			include: /node_modules\/mapbox-gl-shaders/,
+			loader: 'transform',
+			query: 'brfs'
+		}]
+	},
+	node: {
+		fs: "empty"
+	},
 	plugins: [
 		new WebpackCleanupPlugin(),
 		new webpack.DefinePlugin({