I learnt how to use promises in a browser but when I want to use it in my node.js it throw error.
var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(url) {
^
ReferenceError: regeneratorRuntime is not defined
node version
v10.4.1
I use babel for export and import syntax with settings like here in starting file
require('babel-register')({
presets: [ 'env' ]
})
babel-polyfill is required. You must also install it in order to get async/await working.
Here explain better Babel 6 regeneratorRuntime is not defined
I was unable to use async/await and for me this worked out.
In your babel file include this.
presets: [
[
"#babel/preset-env",
{
"targets": {
"node": "10"
}
}
] ]
Presumably you are trying to use async / await syntax? You will need to install transform-async-to-generator plugin and include it in your Babel config
require('babel-register')({
presets: ['env'],
plugins: ['transform-async-to-generator']
})
Related
Project setup:
Vuejs 3
Webpack 4
Babel
TS
We created the project using vue-cli and add the dependency to the library.
We then imported a project (Vue Currency Input v2.0.0) that uses optional chaining. But we get the following error while executing the serve script:
error in ./node_modules/vue-currency-input/dist/index.esm.js
Module parse failed: Unexpected token (265:36)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| getMinValue() {
| let min = this.toFloat(-Number.MAX_SAFE_INTEGER);
> if (this.options.valueRange?.min !== undefined) {
| min = Math.max(this.options.valueRange?.min, this.toFloat(-Number.MAX_SAFE_INTEGER));
| }
I read that Webpack 4 doesn't support optional chaining by default. So, we added the Babel plugin for optional chaining. This is our babel.config.js file:
module.exports = {
presets: ["#vue/cli-plugin-babel/preset"],
plugins: ["#babel/plugin-proposal-optional-chaining"],
};
(But, if I am correct, this plugin is now enable by default in the babel-preset. So this modification might be useless ^^)
One thing that I don't understand is that we can use optional chaining in the .vue files.
I created a SandBox with all the files: SandBox
How could I solve this error?
I was able to overcome this issue using #babel/plugin-proposal-optional-chaining, but for me the only way I could get Webpack to use the Babel plugin was to shove the babel-loader configuration through the Webpack options in vue.config.js. Here is a minimal vue.config.js:
const path = require('path');
module.exports = {
chainWebpack: config => {
config.module
.rule('supportChaining')
.test(/\.js$/)
.include
.add(path.resolve('node_modules/PROBLEM_MODULE'))
.end()
.use('babel-loader')
.loader('babel-loader')
.tap(options => ({ ...options,
plugins : ['#babel/plugin-proposal-optional-chaining']
}))
.end()
}
};
NB replace "PROBLEM_MODULE" in the above with the module where you have the problem.
Surprisingly I did not need to install #babel/plugin-proposal-optional-chaining with NPM. I did a go/no-go test with an app scaffolded with #vue/cli 4.5.13, in my case without typescript. I imported the NPM module that has been causing my grief (#vime/vue-next 5.0.31 BTW), ran the serve script and got the Unexpected token error on a line containing optional chaining. I then plunked the above vue.config.js into the project root and ran the serve script again, this time with no errors.
My point is it appears this problem can be addressed without polluting one's development environment very much.
The Vue forums are in denial about this problem, claiming Vue 3 supports optional chaining. Apparently not, however, in node modules. A post in this thread by atflick on 2/26/2021 was a big help.
Had same issue with Vue 2 without typescript.
To fix this you need to force babel preset to include optional chaining rule:
presets: [
[
'#vue/cli-plugin-babel/preset',
{
include: ['#babel/plugin-proposal-optional-chaining'],
},
],
],
Can also be achieved by setting old browser target in browserslist config.
Most importantly, you need to add your failing module to transpileDependencies in vue.config.js:
module.exports = {
...
transpileDependencies: ['vue-currency-input],
}
This is required, because babel by default will exclude all node_modules from transpilation (mentioned in vue cli docs), thus no configured plugins will be applied.
I had a similar problem. I'm using nuxt but my .babelrc file looks like the below, and got it working for me.
{
"presets": [
["#babel/preset-env"]
],
"plugins":[
["#babel/plugin-transform-runtime",
{
"regenerator": true
}
]
],
"env": {
"test": {
"plugins": [
["transform-regenerator", {
"regenerator": true
}],
"#babel/plugin-transform-runtime"
],
"presets": [
["#babel/preset-env", {
"useBuiltIns": false
}]
]
}
}
}
I managed to fix the solution by adding these lines to package.json:
...
"scripts": {
"preinstall": "npx npm-force-resolutions",
...
},
"resolutions": {
"acorn": "8.0.1"
},
...
this is a ionic angular project that i'm working on, i'm using ng-lazyload-image plugin Link. when i start compiling it showing errors like this.
Error: ./node_modules/ng-lazyload-image/fesm2015/ng-lazyload-image.mjs 401:10-19
Can't import the named export 'Directive' from non EcmaScript module (only default export is available)
This means your bundler resolves .mjs files, however it doesn't know that they are ESM modules. On webpack, you can add the following to rules.
webpack.config.js (in project root)
module.exports = {
configureWebpack: {
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
}
]
}
}
}
https://webpack.js.org/configuration/
EDIT: Found a solution for craco.config.js
module.exports = {
webpack: {
configure: (webpackConfig) => {
webpackConfig.module.rules.push({
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
});
return webpackConfig;
},
plugins: [
// Inject the "__DEV__" global variable.
new webpack.DefinePlugin({
__DEV__: process.env.NODE_ENV !== "production",
})
],
},
};
The answer of #Joosep.P works, but for someone with laravel and webpackmix the following is the way to go. In webpack.mix.js file add the following:
mix.webpackConfig({
module: {
rules: [
{
test: /\.mjs$/,
include: /node_modules/,
type: "javascript/auto"
}
]
}
});
Just posting it as another answer as it may help someone else or me to find the solution with laravel and webpackmix easily in the future. Thanks.
It probably has to do with different Angular versions.
If ng-lazyload-image is using Angular 13 and your own project is using a lower version this will happen. There are some breaking changes since Angular 13.
If ng-lazyload-image is using Angular 13 there are no es2015 files generated for it's npm package and your compiler is still looking for them.
An option to solve this would be to use a lower version of the ng-lazyload-image package or update your own Angular to Angular 13+
By default Nuxt generates (by 'nuxt generate') code, which is incompatible with the ES5-standard.
How can I correct it?
What exactly needs to be written in nuxt.config.js so that everything is correct? I know that these are some presets for Babel, but I don't know which ones
Thank you!
upd.: Nuxt generated code with 'const' instead 'var' - it is NOT 'ES5 compatible code', isn't it?
I believe Nuxt generates ES5 compatible code by default, but if you need to change browser target you can use the following:
build: {
babel: {
presets: [
[
require.resolve("#nuxt/babel-preset-app"),
{
browsers: ["IE 11", "last 2 version"]
}
]
];
}
}
For what you can use in browsers property, refer to browserslist documentation.
Problem was in Quasar.js connected as Nuxt-plugin (Node-CLI module).
This resolve it:
in nuxt.config.js:
build: {
transpile: [
'quasar',
],
}
I am not able to setup babel correctly for the usage of async / await.
I am using babel 7 and webpack 4.
I do not want to use babel-polyfill if possible!
My babelrc file:
{
"presets": [[
"#babel/env",
{"modules": false}
]],
"plugins": [
"syntax-dynamic-import",
"transform-async-to-generator"
]
}
Code:
async function init() {
const loaderData = await initLoader();
initCmp(loaderData)
.then(initApi(loaderData.key))
.catch();
}
init();
And Error:
refactor.main.js:18 Uncaught ReferenceError: regeneratorRuntime is not defined
at eval (refactor.main.js:18)
at eval (refactor.main.js:47)
at Object../client/refactor.main.js (cmp.bundle.js:312)
at __webpack_require__ (cmp.bundle.js:62)
at eval (main.js:6)
at Object../client/main.js (cmp.bundle.js:300)
at __webpack_require__ (cmp.bundle.js:62)
at cmp.bundle.js:179
at cmp.bundle.js:182
The latest documentation here is pretty clear:
https://babeljs.io/docs/en/next/babel-plugin-transform-runtime
What worked for me is installing the two packages for build and for runtime (the final script for the browser):
npm install --save-dev #babel/plugin-transform-runtime
npm install --save #babel/runtime
In the plugin Array of my webpack configuration I just added '#babel/plugin-transform-runtime' without any options. (Please also have a look at the documentation linked above, since some options (that you might find in older tutorials or answers) have been removed.)
plugins: [
'#babel/plugin-transform-runtime'
]
I now can use async functions without errors, and it didn't add much code in the production build.
You also need the transform-runtime plugin, so your .babelrc should ready:
{
"presets": [[
"#babel/env",
{"modules": false}
]],
"plugins": [
"syntax-dynamic-import",
"transform-runtime",
"transform-async-to-generator"
]
}
Note that you'll also need to npm install --save-dev transform-runtime
I am using JSDOC and all it supported npm plugins to create nice documentation. Getting hard time when jsdoc is running and parsing JSX file it always throws error as below near = sign
SyntaxError: unknown: Unexpected token
export default class SaveDesign extends Component {
static displayName = 'SaveDesign';
}
conf.json file
{
"source": {
"include": [ "src/app/test.js", "src/app/components/Modals/Template/SaveDesign.jsx"],
"exclude": [ "src/fonts", "src/icons", "src/less", "src/vector-icon" ],
"includePattern": ".+\\.js(doc|x)?$",
"excludePattern": "(^|\\/|\\\\)_"
},
"plugins": ["node_modules/jsdoc-babel"],
"babel": {
"extensions": ["js", "es6", "jsx"],
"presets": ["es2015"]
},
"jsx": {
"extensions": ["js", "jsx"]
}
}
Class properties aren't part of the ES2015 spec, so they're not part of the ES2015 Babel preset either. The proposal to add class properties to the language is currently at Stage 3 of the standardization process, so you need the Stage 3 preset.
https://babeljs.io/docs/plugins/preset-stage-3/
Alternatively, you could just install the class properties plugin on its own:
https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
As stage-2 , stage-3 or any other stage preset are removed in babel 7 or newer so you have to add plugin separately.
Please use "require()" for importing plugin otherwise it wont work.
Here is the .bablerc file -
module.exports = {
plugins: [
[require("#babel/plugin-proposal-class-properties"), { loose: false }]
],
presets: ["#babel/preset-env", "#babel/preset-react"]
};
#Joe thanks yes the plugin which you mentioned will help to solve the problem. In my case the way I solved it was by making sure to have all .babelrc dependency copied to jsdoc babel property as well I was missing this piece which was giving me all the errors.