I am getting a
"regeneratorRuntime is not defined"
when trying to use async/await in a project.
My babelrc file is this currently:
{
"presets": ["env", "react"],
"plugins": [
"transform-runtime",
"transform-object-rest-spread"
]
}
and my package.json is:
{
"name": "****",
"version": "1.0.0",
"description": "****",
"main": "index.js",
"author": "****",
"license": "UNLICENSED",
"private": true,
"scripts": {
"start": "yarn build && nodemon server/index.js --ignore dist/ --ignore public/",
"watch": "parcel watch public/index.html --public-url /",
"build": "parcel build public/index.html --public-url /",
"test": "jest"
},
"dependencies": {
"#babel/runtime": "^7.5.5",
"axios": "^0.19.0",
"express": "^4.17.1",
"express-validator": "^6.1.1",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"super-reset-css": "^1.0.5"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"jest": "^24.8.0",
"nodemon": "^1.14.11",
"parcel-bundler": "^1.5.1",
"sass": "^1.22.9"
}
}
I'm sort of new to configuring babel so not sure what to do here.
I fixed a similar problem using the following post
Try the following in .babelrc:
{
"presets": ["#babel/preset-env"],
"plugins": [
"#babel/plugin-transform-runtime"
],
...
with the following dev dependencies:
#babel/plugin-transform-runtime #babel/runtime
I think it is because you are using #babel/runtime.
My set up is #babel/runtime, #babel/core, #babel/plugin-transform-runtime and in the .bablerc set
"plugins": ["#babel/transform-runtime"]
I hope this helps.
Related
I am using babel, eslint, and prettier for Node Rest API. To use absolute path I am using a package called babel-plugin-module-resolver but when I do use ES6 imports, I noticed that there is no auto suggestions. However, when I use relative path, everything seems to work perfectly fine.
Relative Path (Desired behavior with ES6 import and Absolute path)
Absoulte Path (No suggestions)
Here are my configuration files
1. package.json
{
"name": "prod-js-starter",
"version": "1.0.0",
"description": "Production level starter for node.js based express RESTFull APIs",
"main": "src/server.js",
"keywords": [],
"author": "",
"license": "ISC",
"scripts": {
"build": "npm run clean && babel ./src --out-dir build --copy-files",
"start": "NODE_ENV=production node build/server.js",
"dev": "nodemon --exec babel-node src/server.js",
"clean": "rm -rf build"
},
"dependencies": {
"dotenv": "^16.0.0",
"express": "^4.17.3",
"module-alias": "^2.2.2"
},
"devDependencies": {
"#babel/cli": "^7.17.6",
"#babel/core": "^7.17.9",
"#babel/node": "^7.16.8",
"#babel/preset-env": "^7.16.11",
"babel-plugin-module-resolver": "^4.1.0",
"eslint": "^8.13.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.5.0",
"eslint-import-resolver-babel-module": "^5.3.1",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-prettier": "^4.0.0",
"nodemon": "^2.0.15",
"prettier": "^2.6.2"
}
}
2. eslint.json
{
"env": {
"es2021": true
},
"extends": ["airbnb-base", "prettier"],
"parserOptions": {
"ecmaVersion": "latest"
},
"rules": {
// "func-names": "off",
"prettier/prettier": "error",
"no-unused-vars": "warn",
"no-console": "warn"
},
"plugins": ["prettier"],
"settings": {
"import/resolver": {
"babel-module": {}
}
}
}
3. .babelrc
{
"presets": ["#babel/preset-env"],
"plugins": [
[
"module-resolver",
{
"root": ["."],
"alias": {
"#src": "./src"
}
}
]
]
}
Please help me to get those suggestions working like before. Its a simple feature but quite efficient.
I'm trying to create a npm package and
below is my package.json
{
"name": "********",
"version": "1.0.0",
"description": "*****************",
"keywords": [
"exit",
"intent"
],
"main": "dist/*********.js",
"module": "dist/********.es.js",
"umd:main": "dist/********.umd.js",
"files": [
"dist"
],
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"lint": "npm run prettier-eslint -- 'src/**/*.{js,json}'",
"build": "rollup -c",
"dev": "rollup -c -w",
"prettier-eslint": "prettier-eslint --write --no-semi --single-quote --no-bracket-spacing",
"changelog": "standard-version",
"size": "npx gzip-size-cli ./dist/exit-detect.js ",
"precommit": "lint-staged",
"prepush": "npm test",
"prepublish": "npm run build"
},
"lint-staged": {
"src/**/*.{js,json}": [
"npm run prettier-eslint"
]
},
"author": "Amaarshall Yaswankar",
"license": "MIT",
"dependencies": {
"lodash": "^4.17.21"
},
"devDependencies": {
"#babel/core": "^7.15.8",
"#babel/preset-env": "^7.15.8",
"#babel/preset-react": "^7.14.5",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-module-resolver": "^4.1.0",
"babel-preset-stage-2": "^6.24.1",
"eslint": "^7.32.0",
"eslint-config-standard": "^16.0.3",
"eslint-config-standard-jsx": "^10.0.0",
"eslint-import-resolver-node": "^0.3.6",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.24.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^5.1.0",
"eslint-plugin-react": "^7.26.1",
"eslint-plugin-standard": "^5.0.0",
"husky": "^7.0.2",
"lint-staged": "^11.2.0",
"prettier": "^2.4.1",
"prettier-eslint-cli": "^5.0.1",
"rollup": "^2.58.0",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-uglify": "^6.0.4",
"rollup-watch": "^4.3.1",
"standard-version": "^9.3.1",
"uglify-es": "^3.3.9"
},
"homepage": "https://github.com/********/*********#readme"
}
I'm using using rollup to build my package and below is the config file rollup.config.js
import resolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs'
import babel from 'rollup-plugin-babel'
import {uglify} from 'rollup-plugin-uglify'
import {minify} from 'uglify-es'
import fs from 'fs'
const pkg = JSON.parse(fs.readFileSync('./package.json'))
export default {
name: '*********',
input: 'src/********.js',
output: [
{format: 'es', file: pkg.module},
{format: 'cjs', file: pkg.main},
{format: 'umd', file: pkg['umd:main']}
],
plugins: [
resolve(),
commonjs(),
babel({
babelrc: false,
exclude: 'node_modules/**',
presets: [
[
'#babel/preset-env',
{
modules: false,
loose: true,
targets: {browsers: ['last 2 versions', '> 1%']}
}
],
'#babel/preset-react',
'babel-preset-stage-2'
],
plugins: ['external-helpers']
}),
uglify({}, minify)
]
}
Now that all the babel packages are updated, I have tried updating the things as per the new versions. But still I'm facing the below error when I run npm run build.
rollup v2.58.0
bundles src/exit-detect.js → dist/exit-detect.es.js, dist/exit-detect.js, dist/exit-detect.umd.js...
[!] (plugin babel) Error: Plugin/Preset files are not allowed to export objects, only functions.
Not sure why this is happening, need your help guys
Thanks in advance
I'm working on an electron app, using React on the front end and I'm attempting to use Jest for testing. However, when I try to run tests I get the following error:
SyntaxError: C:\Users\JimArmbruster\source\repos\cyborg_cloud_explorer\cyborg_cloud_explorer_gui\src\assets\custom_components\stylesheets\buttons.css: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (1:1):
> 1 | #import "../../fonts/fonts.css";
| ^
2 |
3 | :root {
4 | --cyborgBlue: #65c8cc;
at Parser._raise (node_modules/#babel/parser/src/parser/error.js:147:45)
at Parser.raiseWithData (node_modules/#babel/parser/src/parser/error.js:142:17)
at Parser.expectOnePlugin (node_modules/#babel/parser/src/parser/util.js:198:18)
at Parser.parseDecorator (node_modules/#babel/parser/src/parser/statement.js:424:10)
at Parser.parseDecorators (node_modules/#babel/parser/src/parser/statement.js:403:30)
at Parser.parseStatement (node_modules/#babel/parser/src/parser/statement.js:228:12)
at Parser.parseBlockOrModuleBlockBody (node_modules/#babel/parser/src/parser/statement.js:966:25)
at Parser.parseBlockBody (node_modules/#babel/parser/src/parser/statement.js:942:10)
at Parser.parseProgram (node_modules/#babel/parser/src/parser/statement.js:117:10)
at Parser.parseTopLevel (node_modules/#babel/parser/src/parser/statement.js:102:25)
I realize this question has been asked many times before but the most common solution is to add "["#babel/plugin-proposal-decorators", { "legacy": true }]" to the plugins section of my .babelrc file. Unfortunately that hasn't resolved the issue.
Here's my package.json file:
"name": "cyborg_cloud_explorer",
"version": "0.2.7",
"homepage": "./",
"author": "Cyborg Inc.",
"description": "Searchable, end-to-end encrypted cloud storage manager powered by Cyborg Stealth.",
"main": "public/electron.js",
"scripts": {
"start": "electron .",
"prestart": "npm run build",
"pack": "electron-builder --dir",
"dev": "concurrently \"npm run start-browser\" \"wait-on http://localhost:3000 && electron .\"",
"start-browser": "react-scripts start",
"eject": "react-scripts eject",
"ebuild": "npm run build && /node_modules/.bin/build",
"build": "react-scripts build",
"dist": "electron-builder",
"test": "jest __tests__/ --coverage",
"marge": "marge report.json",
"electron-dev": "concurrently \"BROWSER=none npm start\" \"wait-on http://localhost:3000 && electron .\"",
"electron-pack": "build --em.main=build/electron.js",
"preelectron-pack": "npm run build"
},
"dependencies": {
"#material-ui/core": "^4.12.3",
"aws4": "^1.11.0",
"axios": "^0.21.1",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-preset-env": "^1.7.0",
"base32": "0.0.6",
"convert-csv-to-json": "^1.3.1",
"convert-excel-to-json": "^1.7.0",
"dotenv": "^10.0.0",
"ffi-napi": "^3.0.1",
"franc-min": "^5.0.0",
"hyperquest": "^2.1.3",
"jssha": "^3.2.0",
"keytar": "^6.0.1",
"mammoth": "^1.4.17",
"mochawesome-report-generator": "^5.1.0",
"ndjson": "^2.0.0",
"nibbler": "^0.2.0",
"node-addon-api": "^3.1.0",
"node-html-parser": "^3.3.6",
"node-machine-id": "^1.1.12",
"node-tika": "0.0.1",
"react-beautiful-dnd": "^13.1.0",
"react-file-icon": "^1.0.0",
"react-hotkeys-hook": "^3.4.0",
"react-scripts": "^4.0.3",
"ref-napi": "^2.1.2",
"ref-struct-napi": "^1.1.1",
"version": "^0.1.2",
"xml2js": "^0.4.23"
},
"devDependencies": {
"#babel/core": "^7.1.0",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-proposal-decorators": "^7.1.0",
"#babel/plugin-transform-object-assign": "^7.1.0",
"#babel/plugin-transform-runtime": "^7.1.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-react": "^7.1.0",
"babel-loader": "^8.1.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"concurrently": "^6.0.2",
"dotenv": "^10.0.0",
"electron": "^9.4.3",
"electron-builder": "^22.9.1",
"electron-builder-squirrel-windows": "^22.10.4",
"electron-chromedriver": "^11.0.0",
"eslint": "^7.17.0",
"jest": "^26.6.0",
"mocha": "^8.2.1",
"mochawesome": "^6.2.1",
"node-key-sender": "^1.0.11",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"selenium-webdriver": "^4.0.0-beta.1",
"spectron": "^11.1.0",
"spectron-keys": "0.0.1",
"wait-on": "^5.3.0"
},
"build": {
"productName": "Cyborg Cloud Explorer",
"artifactName": "CloudExplorer",
"compression": "normal",
"forceCodeSigning": false,
"copyright": "Copyright 2020 Cyborg Inc., all rights reserved.",
"asarUnpack": [
"assets/cyborg_cloud_engine/linux/x64/cyborg_cloud_engine.so"
],
"extraResources": [
"assets/vs_redist/*"
],
"files": [
"src/assets/fonts/**/*",
"src/assets/media",
"src/assets/dictionaries",
"src/assets/cyborg_cloud_engine",
"src/pages/**/*",
"src/*",
"build/**/*"
],
"directories": {
"buildResources": "assets"
},
"win": {
"target": "squirrel",
"icon": "src/assets/media/cyborg.ico"
},
"linux": {
"target": "AppImage",
"icon": "./assets/media/256x256.png",
"executableName": "CloudExplorer",
"category": "Network",
"appId": "Cyborg.Cloud.Explorer"
},
"mac": {
"target": "dmg",
"icon": "./assets/media/cyborg.icns",
"appId": "com.cloud.explorer",
"category": "public.app-category.business"
},
"squirrelWindows": {
"iconUrl": "https://cyborg-cloud-explorer-assets.s3.amazonaws.com/cyborg.ico",
"loadingGif": "src/assets/media/installing_cyborg_cloud.gif"
}
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
And my .babelrc file:
"presets": ["#babel/preset-env", "#babel/preset-react"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
}```
Jest won't use the babel plugins out of the box, you need to install some additional packages.
With yarn:
yarn add --dev babel-jest babel-core regenerator-runtime
With npm:
npm install babel-jest babel-core regenerator-runtime --save-dev
Jest should then pick up the configuration from your .babelrc or babel.config.js.
Source: https://archive.jestjs.io/docs/en/23.x/getting-started.html#using-babel
I think I've found the issue. When I changed the name of my .babelrc file to babel.config.json. I didn't get that error anymore.
According to Babel's docs, .babelrc files are file-relative whereas babel.config.json files are project wide.
Here's where you can read more about it: https://babeljs.io/docs/en/config-files
I have created my own npm package but while using in a test application am getting the following error: Add #babel/plugin-transform-react-jsx to the 'plugins' section of your Babel config to enable transformation.
Note: I've written my component in JSX
package.json
{
"name": "my-test-package",
"version": "1.4.3",
"description": "Rich form fieds with simple and complex validation",
"main": "index.js",
"homepage": "https://github.com",
"url": "https://github.com/",
"license": "MIT",
"bugs": {
"url": "https://github.com/"
},
"scripts": {
"start": "webpack-dev-server --mode development --env --open --hot --port",
"build": "./node_modules/.bin/webpack --mode production"
},
"author": "Harish",
"contributors": [
"Harish"
],
"peerDependencies": {
"react": "^16.6.1",
"react-dom": "^16.6.3",
"prop-types": "^15.5.4"
},
"devDependencies": {
"#babel/core": "^7.8.4",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/preset-env": "^7.8.4",
"#babel/preset-react": "^7.8.3",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.6",
"webpack": "^4.41.6",
"webpack-cli": "^3.3.11"
}
}
.babelrc file:
{
"presets": ["#babel/preset-env","#babel/preset-react"],
"plugins": [
"#babel/plugin-proposal-class-properties"
]
}
Thanks in advance.
You need to add that to your .babelrc file, not package.json
I have such a project structure:
/main-folder
/apps
/app — // I want to import "project-b" here
/node_modules
/public
/src
|app.js
|app.css
|.babelrc
|package.json
|package-lock.json
|webpack.config.js
/static
/project-b — // Project that I want to export
/node_modules
/public
/src
/lib
...components
|.babelrc
|package.json
|package-lock.json
Everything okay when I try to import components without class properties.
But if I import component with class properties:
I thought if I add .babelrc it'll work (I added .babelrc to the app and project-b folders and it still doesn't work)
.babelrc:
{
"presets": ["#babel/preset-react","#babel/preset-env"],
"plugins": [
["#babel/plugin-proposal-class-properties", { "loose": true }]
]
}
app package.json:
{
"name": "auth",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"webpack": "webpack",
"start:dev": "webpack-dev-server",
"webpack:production": "webpack -p"
},
"author": "namename",
"license": "MIT",
"dependencies": {
"css-loader": "^1.0.1",
"entrl-ui-kit": "^1.0.3",
"file-loader": "^2.0.0",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-router-dom": "^4.3.1",
"react-transition-group": "^2.5.0",
"style-loader": "^0.23.1"
},
"devDependencies": {
"#babel/core": "^7.1.6",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/preset-env": "^7.1.6",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"webpack": "^4.26.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
project-b package.json:
{
"name": "project-b",
"version": "1.0.0",
"author": "namename",
"license": "MIT",
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist"
],
"scripts": {
"start": "react-scripts start",
"build-examples": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"build": "rimraf ./build && mkdirp ./build && babel -d ./build ./src"
},
"devDependencies": {
"#babel/cli": "^7.1.5",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.0-beta.6",
"babel-preset-latest": "^6.24.1",
"mkdirp": "^0.5.1",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-scripts": "^2.1.1",
"react-transition-group": "^2.5.0",
"rimraf": "^2.6.2"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"dependencies": {
"babel-core": "^7.0.0-bridge.0"
}
}
All I need to do is add babel.config.js to the root folder:
Thanks to loganfsmyth!
/main-folder
|babel.config.js — //HERE!
/apps
/app — // I want to import "project-b" here
/node_modules
/public
/src
|app.js
|app.css
|.babelrc
|package.json
|package-lock.json
|webpack.config.js
/static
/project-b — // Project that I want to export
/node_modules
/public
/src
/lib
...components
|.babelrc
|package.json
|package-lock.json
babel.config.js:
module.exports = {
babelrcRoots: [
".",
"static/project-b/*"
]
};