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

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

Related

Deploy Nodejs to Heroku: Error with babel (es6)

I've got this error from the heroku console when deploying the app.
It work on local but fail to deploy.
SyntaxError: /tmp/build_4b397c70/.heroku/node/lib/node_modules/npm/docs/gatsby-browser.js: Support for the experimental syntax 'jsx' isn't currently enabled (7:10):
5 |
6 | export const wrapPageElement = ({ element, props }) => {
> 7 | return <Layout {...props} >{element}</Layout>
| ^
8 | }
9 |
Add #babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add #babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.
at Parser._raise (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:810:17)
at Parser.raiseWithData (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:803:17)
at Parser.expectOnePlugin (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:9982:18)
at Parser.parseExprAtom (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:11367:22)
at Parser.parseExprSubscripts (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10941:23)
at Parser.parseUpdate (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10921:21)
at Parser.parseMaybeUnary (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10899:23)
at Parser.parseExprOps (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10756:23)
at Parser.parseMaybeConditional (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10730:23)
at Parser.parseMaybeAssign (/tmp/build_4b397c70/node_modules/#babel/parser/lib/index.js:10693:21) {
loc: Position { line: 7, column: 9 },
pos: 209,
missingPlugin: [ 'jsx', 'flow', 'typescript' ],
code: 'BABEL_PARSE_ERROR'
}
package.json
{
"name": "xxx",
"version": "1.0.0",
"description": "xxx",
"main": "index.js",
"engines": {
"node": "14.x"
},
"scripts": {
"start": "npm run build && node ./dist/index.js",
"dev": "nodemon --exec babel-node ./index.js",
"build": "npm run clean && npm run build-babel",
"clean": "rm -rf dist && mkdir dist",
"build-babel": "babel . --out-dir dist --ignore node_modules"
},
"author": "tiavina-mika",
"license": "ISC",
"dependencies": {
"#babel/cli": "^7.14.3",
"#babel/core": "^7.14.3",
"#babel/preset-react": "^7.13.13",
"bcrypt": "^5.0.1",
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"dotenv": "^9.0.2",
"express": "^4.17.1",
"express-mongo-sanitize": "^2.1.0",
"express-validation": "^3.0.8",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.12.10"
},
"devDependencies": {
"#babel/node": "^7.14.2",
"#babel/plugin-transform-runtime": "^7.14.3",
"#babel/polyfill": "^7.12.1",
"#babel/preset-env": "^7.14.2",
"#babel/runtime": "^7.14.0",
"nodemon": "^2.0.7"
}
}
.babelrc
{
"presets": ["#babel/preset-env"],
"plugins": [
["#babel/transform-runtime"]
]
}
I added #babel/preset-react to the 'presets' section of the babel config and still got the same error
NOTE: it's a simple nodejs server api not a react one, but the error suggest the use of preset-react.
I've had same problems with Heroku when generate build directory. You change directory input to other (for example src).
I share you my builder and start script:
"prebuild": "rm -rf ./dist",
"build": "babel ./src -d ./dist --ignore node_modules,test",
"prestart": "npm run build",
"start": "pm2-runtime start ./dist/index.js"

npm package babel error in my own package

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

Why does heroku search in the app/build/index.js folder?

I have the problem that Heroku searches in the folder app/build/index.js for my index.js but this is wrong. That is why I get this error: 1
My folder structure looks like this: 2
My package.json:
"name": "market-research-tool",
"version": "1.0.0",
"description": "",
"main": "./build/index.js",
"scripts": {
"start": "node ./build/index.js",
"dev": "nodemon server.ts",
"build": "tsc",
"heroku-postbuild": "cd client && npm install && npm run build"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"mongoose": "^5.9.13",
"nodemon": "^2.0.4",
"ts-node": "^8.10.2",
"typescript": "^3.9.5"
},
"devDependencies": {
"#types/express": "^4.17.6",
"#types/mongoose": "^5.7.16",
"#types/node": "^14.0.13"
}
}
My Procfile:
web: node ./build/index.js
How can I solve this problem?

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.

I get an error when I try to install my project packages with npm i

I was getting error installing expressJs to my packages. I have had to do an npm cache clean --force no sucess, then I deleted my node_modules and package-lock.json, I try to reinstall packages using npm i I still got an error.
Now I deleted node.js from my pc windows 10 and downloaded and installed the latest node and tried to reinstall the project packages again. Now the error I get is this
$ npm i
npm ERR! Unexpected end of JSON input while parsing near '...ncies":{"autoprefixer'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Chioma Onyepere\AppData\Roaming\npm-cache\_logs\2019-05-28T20_26_29_676Z-debug.log
My app is built on nextJs
Here's the package.json
{
"name": "ratethis",
"version": "1.0.2",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"build": "next build",
"now-build": "next build",
"start": "next start -p %PORT%"
},
"repository": {
"type": "git",
"url": "git+https://github.com/infinity-web-development/ratethis"
},
"keywords": [],
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/infinity-web-development/ratethis/issues"
},
"homepage": "https://github.com/infinity-web-development/ratethis#readme",
"dependencies": {
"#zeit/next-css": "^1.0.1",
"antd": "^3.15.1",
"faker": "^4.1.0",
"next": "^8.0.3",
"next-images": "^1.1.1",
"next-redux-wrapper": "^3.0.0-alpha.2",
"now": "^15.0.6",
"prop-types": "^15.7.2",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-polls": "^1.2.0",
"react-redux": "^7.0.1",
"redux": "^4.0.1",
"redux-saga": "^1.0.2",
"shallow-equal": "^1.1.0",
"uuid": "^3.3.2"
},
"devDependencies": {
"babel-eslint": "^10.0.1",
"babel-plugin-import": "^1.11.0",
"babel-plugin-inline-import": "^3.0.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-standard": "^4.0.0",
"next-antd-aza-less": "^1.0.2"
}
}
I had to delete all of npm-cache directly from my windows 10 pc, from %AppData%, ie ~/AppData\Roaming\npm-cache. Everything works fine now.

Categories