We Keep Coding

cannot find module '#babel/preset-env' NPM

Hello I am trying to do some coding and it seems something offed my package.json so bad even on a vscode restart it still won't find the preset-env its looking for.
here's what I've tried.
npm uninstall #babel/core #babel/preset-env #babel/preset-react
npm install #babel/core #babel/preset-env #babel/preset-react
blowing away the entire project and starting fresh and to no avail none of it has worked.
looking at my package.json
{
"name": "peek-me",
"private": true,
"version": "1.0.0",
"description": "",
"main": "package.json",
"license": "UNLICENSED",
"scripts": {
"start": "sanity start",
"build": "sanity build"
},
"keywords": [
"sanity"
],
"dependencies": {
"#babel/preset-react": "^7.18.6",
"#sanity/base": "^2.35.0",
"#sanity/core": "^2.35.0",
"#sanity/default-layout": "^2.35.0",
"#sanity/default-login": "^2.35.0",
"#sanity/desk-tool": "^2.35.1",
"#sanity/eslint-config-studio": "^2.0.0",
"#sanity/vision": "^2.35.0",
"eslint": "^8.6.0",
"prop-types": "^15.7",
"react": "^17.0",
"react-dom": "^17.0",
"styled-components": "^5.2.0"
},
"devDependencies": {
"#babel/core": "^7.19.6",
"#babel/preset-env": "^7.19.4",
"webpack-cli": "4.10.0"
}
}
I'm really stumped as to why this is all of a sudden an issue

VSCode: No auto-suggestion while importing modules in node express app

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.

SyntaxError: Support for the experimental syntax 'decorators-legacy' isn't currently enabled

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

regeneratorRuntime is not defined when using async/await

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.

#babel/plugin-proposal-class-properties doesn't work

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/*"
]
};