ReferenceError: regeneratorRuntime is not defined

[rooch84]

After upgrading from 2.4.1 to 2.4.2, I'm now seeing the following error:

ReferenceError: regeneratorRuntime is not defined

[Tassfighter]

regeneratorRuntime is not part of bable anymore.
It is not an issue which can be fixed in material-ui-dropzone.

Add this to you package.json:

"core-js-pure": "^3.1.4",
"regenerator-runtime": "^0.13.2"

and this to your (main) index.js as first imports:

import 'core-js-pure/stable';
import 'regenerator-runtime/runtime';

[KevinVandy]

I have this problem too. It is causing our unit tests to fail, but works in production. I tried the above package.json and index.js additional package fixes and it did not make a difference.

I get this error when trying to import DropzoneArea:

import { DropzoneArea } from 'material-ui-dropzone';

ReferenceError: regeneratorRuntime is not defined

Edit: I was able to fix this by only installing "regenerator-runtime" as a dependency (core-js-pure was not needed for me), and then importing that dependency into the file that had my DropzoneArea component. It did not work when I imported it into my App.js or Index.js file.

[onukselcuk]

I've encountered the same problem. My solution was very similar to @Tassfighter . Here is my solution
I'm using Next JS, for Next JS
Add these to your package.json
"dependencies": { "core-js": "^3.3.5", "regenerator-runtime": "^0.13.3" }, "devDependencies": { "@babel/core": "^7.6.4", }

my .babelrc file
{ "presets": [["next/babel", { "useBuiltIns":"entry", "corejs":3 }]] }
in _document.js import these
import "core-js"; import regeneratorRuntime from "regenerator-runtime";

For normal setups other than Next JS, below is the configuration
Add these to your package.json
"dependencies": { "core-js": "^3.3.5", "regenerator-runtime": "^0.13.3" }, "devDependencies": { "@babel/core": "^7.6.4", "@babel/preset-env": "^7.6.3" }

my .babelrc file
{ "presets": [["@babel/preset-env", { "useBuiltIns":"usage", "corejs":3 }]] }

If you are using "usage" option you don't need to import core-js and regenerator-runtime, but Next JS creates a problem if you are using "usage" option. You need to use "entry" option and import the files in Next JS.

[eluchsinger]

How is this fixable for a pure CRA app? I am stuck with 2.4.1 now.

[onukselcuk]

How is this fixable for a pure CRA app? I am stuck with 2.4.1 now.

Just install core-js and regenerator-runtime and add the imports to the top of your app.js

[rooch84]

Perhaps it's my limited knowledge, but I don't like importing packages when I'm not sure what they do.

I've decided to switch to react-dropzone instead.

[Tassfighter]

Perhaps it's my limited knowledge, but I don't like importing packages when I'm not sure what they do.

You already did use those packages in the past. Those packages have been removed from babel, thats the reason for the issue. These packages are just ECMA polyfills see

I've decided to switch to react-dropzone instead.

I don't mind at all. But sooner or later, you will face the same problem again with other packages.

[onukselcuk]

The problem is with this package people. It should come bundled with all of the dependencies. This is not the only problem with this package. I am getting a deprecation warning about componentWillReceiveProps.

[krizpoon]

I've encountered the same problem. My solution was very similar to @Tassfighter . Here is my solution
I'm using Next JS, for Next JS
Add these to your package.json
"dependencies": { "core-js": "^3.3.5", "regenerator-runtime": "^0.13.3" }, "devDependencies": { "@babel/core": "^7.6.4", }

my .babelrc file
{ "presets": [["next/babel", { "useBuiltIns":"entry", "corejs":3 }]] }
in _app.js import these
import "core-js"; import regeneratorRuntime from "regenerator-runtime";

@onukselcuk Thanks for pointing at the right direction. I'm using Next JS too. But importing them in _app.js doesn't work for me. Even if they are the first 2 imports. I instead import them just before importing material-ui-dropzone to solve the problem.

[onukselcuk]

@krizpoon actually I moved imports to the top of _document.js file. I should have edited my comment. Importing them in the component file didn't work for me.

[crshumate]

@Tassfighter Why can't regenerator-runtime be added as dep for mui-dropzone?

Right now to get mui-dropzone to work I have to google the error, find this issue, and manually install and import regenerator-runtime for your the project to work which is not very user-friendly.

Edit: saw you're not the author, updated project ownership

[Tassfighter]

Let me try to explain (but don't quote me, I am not really sure...)
Many projects have been developed with JavaScript features of the latest ECMA spec.
These features are not supported by the browsers, therefore the code has to be translated into compatible JavaScript (this includes manipulation of the window object). Now, the translation tool (babel) has decided to remove some of these translation tools (regeneratorRuntime).
You could import the regeneratorRuntime in this lib of course, but it is a bad idea (in my opinion!). You don't want libs to manipulate the window object for so many reasons. One example, if a new version of the regeneratorRuntime is released and one lib is using it another lib might override it with an older version... boom :) Hope this helps.

[eluchsinger]

@Tassfighter this library should list all their dependencies. And if another library uses a different version of regeneratorRuntime, it will be handled as it is handled with all other libraries. It's a common issue. The behavior as it is now is a bug.

[panz3r]

As of version 2.5.0 of material-ui-dropzone the @babel/runtime dependency has been explicitly defined inside package.json.

Closing this issue.