Made Dropzone loadable to get around gatsby build issues

src/components/Dropzone.js

@@ -6,7 +6,7 @@ import untar from "js-untar";
 const pako = require('pako');
 var JSZip = require("jszip");
 
-const FileDropzone = ({setZipList}) => {
+const Dropzone = ({setZipList}) => {
 
   async function getZipFilesContent (data) {
     const zipContent = []
@@ -80,4 +80,4 @@ const FileDropzone = ({setZipList}) => {
   )
 }
 
-export default FileDropzone
+export default Dropzone

src/components/LoadableDropzone.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import loadable from '@loadable/component'
+
+const Dropzone = loadable(() => import('./Dropzone'))
+
+const LoadableDropzone = ({setZipList}) => {
+  return (
+    <Dropzone setZipList={setZipList}></Dropzone>
+  )
+}
+
+export default LoadableDropzone

src/pages/index.js

@@ -9,7 +9,7 @@ import {
   NavbarHeading,
   NavbarDivider
 } from "@blueprintjs/core";
-import FileDropzone from '../components/Dropzone'
+import LoadableDropzone from '../components/LoadableDropzone'
 import LoadableLogViewer from '../components/LoadableLogViewer';
 
 export default function Index() {
@@ -25,7 +25,7 @@ export default function Index() {
         <NavbarGroup align={Alignment.LEFT}>
           <NavbarHeading>Log Parser</NavbarHeading>
           <NavbarDivider />
-          <FileDropzone setZipList={setLogList}></FileDropzone>
+          <LoadableDropzone setZipList={setLogList}></LoadableDropzone>
         </NavbarGroup>
         <Navbar.Group align={Alignment.RIGHT}>
           <Button icon="refresh" className="bp3-minimal" intent="danger" text="Clear" onClick={resetApp}/>