Facing `Cannot find module '#babel/plugin-transform-react-jsx'` while building - babeljs

I'm facing the following error while building my (previously working) app with bitbucket pipeline:
...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
└─ babel-core#6.26.3
Done in 22.08s.
🚨 /opt/atlassian/pipelines/agent/build/src/index.js: Cannot find module '#babel/plugin-transform-react-jsx'
at Function.Module._resolveFilename (module.js:470:15)
at Function.Module._load (module.js:418:25)
at Module.require (module.js:498:17)
at require (/opt/atlassian/pipelines/agent/build/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at /opt/atlassian/pipelines/agent/build/node_modules/parcel-bundler/lib/transforms/babel/jsx.js:51:22
at Generator.next (<anonymous>)
at asyncGeneratorStep (/opt/atlassian/pipelines/agent/build/node_modules/#babel/runtime/helpers/asyncToGenerator.js:3:24)
at _next (/opt/atlassian/pipelines/agent/build/node_modules/#babel/runtime/helpers/asyncToGenerator.js:25:9)
npm info lifecycle parcel-react#1.0.0~build: Failed to exec build script
npm ERR! Linux 4.14.63-coreos
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v7.10.1
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! parcel-react#1.0.0 build: `parcel build index.html --public-url ./`
npm ERR! Exit status 1
...
My package.json's script and dependency related lines look like this:
"scripts": {
"start": "parcel index.html",
"build": "parcel build index.html --public-url ./",
"deploy": "firebase deploy --token $FIREBASE_TOKEN"
},
...
"dependencies": {
"axios": "^0.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"classnames": "^2.2.6",
"firebase": "^5.5.7",
"immutable": "^3.8.2",
"lodash": "^4.17.10",
"mark-twain": "^2.0.3",
"node-sass": "^4.7.2",
"parcel-plugin-markdown": "^0.3.1",
"react": "^0.14.0 || ^15.0.0-0 || ^16.0.0-0",
"react-dom": "^16.2.0",
"react-iframe": "^1.3.3",
"react-redux": "^5.0.7",
"react-router-dom": "^4.3.1",
"redux": "^2.0.0 || ^3.0.0 || ^4.0.0-0",
"redux-actions": "^2.6.1",
"redux-axios-middleware": "^4.0.0",
"simple-markdown": "^0.4.2",
"slate": "^0.38.1",
"slate-plain-serializer": "^0.6.0",
"slate-react": "^0.16.1"
},
"devDependencies": {
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"firebase-tools": "^3.19.3",
"parcel-bundler": "^1.5.1"
}
Does anyone have an idea what causes this error, and originated from which dependency? I tried to remove all the babel dependencies, just for testing it but still got the error.

In bitbucket, click into the pipelines and in the top right you can access the caches, there you can clear the node_modules cache and rerun again, it should build

Using yarn in the pipeline instead of npm solved the problem. I used yarn in the developement anyways.

Related

how to solve this issue connection_string.ts in nodeModule and run npm install?

I am trying to run npm install so I can do yarn start to deploy the project to AWS but it gives me an error. Anyone here can help me understand what is going on and how to solve it?
this is image for problems I have to this issue:
https://drive.google.com/file/d/1sgxCvaVa-mR7HBb3G8o1PU8pi3dydjS3/view?usp=sharing
The Error output here:
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path /Users/youmnasalloum/.npm/_cacache/tmp/git-cloneG2Tj0m/package.json
npm ERR! errno -2
npm ERR! enoent ENOENT: no such file or directory, open '/Users/youmnasalloum/.npm/_cacache/tmp/git-cloneG2Tj0m/package.json'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/youmnasalloum/.npm/_logs/2022-04-04T10_05_54_917Z-debug-0.log
The package.json content here:
{
"name": "user",
"version": "1.0.0",
"main": "index.ts",
"repository": "https://github.com/ArtistCrowdfundExchange/user",
"author": "Oghogho Odemwingie",
"license": "MIT",
"devDependencies": {
"#types/bcrypt": "^3.0.0",
"#types/node": "^17.0.13",
"typescript": "4.5.5"
},
"scripts": {
"start": "ts-node index.ts",
"test": "echo no tests yet"
},
"dependencies": {
"#aws-sdk/client-s3": "^3.41.0",
"#grpc/grpc-js": "^1.3.7",
"aws4": "^1.11.0",
"bcrypt": "^5.0.0",
"cuid": "^2.1.8",
"jose": "3",
"mongodb": "^4.4.1",
"mongodb-connection-string-url": "^2.5.2",
"mongojs": "^3.1.0",
"mongoose": "6.1.8",
"nanoid": "^3.1.29",
"next-auth": "^4.3.1",
"proto": "git+https://github.com/ArtistCrowdfundExchange/proto#playground",
"ts-node": "^10.4.0",
"winston": "^3.3.3"
}
}

How to deploy npm project to gh-pages

I'm trying to deploy a website to gh-pages using npm. I'm using blain HTML and CSS and asynchronous javascript. I haven't used any SPA framework (react or angular).
I'm currently using lite server for development purposes and gh-pages package.
I'm trying to deploy the src folder using the following command
npm run deploy
it fails because the build script is not specified.
my question is what should I write in the build script?
when I try to run npm run deploy it displays the following error
'src' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! AmrAhmed#1.0.0 build: `src`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the AmrAhmed#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Amr\AppData\Roaming\npm-cache\_logs\2020-05-30T11_30_29_824Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! AmrAhmed#1.0.0 predeploy: `npm run build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the AmrAhmed#1.0.0 predeploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Amr\AppData\Roaming\npm-cache\_logs\2020-05-30T11_30_29_869Z-debug.log
in similar projects using react, the build script has the following react-scripts build
this is my package.json file
{
"name": "AmrAhmed",
"version": "1.0.0",
"description": "",
"main": "truffle.js",
"directories": {
"test": "test"
},
"scripts": {
"dev": "lite-server",
"test": "echo \"Error: no test specified\" && exit 1",
"build": "src",
"predeploy": "npm run build",
"deploy": "gh-pages -d src"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gh-pages": "^3.0.0",
"lite-server": "^2.5.4"
}
}
election folder content
src folder content
I found out that you don't need the build script or the pre-deploy script. they are unnecessary to be used, since my website is static, I can navigate directly to the build folder and it will work fine.
I have modified the config.json file to be as in the following
{
"name": "AmrAhmed",
"version": "1.0.0",
"description": "",
"main": "truffle.js",
"directories": {
"test": "test"
},
"scripts": {
"dev": "lite-server",
"test": "echo \"Error: no test specified\" && exit 1",
"deploy": "gh-pages -d src"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gh-pages": "^3.0.0",
"lite-server": "^2.5.4"
}
}
run the command
npm run build
and it will be deployed to Github pages.
you should also add "homepage":"https://yourGithub.github.io/your-repo" above "name" in the package.json

npm run build error for bootstrap4 UI Framework Web project

Please I need some help here.
After I type npm run build to my terminal of windows 10, I get the following errors:
'imagemin' is not recognized as an internal or external command,
operable program or batch file. npm ERR! code ELIFECYCLE npm ERR!
errno 1 npm ERR! confusion#1.0.0 imagemin: imagemin img/* -o
dist/img npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the
confusion#1.0.0 imagemin script. npm ERR! This is probably not a
problem with npm. There is likely additional logging output above. npm
ERR! A complete log of this run can be found in: npm ERR!
C:\Users\ndunga\AppData\Roaming\npm-cache_logs\2017-10-19T16_46_04_328Z-debug.log
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! confusion#1.0.0
build: npm run clean && npm run copyfonts && npm run imagemin && npm
run usemin npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the
confusion#1.0.0 build script. npm ERR! This is probably not a problem
with npm. There is likely additional logging output above. npm ERR! A
complete log of this run can be found in: npm ERR!
C:\Users\ndunga\AppData\Roaming\npm-cache_logs\2017-10-19T16_46_04_381Z-debug.log
Here is my package.json file
{
"name": "confusion",
"version": "1.0.0",
"description": "This is a website for Ristorante Con Fusion",
"main": "index.html",
"scripts": {
"start": "npm run watch:all",
"test": "echo \"Error: no test specified\" && exit 1",
"lite": "lite-server",
"scss": "node-sass -o css/ css/",
"watch:scss": "onchange \"css/*.scss\" -- npm run scss",
"watch:all": "parallelshell \"npm run watch:scss\" \"npm run lite\"",
"clean": "rimraf dist",
"copyfonts": "copyfiles -f node_modules/font-awesome/fonts/* dist/fonts",
"imagemin": "imagemin img/* -o dist/img",
"usemin": "usemin contactus.html -d dist --htmlmin -o dist/contactus.html && usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html && usemin index.html -d dist --htmlmin -o dist/index.html",
"build": "npm run clean && npm run copyfonts && npm run imagemin && npm run usemin"
},
"author": "",
"license": "ISC",
"devDependencies": {
"cssmin": "^0.4.3",
"htmlmin": "0.0.7",
"lite-server": "^2.2.2",
"node-sass": "^4.5.3",
"onchange": "^3.2.1",
"parallelshell": "^3.0.2",
"rimraf": "^2.6.2",
"uglifyjs": "^2.4.11",
"usemin-cli": "^0.5.1"
},
"dependencies": {
"bootstrap": "^4.0.0-alpha.6",
"font-awesome": "^4.7.0"
}
}
You don't have imagemin package installed.
npm install imagemin --save
install imagemin-cli and use it like "imagemin": "imagemin img/ --out-dir=dist/img" in package.json
This works for me (Windows 10):
Open index.js file (path: \Bootstrap4\conFusion\node_modules\parallelshell\index.js)
At line 105, instead of "cwd: process.versions.node", change to "cwd: parseInt(process.versions.node)"

Error to run IONIC 2 project

I have download project from project tutorial. I am trying to run this ionic 2 app using ionic serve.I got the error as bellow. How can i solve this error?
G:\alka\ionic-conference-app-master\ionic-conference-app-master>ionic serve
> ionic-conference-app#0.0.0 ionic:serve G:\alka\ionic-conference-app-master\ionic-conference-app-master
> ionic-app-scripts serve "--v2" "undefined" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"
module.js:597
return process.dlopen(module, path._makeLong(filename));
^
Error: %1 is not a valid Win32 application.
\\?\G:\alka\ionic-conference-app-master\ionic-conference-app-master\node_modules\node-sass\vendor\win32-x64-48\binding.node
at Error (native)
at Object.Module._extensions..node (module.js:597:18)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at module.exports (G:\alka\ionic-conference-app-master\ionic-conference-app-master\node_modules\node-sass\lib\binding.js:19:10)
at Object.<anonymous> (G:\alka\ionic-conference-app-master\ionic-conference-app-master\node_modules\node-sass\lib\index.js:14:35)
at Module._compile (module.js:570:32)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ionic-conference-app#0.0.0 ionic:serve: `ionic-app-scripts serve "--v2" "undefined" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ionic-conference-app#0.0.0 ionic:serve script 'ionic-app-scripts serve "--v2" "undefined" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ionic-conference-app package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ionic-app-scripts serve "--v2" "undefined" "--address" "0.0.0.0" "--port" "8100" "--livereload-port" "35729"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs ionic-conference-app
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls ionic-conference-app
npm ERR! There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Patoliya-1\AppData\Roaming\npm-cache\_logs\2017-04-27T05_55_17_136Z-debug.log
There was an error serving your Ionic application: There was an error with the spawned command: serve
bellow is my 'package.json' file,
"dependencies": {
"#angular/common": "4.0.2",
"#angular/compiler": "4.0.2",
"#angular/compiler-cli": "4.0.2",
"#angular/core": "4.0.2",
"#angular/forms": "4.0.2",
"#angular/http": "4.0.2",
"#angular/platform-browser": "4.0.2",
"#angular/platform-browser-dynamic": "4.0.2",
"#ionic-native/core": "3.5.0",
"#ionic-native/in-app-browser": "3.5.0",
"#ionic-native/splash-screen": "3.5.0",
"#ionic-native/status-bar": "3.5.0",
"#ionic/storage": "2.0.1",
"ionic-angular": "3.1.0",
"ionicons": "3.0.0",
"rxjs": "5.1.1",
"sw-toolbox": "3.4.0",
"zone.js": "^0.8.5"
},
"devDependencies": {
"#ionic/app-scripts": "1.3.5",
"typescript": "~2.2.1"
},
"config": {}
You need to run npm i before running the project.That will install all the node modules which are needed for your project.
Can you please try updating the Ionic CLI?
npm uninstall -g ionic
npm install -g ionic
ionic -v
Let me know if that fixes it!

Use firebase with Ionic 2

I want to use firebase with Ionic 2. I got stuck with a tutorial because of the recent version of Ionic2. The github page says the following:
UPDATE MAY 14th 2016: Firebase AngularFire2 has been updated to work with the latest version of Angular2 and Ionic2 has not so this will only work if you load the specific version of AngularFire2 with your application
"angular2": "2.0.0-beta.13",
"angularfire2": "^2.0.0-alpha.16",
I think i have to edit my package.json file but i don't know how?
EDIT: this is my package.json file after editing:
{
"dependencies": {
"#angular/common": "2.0.0-rc.4",
"#angular/compiler": "2.0.0-rc.4",
"#angular/core": "2.0.0-rc.4",
"#angular/platform-browser": "2.0.0-rc.4",
"#angular/platform-browser-dynamic": "2.0.0-rc.4",
"#angular/http": "2.0.0-rc.4",
"#angular/forms": "0.2.0",
"es6-shim": "0.35.1",
"ionic-angular": "2.0.0-beta.13",
"ionic-native": "1.3.10",
"ionicons": "3.0.0",
"reflect-metadata": "0.1.8",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12",
"angular2": "2.0.0-beta.13", <--- added this one
"angularfire2": "^2.0.0-alpha.16" <--- and this
},
"devDependencies": {
"del": "2.2.0",
"gulp": "3.9.1",
"gulp-watch": "4.3.5",
"ionic-gulp-browserify-typescript": "2.0.0",
"ionic-gulp-fonts-copy": "^1.0.0",
"ionic-gulp-html-copy": "^1.0.0",
"ionic-gulp-sass-build": "^1.0.0",
"ionic-gulp-scripts-copy": "^2.0.0",
"ionic-gulp-tslint": "^1.0.0",
"tslint-ionic-rules": "0.0.4",
"run-sequence": "1.1.5"
},
"name": "devdactic-firebase",
"description": "devdactic-firebase: An Ionic project",
"cordovaPlugins": [
"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-statusbar",
"ionic-plugin-keyboard"
],
"cordovaPlatforms": []
}
When i type npm install i get this error:
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "install"
npm ERR! node v6.5.0
npm ERR! npm v3.10.3
npm ERR! No compatible version found: ionic-angular#2.0.0-beta.13
npm ERR! Valid install targets:
npm ERR! 2.0.0-beta.9-201606271842,etc.....
npm ERR!
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\s_a_m\Desktop\angular-tutorial\ionic\devdactic-firebase\npm-debug.log
Thanks in advance!
If you know the angularFire version you want, you can just change it in the package.json file
"angularfire2": "^xxxVersion"
Then to be sure you can delete your node_modules folder, and re-run in your terminal npm install.
To read more on npm package click here
I am working with firebase but with the version of ionic 2.2.3, try to use it because for me it works perfect.