Next JS dev mode: ReferenceError: File is not defined

[tristan-nel]

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

[Nigorro]

I got the same error with Nextjs and Material-ui. Perhaps this is a bug in the new version of material-ui-dropzone.

I installed the previous version and it helped me.

Try: npm i [email protected] -s

[tristan-nel]

I've ended up building my own custom drag & drop / click to upload component out of MUI components so that I could customise the look of it and control some of the logic a bit more.

Thanks for that advice though - hopefully it's helpful to anyone else with the same problem

[acabreragnz]

I got the same error, thank you @Nigorro. I don't understand why this PR has been closed if the bug is there.

[panz3r]

Hi @tristan-nel , @Nigorro and @acabreragnz ,

Thanks for your feedback, it seems this issue is related to the newly introduced feature to allow preloading File into the DropzoneArea component (the only change related to File between v3.2.1 and v3.3.0).

It is a quite strange error since File is actually used only for PropTypes checking and not internally and I don’t know why this type should not be available when running on NodeJS vs in the browser.

Can you please provide more info about your setup? Which versions of NodeJS and NextJS are you using? And if you are using Typescript, which version?

[ceo-epiclions]

I got the exactly same error with the same env (NextJS + TypeScript + Mui).
"material-ui-dropzone": "^3.3.0"
"typescript": "^3.8.3"
"next": "^9.4.5-canary.7"
"@material-ui/core": "^4.9.13"

[acabreragnz]

@panz3r here my versions,

"material-ui-dropzone": "3.3.0",
"typescript": "3.9.6",
"next": "9.4.4",
"@material-ui/core": "4.11.0",

Thank you for this great component, let me know if you need extra info.

[msalahz]

Same here

"material-ui-dropzone": "^3.3.0",
"typescript": "^3.8.3",
"next": "^9.4.4",
"@material-ui/core": "^4.10.1",
"@material-ui/icons": "^4.9.1",
"@material-ui/lab": "^4.0.0-alpha.56",

[ChristianSaboia]

Same error here.
It was working fine until an yarn upgrade.

Ubuntu 19.04

"@date-io/luxon": "^2.1.0",
"@date-io/moment": "^2.4.0",
"@material-ui/core": "^4.9.4",
"@material-ui/icons": "latest",
"@material-ui/lab": "^4.0.0-alpha.43",
"@material-ui/pickers": "^4.0.0-alpha.1",
"@types/moment": "^2.13.0",
"axios": "^0.19.2",
"classnames": "latest",
"dotenv": "^8.2.0",
"lodash": "^4.17.15",
"luxon": "^1.22.0",
"material-ui-dropzone": "^3.3.0",
"moment": "^2.24.0",
"next": "^9.4.4",
"next-cookies": "^2.0.3",
"next-images": "^1.3.0",
"next-redux-wrapper": "5.0.0",
"node-polyglot": "^2.4.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-avatar-edit": "^0.8.3",
"react-cookie": "^4.0.3",
"react-dom": "^16.13.1",
"react-hook-form": "^4.9.3",
"react-redux": "latest",
"redux": "latest",
"redux-thunk": "latest",
"tinycolor2": "^1.4.1",
"yup": "^0.28.1"

[cayasso]

Can you please publish version 3.3.1 to NPM? the latest version is still showing 3.3.0