diff --git a/karma.conf.js b/karma.conf.js
index 2b69fef..b93f870 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -32,15 +32,27 @@ module.exports = function(config) {
 
     webpack: {
         module: {
-            loaders: [
-                {test: /\.(js|jsx)$/, loaders: ['babel']},
-            ]
+          rules: [
+            {
+              test: /\.(js|jsx)$/,
+              use: {
+                loader: 'babel-loader',
+                options: {
+                  presets: ['env'],
+                  plugins: [
+                    'transform-class-properties',
+                    'transform-react-jsx',
+                  ],
+                },
+              },
+            },
+          ],
         },
         externals: {
             react: 'React'
         },
         resolve: {
-          root: __dirname
+          modules: [__dirname, 'node_modules']
         }
     },
     webpackServer: {
diff --git a/package.json b/package.json
index b96ad38..420cdce 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "start": "gulp server",
-    "prepublish": "babel ./src --out-dir ./lib --plugins=transform-class-properties,transform-react-jsx",
+    "prepublish": "babel ./src --out-dir ./lib --plugins=transform-class-properties,transform-react-jsx --preset=env",
     "test": "karma start --single-run",
     "dev-test": "karma start"
   },
@@ -27,8 +27,7 @@
   },
   "homepage": "https://github.com/akiran/react-highlight",
   "dependencies": {
-    "highlight.js": "^9.11.0",
-    "react": "^15.5.4"
+    "highlight.js": "^9.11.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.7",
@@ -38,6 +37,7 @@
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-react-jsx": "^6.24.1",
+    "babel-preset-env": "^1.6.0",
     "es5-shim": "^4.5.9",
     "eslint": "^3.19.0",
     "eslint-plugin-react": "^6.10.3",
@@ -55,7 +55,13 @@
     "node-libs-browser": "^2.0.0",
     "phantomjs-prebuilt": "^2.1.14",
     "raw-loader": "^0.5.1",
-    "webpack": "^1.15.0",
-    "webpack-dev-server": "^1.16.3"
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "webpack": "^3.6.0",
+    "webpack-dev-server": "^2.9.1"
+  },
+  "peerDependencies": {
+    "react": "^15.0.0 || ^16.0.0",
+    "react-dom": "^15.0.0 || ^16.0.0"
   }
 }
diff --git a/src/index.js b/src/index.js
index d231125..a5fff66 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,7 +12,10 @@ class Highlight extends React.Component {
 
     highlightCode() {
         const nodes = this.el.querySelectorAll('pre code');
-        nodes.forEach((node) => hljs.highlightBlock(node));
+
+        for (let i = 0; i < nodes.length; i++) {
+            hljs.highlightBlock(nodes[i])
+        }
     }
 
     setEl = (el) => {
diff --git a/src/optimized.js b/src/optimized.js
index 12a4924..e97f670 100644
--- a/src/optimized.js
+++ b/src/optimized.js
@@ -22,7 +22,9 @@ class Highlight extends React.Component {
             hljs.registerLanguage(lang, require('highlight.js/lib/languages/' + lang));
         });
 
-        nodes.forEach((node) => hljs.highlightBlock(node));
+        for (let i = 0; i < nodes.length; i++) {
+            hljs.highlightBlock(nodes[i])
+        }
     }
 
     setEl = (el) => {