Next JS dev mode: ReferenceError: File is not defined

Bug Report

Describe the bug

When attempting to use DropzoneArea in a Next JS app (running with npm run dev) which is using Material UI, the attached error occurs in console, and the following error is displayed in the window:

ReferenceError: File is not defined (anonymous function) /home/tristan/Documents/git_repos/GitHub/Optimaized/MisTecnicos/mistecnicos-web-app/node_modules/material-ui-dropzone/dist/index.js:1166:77 Module._compile internal/modules/cjs/loader.js:1123:30 Module._extensions…js internal/modules/cjs/loader.js:1143:10 Module.load internal/modules/cjs/loader.js:972:32 Function.Module._load internal/modules/cjs/loader.js:872:14 Module.require internal/modules/cjs/loader.js:1012:19 require internal/modules/cjs/helpers.js:72:18 material-ui-dropzone webpack:/external “material-ui-dropzone”:1 1 | module.exports = require(“material-ui-dropzone”); View compiled webpack_require ./webpack/bootstrap:21 18 | // Execute the module function 19 | var threw = true; 20 | try { 21 | modules[moduleId].call(module.exports, module, module.exports, webpack_require); | ^ 22 | threw = false; 23 | } finally { 24 | if(threw) delete installedModules[moduleId]; View compiled Module…/pages/test/index.js /_next/development/server/static/development/pages/test.js:110:78 webpack_require ./webpack/bootstrap:21 18 | // Execute the module function 19 | var threw = true; 20 | try { 21 | modules[moduleId].call(module.exports, module, module.exports, webpack_require); | ^ 22 | threw = false; 23 | } finally { 24 | if(threw) delete installedModules[moduleId]; View compiled 3 /_next/development/server/static/development/pages/test.js:195:18 webpack_require ./webpack/bootstrap:21 18 | // Execute the module function 19 | var threw = true; 20 | try { 21 | modules[moduleId].call(module.exports, module, module.exports, webpack_require); | ^ 22 | threw = false; 23 | } finally { 24 | if(threw) delete installedModules[moduleId]; View compiled ▼ 3 stack frames were expanded. (anonymous function) /home/tristan/Documents/git_repos/GitHub/Optimaized/MisTecnicos/mistecnicos-web-app/.next/server/static/development/pages/test.js:91:18 (anonymous function) /_next/development/server/static/development/pages/test.js:94:10 Module._compile internal/modules/cjs/loader.js:1123:30

Steps to reproduce

1. Create a Next JS app
2. Install Material UI
3. Install Material UI Dropzone
4. Create a simple DropzoneArea on a page
5. Start the application in dev mode: npm run dev
6. Load the page

Expected behavior

Run the page without errors on both dev and production mode. It works with npm run build && npm start, but not with npm run dev

### Screenshots

See the screenshot below:

Versions

• OS: Ubuntu 18.04
• Browser: chrome
• @material-ui/core version: ^4.9.11
• material-ui-dropzone version: ^3.3.0

Additional context

Console error log: localhost-1593081881279.log