How to run babel-node on a Lerna monorepo? - javascript

I´m building my first monorepo using Lerna.
My lerna.json:
{
"lerna": "2.9.0",
"npmClient": "yarn",
"useWorkspaces": true,
"packages": [
"packages/*"
]
}
The lerna package.json is like:
{
"name": "monorepo",
"version": "1.0.0",
"workspaces": [
"packages/*"
],
"private": true,
"scripts": {
"start": "lerna exec -- start",
"server": "lerna exec -scope #monorepo/server -- server"
},
"devDependencies": {
"lerna": "^2.9.0"
}
}
And my project has the following package.json:
{
"name": "#monorepo/server",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "concurrently \"babel-node start-server\" \"babel-node start-auth-client\" \"babel-node start-editor-client\"",
"server": "nodemon --exec \"babel-node start-server.js\"",
"lint": "eslint ."
},
"dependencies": {
"#babel/cli": "^6.24.1",
"#babel/core": "^6.25.0",
"#babel/plugin-transform-runtime": "^6.23.0",
"#babel/preset-env": "^1.6.1",
"#babel/preset-es2017": "^6.24.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.17.2",
"connect-mongo": "^2.0.0",
"crypto": "^1.0.1",
"express": "^4.15.3",
"express-graphql": "^0.6.12",
"graphql": "^0.13.1",
"graphql-relay": "^0.5.4",
"jwt-simple": "^0.5.1",
"mongoose": "^5.0.10",
"morgan": "^1.8.2",
"nodemailer": "^4.6.0",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"path": "^0.12.7",
"validator": "^9.1.1"
},
"devDependencies": {
"concurrently": "3.5.1",
"eslint": "^4.18.2",
"eslint-config-airbnb": "16.1.0",
"eslint-plugin-import": "2.9.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.7.0",
"fs-extra": "^5.0.0",
"node-fetch": "^2.1.1",
"nodemon": "^1.11.0"
},
"babel": {
"presets": [
"#babel/es2017",
"#babel/preset-env"
],
"plugins": [
"transform-runtime"
]
}
}
My problem is running the server application, issuing one of the following commands:
$ yarn start
yarn run v1.5.1
$ concurrently "babel-node start-server" "babel-node start-auth-client" "babel-node start-editor-client"
[0] 'babel-node' Program is not recognized as an internal or external command, operable program or batch file.
[1] 'babel-node' Program is not recognized as an internal or external command, operable program or batch file.
[2] 'babel-node' Program is not recognized as an internal or external command, operable program or batch file.
[2] babel-node start-editor-client exited with code 1
[1] babel-node start-auth-client exited with code 1
[0] babel-node start-server exited with code 1
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: C:\\WINDOWS\\system32\\cmd.exe
Arguments: /d /s /c concurrently \"babel-node start-server\" \"babel-node start-auth-client\" \"babel-node start-editor-client\"
Directory: c:\\dev\\monorepo\\packages\\server
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "c:\\dev\\monorepo\\packages\\server\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I think this is due to the fact that all packages now reside at package root/node_modules.
Any ideas how to fix that?

Related

Invalid package name "#" of package "##nestjs/passport": name can only contain URL-friendly characters

Creates a Module Federation applcation, API server, but when I running command npm install I am getting error. My node version is v16.17.1 and npm version is 8.19.2
╰─ npx create-mf-app ─╯
? Pick the name of your app: server
? Project Type: API Server
? Port number: 8080
? Template: nestjs-auth
Your 'server' project is ready to go.
Next steps:
▶️ cd server
▶️ npm install
▶️ npm start
Error:
npm ERR! code EINVALIDPACKAGENAME
npm ERR! Invalid package name "#" of package "##nestjs/passport": name can only contain URL-friendly characters.
Package.json
{
"name": "server",
"version": "1.0.0",
"description": "",
"author": "",
"private": true,
"license": "UNLICENSED",
"scripts": {
"prebuild": "rimraf dist",
"build": "nest build",
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
"start": "nest start",
"start:dev": "nest start --watch",
"start:debug": "nest start --debug --watch",
"start:prod": "node dist/main",
"lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
"test": "jest",
"test:watch": "jest --watch",
"test:cov": "jest --coverage",
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
"test:e2e": "jest --config ./test/jest-e2e.json"
},
"dependencies": {
"#": "nestjs/passport",
"#nestjs/common": "^8.0.0",
"#nestjs/core": "^8.0.0",
"#nestjs/jwt": "^8.0.0",
"#nestjs/passport": "^8.0.1",
"#nestjs/platform-express": "^8.0.0",
"#nestjs/serve-static": "^2.2.2",
"class-validator": "^0.13.1",
"jsonwebtoken": "^8.5.1",
"passport": "^0.5.0",
"passport-jwt": "^4.0.0",
"passport-local": "^1.0.0",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"rxjs": "^7.2.0"
},
"devDependencies": {
"#nestjs/cli": "^8.0.0",
"#nestjs/schematics": "^8.0.0",
"#nestjs/testing": "^8.0.0",
"#types/express": "^4.17.13",
"#types/jest": "^27.0.1",
"#types/node": "^16.0.0",
"#types/passport-jwt": "^3.0.6",
"#types/passport-local": "^1.0.34",
"#types/supertest": "^2.0.11",
"#typescript-eslint/eslint-plugin": "^4.28.2",
"#typescript-eslint/parser": "^4.28.2",
"eslint": "^7.30.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^3.4.0",
"jest": "^27.0.6",
"prettier": "^2.3.2",
"supertest": "^6.1.3",
"ts-jest": "^27.0.3",
"ts-loader": "^9.2.3",
"ts-node": "^10.0.0",
"tsconfig-paths": "^3.10.1",
"typescript": "^4.3.5"
},
"jest": {
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"rootDir": "src",
"testRegex": ".*\\.spec\\.ts$",
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
},
"collectCoverageFrom": [
"**/*.(t|j)s"
],
"coverageDirectory": "../coverage",
"testEnvironment": "node"
}
}
So as Micael Levi suggested I removed the "#": "nestjs/passport", entry from package.json and deleted package-lock.json file and run command npm install. It resolved the error.

How to auto-reload the script by npm server

I am testing the sample code of javascript.
There is script like simple.js under demos directory.
I run demo by this command yarn build-demos && http-server demos/
simple.js is compiled to simple_bundle.js and server works.
However everytime I change simple.js, I need to restart server.
Is there any good short cut for this purpose??
I am not familiar with npm and webpack
Any help is appreciated.
My package.json is here below:
{
"name": "#magenta/sketch",
"version": "0.2.0",
"description": "Make sketches in the browser with machine learning.",
"main": "es5/index.js",
"types": "es5/index.d.ts",
"jsdelivr": "dist/magentasketch.js",
"unpkg": "dist/magentasketch.js",
"dependencies": {
"#tensorflow/tfjs": "^1.0.2"
},
"devDependencies": {
"#types/clone": "^0.1.30",
"#types/file-saver": "^1.3.0",
"#types/ndarray": "^1.0.6",
"#types/node": "^12.0.1",
"#types/tape": "^4.2.32",
"browserify": "^16.5.1",
"clang-format": "^1.2.3",
"clone": "^1.0.4",
"file-saver": "^1.3.8",
"file-saver-typescript": "^1.0.1",
"fs": "0.0.1-security",
"http-server": "^0.12.1",
"in-publish": "^2.0.0",
"minimist": "^1.2.5",
"path": "^0.12.7",
"tape": "^4.9.0",
"ts-loader": "^5.3.0",
"ts-node": "^5.0.1",
"tsify": "^3.0.4",
"tslint": "^5.9.1",
"typedoc": "^0.16.9",
"typedoc-plugin-sourcefile-url": "^1.0.3",
"typescript": "^3.3.3333",
"webpack": "^4.24.0",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.14"
},
"scripts": {
"prepublish": "yarn lint && yarn build && yarn bundle",
"build": "tsc",
"bundle": "webpack --config ./webpack/lib.config.ts",
"lint": "tslint -c ../tslint.json -p . -t verbose",
"test": "ts-node node_modules/tape/bin/tape src/**/*_test.ts",
"build-demos": "webpack --config ./webpack/demo.config.ts",
"run-demos": "yarn build-demos && http-server demos/",
"serve-demos": "http-server demos/",
"serve-dist": "http-server dist/",
"docs": "sh ../scripts/generate-docs.sh 'sketch'"
},
"author": "Magenta",
"license": "Apache-2.0",
"repository": {
"type": "git",
"url": "https://github.com/tensorflow/magenta-js.git"
}
}
You might need to use Nodemon.
You install nodemon by npm i nodemon
In package.json you add a script: "dev": "nodemon dist/index.js"
Execute the code in the console by adding npm run dev
It should work as you want
You may consider using Nodemon.

npm does not install the package.json dependencies

I've been struggling with a weird bug. I'm trying to install project dependencies on my server with a simple npm i but it does not create any node_modules folder.
Also, I've tried all of the probable solutions like npm init in order to make a new package.json file or I deleted package-lock.json file.
However, the package.json file works smoothly on my local environment.
here is my package.json file:
{
"name": "expressmvc",
"version": "1.0.0",
"description": "Webpack and Express backend boilerplate Edit",
"main": "app.babel.js",
"dependencies": {
"axios": "^0.16.2",
"babel-runtime": "^6.23.0",
"bcrypt": "^1.0.3",
"bluebird": "^3.5.0",
"body-parser": "~1.16.0",
"connect-mongo": "^1.3.2",
"cookie-parser": "~1.4.3",
"cron": "^1.3.0",
"debug": "~2.6.0",
"express": "~4.14.1",
"express-session": "^1.15.5",
"gmail-api-sync": "^1.2.8",
"gmail-sender-oauth": "^1.0.5",
"googleapis": "^21.3.0",
"moment": "^2.18.1",
"mongoose": "^4.9.2",
"morgan": "~1.7.0",
"node-cron": "^1.2.1",
"nodemon": "^1.11.0",
"passport": "^0.4.0",
"passport-google-oauth20": "^1.0.0",
"pug": "~2.0.0-beta10",
"serve-favicon": "~2.3.2"
},
"devDependencies": {
"babel-cli": "^6.24.0",
"babel-core": "^6.26.0",
"babel-eslint": "^8.0.0",
"babel-loader": "^7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.0",
"babel-preset-es2016": "^6.22.0",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.26.0",
"mocha": "^3.5.0",
"prettier-eslint": "^8.1.0",
"webpack": "^3.5.5"
},
"scripts": {
"test": "mocha 'app/**/*.test.js' --compilers js:babel-core/register --recursive",
"start": "NODE_ENV=production node ./build/backend.js",
"run-dev": "DEBUG=express:* nodemon ./app.js --exec babel-node",
"build": "rm -f -r build && NODE_ENV=production webpack --config ./webpack.config.js --progress --profile --colors"
},
"repository": {
"type": "git",
"url": "git+https://github.com/PedramMarandi/express-js-boilerplate.git"
},
"keywords": [
"expressjs",
"boilerplate",
"es6",
"javascript",
"MVC"
],
"author": "Pedram Marandi",
"license": "ISC",
"bugs": {
"url": "https://github.com/PedramMarandi/express-js-boilerplate/issues"
},
"homepage": "https://github.com/PedramMarandi/express-js-boilerplate#readme"
}
NPM version 3.10.10
Node version 6.10.3
This issue is mainly due to permission problem on Linux machine . You can try after changing the write permission of your deployment folder using this command
sudo chmod -R 777 /home/nodejsAppFloder

Eslint - eslint-config-airbnb not find

I'm getting some errors module eslint-config-airbnb not found, when run command eslint **/*.jsx.
package.json file
{
"name": "reactapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"precommit": "npm test",
"start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"husky": "^0.14.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.5.5",
"webpack-dev-server": "^2.7.1"
},
"devDependencies": {
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.3.0"
}
}
eslintrc file
{
"extends": "airbnb"
}
Check to see if your eslint has been installed / installed correctly.
Also reinstall your node_modules folder as well, if eslint has been configured.
Since eslint isn't in your devDependencies, I assumed you've got it set up globally?
I've copied your package.json set up, but tested it with a local eslint and it's working for me.
"scripts":
{
"precommit": "npm test",
"start": "webpack-dev-server --hot",
"lint": "eslint **/*.jsx --fix"
}
...
"devDependencies":
{
"eslint": "^4.5.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^5.1.1",
"eslint-plugin-react": "^7.3.0"
}
npm install -D rimraf prettier babel-eslint eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import eslint-config-prettier eslint-config-airbnb eslint-plugin-react-hooks
npm run build
Try running this, worked for me.

Error: Couldn't find preset "react-hmre" relative to directory

I have the following library https://github.com/codyc4321/react-data-components-updated
I installed it in my React project like npm i ~/react-data-components-updated
Now running my node server I get:
ERROR in /Users/cchilders/react-data-components-updated/lib/index.js
Module build failed: Error: Couldn't find preset "react-hmre" relative to directory "/Users/cchilders/react-data-components-updated"
at /Users/cchilders/work_projects/myproject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:293:19
at Array.map (native)
at OptionManager.resolvePresets (/Users/cchilders/work_projects/myproject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:275:20)
at OptionManager.mergePresets (/Users/cchilders/work_projects/myproject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:264:10)
at OptionManager.mergeOptions (/Users/cchilders/work_projects/myproject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:249:14)
at OptionManager.init (/Users/cchilders/work_projects/myproject/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
at File.initOptions (/Users/cchilders/work_projects/myproject/node_modules/babel-core/lib/transformation/file/index.js:212:65)
at new File (/Users/cchilders/work_projects/myproject/node_modules/babel-core/lib/transformation/file/index.js:135:24)
at Pipeline.transform (/Users/cchilders/work_projects/myproject/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
at transpile (/Users/cchilders/work_projects/myproject/node_modules/babel-loader/lib/index.js:46:20)
# ./client/components/tables/MyDataTable.js 64:16-56
# ./client/controllers/MyController.js
# ./client/main.js
# multi webpack-hot-middleware/client ./client/main.js
In my library I have
.babelrc
{
"presets": [
"es2015",
"react",
"stage-1",
"react-hmre"
]
}
package.json
{
"name": "react-data-components-updated",
"version": "0.1.0",
"description": "React data components updated with some fixes",
"keywords": [
"pagination",
"react",
"react-component",
"table"
],
"license": "MIT",
"main": "./lib/index",
"files": [
"css",
"lib",
"dist",
"src"
],
"repository": {
"type": "git",
"url": "https://github.com/codyc4321/react-data-components-updated"
},
"dependencies": {
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"lodash": "^4.13.1",
"prop-types": "^15.5.10"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0-0"
},
"devDependencies": {
"babel-cli": "^6.10.1",
"babel-core": "^6.10.4",
"babel-eslint": "^7.0.0",
"babel-jest": "^20.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-lodash": "^3.2.4",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-1": "^6.5.0",
"eslint": "^4.1.1",
"eslint-plugin-react": "^7.1.0",
"flow-bin": "^0.49.1",
"husky": "^0.14.1",
"jest": "^20.0.4",
"lint-staged": "^4.0.0",
"lodash-webpack-plugin": "^0.11.4",
"prettier": "^1.5.2",
"react": "^15.1.0",
"react-addons-test-utils": "^15.1.0",
"react-dom": "^15.1.0",
"react-redux": "^4.4.5",
"react-test-renderer": "^15.6.1",
"redux": "^3.5.2",
"rimraf": "^2.4.3",
"webpack": "^3.1.0",
"webpack-dev-server": "^2.5.0"
},
"scripts": {
"build": "webpack && babel src -d lib",
"check": "flow check",
"clean": "rimraf lib dist coverage",
"lint": "eslint src",
"precommit": "lint-staged",
"prepublish": "npm run clean && npm run build",
"start": "webpack-dev-server -d --config example/webpack.config.js",
"test": "npm run lint && npm run check && jest"
},
"lint-staged": {
"*.js": [
"prettier --write --single-quote --trailing-comma all",
"git add"
]
},
"jest": {
"roots": [
"src"
]
}
}
How can I fix this react-hmre error?
You have missed the package, please install it by click it babel-preset-react-hmre

Categories

Resources