Fix Snap.svg issue with Webpack builds

negomi · Aug 24, 2015 · 1b4a999 · 1b4a999 · sylphdesign · Aug 25, 2015
1 parent c1f0de7
commit 1b4a999
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -21,16 +21,21 @@
   "devDependencies": {
     "babel": "^5.8.20",
     "babel-eslint": "^3.1.9",
+    "browserify-optional": "^1.0.0",
     "chai": "^3.2.0",
     "eslint": "^0.21.2",
     "eslint-plugin-react": "^2.3.0",
     "gulp": "^3.8.11",
+    "imports-loader": "^0.6.4",
     "istanbul": "^0.3.17",
     "jsdom": "^5.6.1",
     "mocha": "^2.2.5",
     "react-component-gulp-tasks": "^0.7.0",
     "sinon": "^1.16.1"
   },
+  "browserify": {
+    "transform": ["browserify-optional"]
+  },
   "browserify-shim": {
     "react": "global:React"
   },

diff --git a/src/menuFactory.js b/src/menuFactory.js
@@ -1,10 +1,17 @@
 'use strict';
 
 import React from 'react';
-import snap from 'snapsvg';
 import BurgerIcon from './BurgerIcon';
 import CrossIcon from './CrossIcon';
 
+// Snap.svg workaround for Webpack using imports-loader (https://github.com/webpack/imports-loader).
+let snap;
+try {
+  snap = require('imports?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js');
+} catch(e) {
+  snap = require('snapsvg');
+}
+
 export default (styles) => {
 
   return React.createClass({