I'm getting an error "Uncaught ReferenceError: regeneratorRuntime is not defined". Please help me to find out the error and how to resolve it.
Install the runtime dependency
npm i --save-dev #babel/plugin-transform-runtime
Add the plugin to your .babelrc file
{
"plugins": ["#babel/plugin-transform-runtime"]
}
More Info:
https://babeljs.io/docs/en/babel-plugin-transform-runtime
TLDR;
Async functions are abstraction on top of generators.
Async functions and generators are now supported in all major browsers and in Node10 and upwards.
If you are using a transpiler (such as babel) for backwards compatibility, you would need an extra "layer" that transforms generators. This implies transforming ES6 into ES5 at runtime since their syntax isn't backwards compatible. See https://cmichel.io/how-are-generators-transpiled-to-es5
Thanks It works when I add an import statement -- import regeneratorRuntime from "regenerator-runtime"; in the component i am using async/await.
just add
"browserslist": [
"last 2 Chrome versions"
]
at the end of your projects package.json file, also see that its plural browsers not browser!
Your file in the end might look something like this ->
},
"dependencies": {
"prop-types": "^15.8.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"browserslist": [
"last 2 Chrome versions"
]
}
ignore the dependency section in the above code view, its just for reference on how your package.json might look.
2022
If you're working with Babel 7 or later version, you don't need to install an extra plugin (neither #babel/plugin-transform-runtime or #babel/plugin-transform-regenerator or other plugins).
Later, you have to include this statement every time you're using async/await syntax.
import regeneratorRuntime from "regenerator-runtime";
Maybe if you have set a linter in your project it will warning you about that statement is declared but its value is never read, but I think is just an error, because if you delete it the code doesn't work.
Ran into this problem (using Babel v7) and even after following the advice and installing relevant packages, I was still unable to get id of this error. following stack overflow posts were checked...
Babel 6 regeneratorRuntime is not defined
Babel 7 - ReferenceError: regeneratorRuntime is not defined
Following actions helped:
Go to package.json & add the following inside 'jest' (screenshot added also):
"moduleNameMapper": {
".+\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$":
"identity-obj-proxy" }
when running a test use the following suffix in the command...
--setupFilesAfterEnv "./src/setupTests.js"
so to run a test, it will be:
$ jest /pathToTest/TestFile.test.js --setupFilesAfterEnv
"./src/setupTests.js"
Hope it helps someone like it helped me...
If it's really necessary for you to use the async function then the solutions above should work. Another way to resolve this is to use regular promises, at least that was in my case.
Related
I am having some trouble since I added the react-native navigation drawer package. I have looked at a ton of things on SO and GitHub and so far most are just saying to add to babel and clear cache. I also tried not having it in my babel config, but then I get error 2 below.
All I want to be able to do is use the react-native-drawer package to allow me to have drawer and stack navigation - different packages, but need both.
Sorry for not much info, but I am new to React/React-Native and clueless on what is useful. Just ask, and I will provide it as an edit.
Error message 1 (with current babel config)
index.js: Cannot find module 'react-native-reanimated/plugin'
babel.config.js
module.exports = {
presets: [
'module:metro-react-native-babel-preset'
],
plugins: [
"react-native-reanimated/plugin"
]
};
package.json
"react-native-reanimated": "^1.13.3",
error 2 (without plugin in babel config)
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
This error goes away if I comment out the drawer lines
I'm using the next npm package which already requires the prop-types library. prop-types works as expected when I import it.
The problem is ESLint is telling me "'prop-types' should be listed in the project's dependencies". I've attempted to set the ESLint rule:
"rules": {
"react/prop-types": "off",
},
also
"rules": {
...
"import/no-extraneous-dependencies": [
"error", {
"devDependencies": true,
"optionalDependencies": true,
"peerDependencies": true,
"bundledDependencies": true
}
]
}
However, the ESLint error is still being detected. I don't want to add prop-types to my package.json because it's already included with next. I've seen that these attempts have worked for React.js apps, but it does seem to be working for my Next.js app. Is there anyone that could shed more light on this issue I'm having?
It doesn't matter which package is having which dependency, if you're directly using a package, it is recommended that it should be your dependency too. I'm not one of the developers of eslint-plugin-import, but the inspiration behind the rule would probably have been somewhat like this:
It may happen that a package foo may stop bundling a certain package bar with it, or maybe foo changes bar's version. But since which packages a package internally use don't affect semantic versioning until the exposed methods and behavior are the same, you may not even get a major version update. This means that you'll still have "foo": "^a.b.c" in your package.json, but bar will be updated. And if you are using bar without explicitly specifying it in your dependencies, you're are left with a code that may not work as intended, or may not work at all.
Now coming to your problem, you need to disable import/no-extraneous-dependencies to ignore that (linter) warning/error. To do that you can refer the docs: Disabling Rules with Inline Comments and Configuring Rules. However, the simplest method will be to keep using the rule, and just ignoring it for a line:
// eslint-disable-next-line import/no-extraneous-dependencies
import PropTypes from 'prop-types';
I have defined externals inside of my webpack configuration like:
externals: [
'react-dom-16',
{ 'react-dom': 'react-dom-16' }
],
react-dom-16 is a bundled react-dom with its own name.
And when I run application I got error and nothing is shown:
Element ref was specified as a string (value0) but no owner was set. You may have multiple copies of React loaded.
But the funniest thing is when I remove externals from webpack and put react-dom from dev-dependencies to dependencies and build everything on it. Then magicali everything works.
Probably I'm using ref as a string. But there are too many cases where should I change it, also there are old libraries I'm using and I can't access their code.
So I would like to use react 16.4.1 with backward compatibility but I got that kind of error and have no idea where to go next.
The problem was with circular dependencies of our externals.
It is react-dom was using react inside of it.
So we had duplication of react.
Solution was exposing react-dom without react.
I have a reactjs app written using ES6 standards, and I use webpack to build it. The webpack loads the js modules using babel-loader. To be specific, I use the following versions of packages:
├── babel#5.8.34
├── babel-core#5.8.34
├── babel-loader#5.4.0
└── webpack#1.12.6
However, after building it, the IE 10 gives the following error 'Symbol' is undefined. Shouldn't the babel be supposed to define the Symbol? Is there any specific configuration for webpack or babel I need to set in order to make it work? I use {stage: 0} configuration in my .babelrc.
Any help would be appreciated,
Thank you !
You can require polyfill in the entry point to your code so it will get bundled up with the rest of JavaScript.
One option is to use:
require('babel-polyfill');
Or:
import 'babel-polyfill';
All of that is explained in the documentation.
Ok, I eventually found out that babel alone does no polyfill. Including script <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script> solved this issue for me.
This solution will work for sure, it worked for me when I encountered the error: 'Symbol' is undefined in IE . It worked earlier in Chrome and Firefox but IE was throwing this error.It took me few hours to find this solution.
I am using the latest React at this time react "react": "^16.5.0" on windows machine.
1. Install babel-polyfill
npm install --save-dev babel-polyfill
In package.json, it should have the following entries
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.0.2",
"babel-polyfill": "^6.26.0",
"babel-preset-react": "^6.24.1"
}
2. In index.js, add
import babelPolyfill from 'babel-polyfill';
Problem should get solved
OK, I had the same issue, but in my case that was quite different, so basically you need to include script in the index file as below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser-polyfill.min.js"></script>
But in my case, I already included that, after some investigations I found out that my proxy blocked the script...
So make sure you include it in index.html and also make sure that you have access to the script from where you need it to avoid the error happening...best way just copy and paste the url in the browser...
But now which we get to this point, it's not talking about Symbol itself, what's Symbol which can not be recognised in IE?
The Symbol() function returns a value of type symbol, has static
properties that expose several members of built-in objects, has static
methods that expose the global symbol registry, and resembles a
built-in object class but is incomplete as a constructor because it
does not support the syntax "new Symbol()".
Every symbol value returned from Symbol() is unique. A symbol value
may be used as an identifier for object properties; this is the data
type's only purpose. Some further explanation about purpose and usage
can be found in the glossary entry for Symbol.
The data type symbol is a primitive data type.
in documentation about Runtime
// in bash
npm install babel-transform-runtime --save-dev
// in gulpfile
.pipe(babel({
plugins: ['transform-runtime']
}))
edit:
better yet on heroku in prod mode use --save instead of --save-dev
If you are getting this error in an Angular app, you need to un-comment the following lines in polyfills.ts -
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
I have recently added ESLint-ing into my angular application and soon realised I needed the eslint-plugin-angular plugin in order to get my application to be linted correctly.
Prior to this, I was using the extends property in my .eslintrc file and setting to eslint:recommended to make use of the eslint recommended rule set.
{
"extends": "eslint:recommended"
}
I tested this worked by adding a trailing comma to an object definition in my code to make sure I saw an error appear from eslint.
Now, following the guides for the eslint-plugin-angular, I have also installed eslint-config-angular and I see that the quickest way to get started is using the shareable config.
If I use the extends angular config option in place of my current:
{
"extends": "angular"
}
I no longer get my error thrown for an unexpected trailing comma.
So, is there a way I can use both angular and eslint:recommended in the extends config option?
E.g:
{
"extends": ["angular", "eslint:recommended"]
}
(which I know does not work)
If not, does this mean I have to create a rules config object in my .eslintrc to mimic the recommended ones from eslint?
{
"extends": "angular",
"rules" : {
...
}
}
I can't speak to whether or not there was a code change between the time this SO article was entered but I am using "extends": ["eslint:recommended", "angular"] in my .eslintrc file and it is working fine. I have it at the same level as the "env" property.
My package.json file has eslint and eslint-plugin-angular versions 2.3.0 and 0.5.0, respectively.
If you are using TypeScript (like Angular2 is) you can use tslint.
There are eslint rules for tslint and tslint-microsoft-contrib from Microsoft.
Finally, there's a rule set for Angular2: codelyzer