How to extract common devDependencies from each package to root package.json file? - monorepo

I had imported two existing projects to monorepo using lerna import <PATH_OF_PROJECT> command.
Each project has a package.json file, they have some common devDependencies:
packages/redux-saga-examples/package.json:
"devDependencies": {
"#testing-library/react": "^12.0.0",
"#types/jest": "^26.0.24",
"#types/redux-actions": "^2.6.2",
"jest": "^27.0.6",
"ts-jest": "^27.0.4",
"ts-node": "^9.1.1",
"typescript": "^4.3.5"
}
packages/redux-toolkit-example/package.json:
"devDependencies": {
"#redux-saga/testing-utils": "^1.1.3",
"#types/jest": "^26.0.23",
"#types/redux-mock-store": "^1.0.2",
"jest": "^27.0.4",
"prettier": "^2.3.1",
"redux-mock-store": "^1.5.4",
"redux-saga-test-plan": "^4.0.1",
"ts-jest": "^27.0.3",
"ts-node": "^10.0.0",
"typescript": "^4.3.4"
}
redux-examples/package.json:
{
"name": "root",
"private": true,
"scripts": {
"bootstrap": "lerna bootstrap --hoist",
"test": "jest"
},
"devDependencies": {
"lerna": "^4.0.0"
}
}
Now I want to extract the common devDependencies such as typescript, jest, #types/jest to the devDependencies of the monorepo root package.json. I have tried lerna bootstrap --hoist, the devDependencies are still there in each package.
Is there any command that lerna provides to do this? Expect the package.json of root:
{
"name": "root",
"private": true,
"scripts": {
"bootstrap": "lerna bootstrap --hoist",
"test": "jest"
},
"devDependencies": {
"#types/jest": "^26.0.24",
"lerna": "^4.0.0",
"jest": "^27.0.6",
"ts-jest": "^27.0.4",
"ts-node": "^9.1.1",
"typescript": "^4.3.5"
}
}
And package.json file of each package:
packages/redux-saga-examples/package.json:
"devDependencies": {
"#testing-library/react": "^12.0.0",
"#types/redux-actions": "^2.6.2"
}
packages/redux-toolkit-example/package.json:
"devDependencies": {
"#redux-saga/testing-utils": "^1.1.3",
"#types/redux-mock-store": "^1.0.2",
"prettier": "^2.3.1",
"redux-mock-store": "^1.5.4",
"redux-saga-test-plan": "^4.0.1"
}

I don't think if this is still an open question but you can use a command given by lerna
lerna link connect
This command will segregate dev dependencies from all the packages and put it on the root.

Related

Unable to install React-chartjs-2 in React Parcel Project

Very simply by using the following command, I am unable to install React-chartJs-2 module in my React Parcel project:
npm install --save chart.js react-chartjs-2
After the installation when i started my project using (npm start), i getting the following error:
#parcel/core: Failed to resolve 'react-chartjs-2' from './src/pages/dashboard/quiz-detail.js'
My package.json after installation is looks like:
{
"name": "quizcopy",
"version": "1.0.0",
"homepage": ".",
"description": "",
"source": "/src/index.html",
"scripts": {
"start": "parcel",
"build": "parcel build src/index.html"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#parcel/transformer-sass": "^2.7.0",
"autoprefixer": "^10.4.8",
"buffer": "^6.0.3",
"parcel": "^2.7.0",
"postcss": "^8.4.16",
"process": "^0.11.10",
"sass": "^1.54.9",
"tailwindcss": "^3.1.8"
},
"dependencies": {
"#headlessui/react": "^1.7.0",
"#heroicons/react": "^2.0.10",
"axios": "^0.27.2",
"chart.js": "^4.1.1",
"crypto-js": "^4.1.1",
"dotenv": "^16.0.2",
"js-cookie": "^3.0.1",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-chartjs-2": "^5.1.0",
"react-datetime-picker": "^4.0.1",
"react-dom": "^18.2.0",
"react-export-table-to-excel": "^1.0.6",
"react-google-recaptcha-v3": "^1.10.0",
"react-hot-toast": "^2.4.0",
"react-image-file-resizer": "^0.4.8",
"react-quill": "^2.0.0",
"react-router-dom": "^6.3.0",
"react-transition-group": "^4.4.5",
"read-excel-file": "^5.5.3",
"swr": "^1.3.0"
}
}

NPM Package works when using local files but not when installing from remote package manager

I have been scratching my head lately trying to create a custom React library.
More specifically, I have managed to create the library but I haven't been able to make it work when installing it from my gitlab package manager.
If I download the package to a local folder and then I run
npm i ./package-name
everything works fine.
However if I run
npm i #scope/package-name
I get the following error:
Must use import to load ES Module: <root-path>\example-app\node_modules\swiper\swiper.esm.js
I honestly have no clue why the local installation works while the remote one doesn't.
Here is the package.json of the library:
{
"name": "#scope/package-name",
"version": "0.0.1",
"description": "some components",
"main": "./dist/cjs/index.js",
"module": "./dist/esm/index.js",
"files": [
"dist"
],
"scripts": {
"dev": "next dev",
"clean": "rimraf dist",
"build": "tsc -p tsconfig.json && tsc -p tsconfig-cjs.json",
"create-package": "npm run clean && npm run build"
},
"author": "Me",
"license": "ISC",
"peerDependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-regular-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.16",
"#types/node": "^17.0.2",
"#types/react": "^17.0.37",
"#types/react-dom": "^17.0.11",
"autoprefixer": "^10.4.0",
"axios": "^0.24.0",
"next": "^12.0.7",
"postcss": "^8.2.15",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"rimraf": "^3.0.2",
"swiper": "^7.3.4",
"tailwindcss": "^3.0.7",
"typescript": "^4.5.4"
},
"devDependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.36",
"#fortawesome/free-brands-svg-icons": "^5.15.4",
"#fortawesome/free-regular-svg-icons": "^5.15.4",
"#fortawesome/free-solid-svg-icons": "^5.15.4",
"#fortawesome/react-fontawesome": "^0.1.16",
"#types/node": "^17.0.2",
"#types/react": "^17.0.37",
"#types/react-dom": "^17.0.11",
"autoprefixer": "^10.4.0",
"axios": "^0.24.0",
"next": "^12.0.7",
"postcss": "^8.2.15",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"rimraf": "^3.0.2",
"swiper": "^7.3.4",
"tailwindcss": "^3.0.7",
"typescript": "^4.5.4"
}
}
Does anyone know what's the reason behind this?

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch on HEROKU with React

I get this error in 9 of 10 attempts of deploy, and I don't know what is the cause of it. I've tried every recommendation I found on StackOverflow, but non of them works stable. I have no ideas why it is going on, and will preciate any help, guys!
Procfile
web: npm start
initializers/server/index.js
import Express from 'express';
import handleRender from './handleRender';
const app = Express();
const port = process.env.PORT || 3000;
// Serve static files
app.use('/assets', Express.static('./dist/assets/'));
// This is fired every time the server side receives a request
app.use(handleRender);
// We are going to fill these out in the sections to follow
/* eslint no-console: 0 */
app.listen(port, () => console.log('App is listening on', port));
package.json
{
"name": "planner",
"version": "0.1.0",
"private": true,
"dependencies": {
"#fullhuman/postcss-purgecss": "^3.1.3",
"#reduxjs/toolkit": "^1.5.0",
"#tailwindcss/postcss7-compat": "^2.0.2",
"autoprefixer": "^9.8.6",
"axios": "^0.21.1",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"history": "^4.1.0",
"html-webpack-plugin": "^4.5.0",
"i18next": "^19.8.5",
"mini-css-extract-plugin": "^1.3.3",
"msw": "^0.25.0",
"postcss": "^7.0.35",
"prop-types": "^15.7.2",
"qs": "^6.9.4",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-i18next": "^11.8.5",
"react-redux": "^7.2.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^4.0.2",
"redux": "^4.0.5",
"redux-undo": "^1.0.1",
"regenerator-runtime": "^0.13.7",
"sass-loader": "^7.3.1",
"tailwindcss": "npm:#tailwindcss/postcss7-compat#^2.0.2",
"universal-cookie": "^4.0.4",
"uuid-random": "^1.3.2",
"webpack": "^4.40.2",
"webpack-bundle-analyzer": "^4.3.0",
"webpack-cli": "^3.3.12",
"webpack-manifest-plugin": "^3.0.0",
"webpack-node-externals": "^2.5.2"
},
"engines": {
"node": "14.5.0",
"npm": "6.14.9"
},
"scripts": {
"test": "jest",
"build:css": "tailwind build src/assets/tailwind.css -o src/assets/main.css",
"watch:css": "chokidar 'src/assets/tailwind.css' -c 'npm run build:css'",
"start:dev": "concurrently -n Tailwind,React 'npm run watch:css' 'webpack-dev-server --config ./initializers/webpack/development.js'",
"build:client": " rimraf ./dist/assets/* && webpack --config ./initializers/webpack/production.js",
"build:server": "NODE_ENV=production npm run build:css && webpack --config ./initializers/webpack/server.js",
"start:server": "NODE_ENV=production node --enable-source-maps ./dist/server/server",
"start": "NODE_ENV=production npm run build:css && npm run build:client && npm run build:server && npm run start:server"
},
"jest": {
"verbose": true,
"moduleDirectories": [
"src",
"node_modules"
],
"moduleNameMapper": {
"\\.(css|less|scss|sass)$": "identity-obj-proxy"
},
"setupFilesAfterEnv": [
"<rootDir>src/tests/setupTests.js"
],
"transform": {
"^.+\\.svg$": "<rootDir>/src/tests/svgTransform.js",
"^.+\\.(js|jsx)$": "babel-jest"
}
},
"devDependencies": {
"#babel/preset-env": "^7.12.11",
"#babel/preset-react": "^7.12.10",
"#testing-library/dom": "^7.29.4",
"#testing-library/jest-dom": "^5.11.8",
"#testing-library/react": "^11.2.3",
"#testing-library/user-event": "^12.6.0",
"#typescript-eslint/eslint-plugin": "^4.11.1",
"#typescript-eslint/parser": "^4.11.1",
"babel-eslint": "^10.1.0",
"chokidar-cli": "^2.1.0",
"concurrently": "^5.3.0",
"eslint": "^7.16.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"react-test-renderer": "^17.0.1",
"redux-mock-store": "^1.5.4",
"webpack-dev-server": "^3.11.0"
}
}
What else can I do to solve this problem?
Your code looks fine but:
"start": "NODE_ENV=production npm run build:css && npm run build:client && npm run build:server && npm run start:server"
This is too much.
Put them in build or heroku-postbuild, see https://devcenter.heroku.com/changelog-items/1557 and https://devcenter.heroku.com/articles/nodejs-support#customizing-the-build-process
Don't do any "building" in your start script. Use your start script to only execute your code.
It fails to bind to $PORT within 60 seconds due to building.

Error during yarn build "TS2694: Namespace 'React' has no exported member 'Context'"

I am trying to build one project and am facing issues during yarn build with react router types. Project is not mine and I do not have any significant prior experience with react or typescript but I need to build it. Any help would be much appreciated, thanks.
OUTPUT:
Failed to compile.
/home/marek/devel/builds/ob1/src/webclient/node_modules/#types/react-router/index.d.ts
(141,37): error TS2694: Namespace 'React' has no exported member 'Context'.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Makefile:185: recipe for target 'webclient' failed
make: *** [webclient] Error 1
Also attaching package.json provided with the project.
package.json:
{
"name": "obelisk_miner_ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"#types/classnames": "2.2.3",
"#types/enzyme": "2.8.11",
"#types/jest": "21.1.1",
"#types/lodash": "4.14.106",
"#types/loglevel": "1.5.1",
"#types/node": "8.0.31",
"#types/prop-types": "15.5.3",
"#types/react": "16.3.8",
"#types/react-dom": "16.0.5",
"#types/react-redux": "5.0.9",
"#types/react-router-dom": "4.2.7",
"#types/recharts": "1.0.23",
"#types/redux-logger": "3.0.5",
"axios": "0.17.1",
"classnames": "2.2.5",
"csx": "8.5.0",
"enzyme": "3.1.0",
"formik": "0.11.11",
"isemail": "3.0.0",
"lodash": "4.17.4",
"loglevel": "1.5.0",
"moment": "2.22.2",
"query-string": "5.1.0",
"react": "16.3.1",
"react-copy-to-clipboard": "5.0.1",
"react-dom": "16.3.1",
"react-dropzone": "4.2.13",
"react-redux": "5.0.6",
"react-router-dom": "4.3.1",
"react-scripts-ts": "2.7.0",
"react-typestyle": "0.3.0",
"recharts": "1.0.0-beta.10",
"redux": "3.7.2",
"redux-batch-enhancer": "0.1.3",
"redux-logger": "3.0.6",
"redux-logic": "0.12.3",
"reselect": "3.0.1",
"semantic-ui-css": "2.2.12",
"semantic-ui-forest-themes": "1.0.3",
"semantic-ui-react": "0.82.0",
"typescript": "2.8.1",
"typescript-fsa": "2.5.0",
"typestyle": "1.4.1",
"updeep": "1.0.0",
"valid-url": "1.0.9"
},
"resolutions": {
"#types/react": "16.3.8"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts-ts start",
"build": "react-scripts-ts build",
"test": "react-scripts-ts test --env=jsdom --setupTestFrameworkScriptFile=raf/polyfill",
"eject": "react-scripts-ts eject"
},
"proxy": {
"/api": {
"target": "http://192.168.1.41"
}
}
}

undefined is not an object (evaluating 'regeneratorRuntime.mark')- React Native

react-native: 0.49.5
react-native-cli: 2.0.1
node: 8.6.0
Have this error while running my application. It just started to randomly have problems after I started using proptypes in my react native application (do not think that is the problem).
I tried to comment out my store and proptypes to see if that affects anything and I still get the same error.
Note: I tried removing the caret symbol from my package.json, then removing node_modules, then finally installing again with no effect.
UDPATE:
I did some more digging and got the error to say this :
Error: ENOENT: no such file or directory, open '/Users/christian/Desktop/React-Native/roam/node_modules/react-native/node_modules/regenerator-runtime/package.json'
UPDATE:
I removed my node_modules and reinstalled them and now I am getting a similar error but with a different package.
Error: ENOENT: no such file or directory, open '/Users/christian/Desktop/React-Native/roam/node_modules/simple-swizzle/node_modules/is-arrayish/package.json'
package.json:
{
"name": "roam",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-jest": "^23.2.0",
"babel-preset-react-native": "^2.1.0",
"babel-preset-react-native-stage-0": "^1.0.1",
"enzyme": "^3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"jest": "^22.4.4",
"jest-enzyme": "^6.0.2",
"jest-react-native": "^18.0.0",
"react-test-renderer": "^16.4.1",
"redux-mock-store": "^1.5.3"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "node node_modules/jest/bin/jest.js"
},
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.jsx?$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!react-native|react-navigation)/"
]
},
"dependencies": {
"axios": "^0.18.0",
"babel-preset-env": "^1.6.1",
"expo": "^28.0.0",
"native-base": "^2.6.1",
"prop-types": "^15.6.2",
"react": "^16.2.0",
"react-dom": "^16.4.1",
"react-native": "^0.49.5",
"react-native-elements": "^0.19.1",
"react-native-pages": "^0.7.0",
"react-native-sensitive-info": "^5.1.0",
"react-native-swiper": "^1.5.13",
"react-native-vector-icons": "^4.5.0",
"react-navigation": "^2.9.3",
"react-redux": "^5.0.7",
"react-scripts": "^1.1.4",
"redux": "^3.7.2",
"redux-axios-middleware": "^4.0.0",
"redux-persist": "^5.10.0",
"redux-persist-sensitive-storage": "^1.0.0",
"redux-thunk": "^2.3.0",
"regenerator-runtime": "^0.12.1",
"tcomb-form-native": "^0.6.14",
"util": "*"
}
}
Pack-lock.json (part of it):
"dependencies": {
"#babel/code-frame": {
"version": "7.0.0-beta.51",
"resolved": "https://registry.npmjs.org/#babel/code-frame/-/code-frame-7.0.0-beta.51.tgz",
"integrity": "sha1-vXHZsZKvl435FYKdOdQJRFZDmgw=",
"dev": true,
"requires": {
"#babel/highlight": "7.0.0-beta.51"
}
},
"#babel/highlight": {
"version": "7.0.0-beta.51",
"resolved": "https://registry.npmjs.org/#babel/highlight/-/highlight-7.0.0-beta.51.tgz",
"integrity": "sha1-6IRK4loVlcz9QriWI7Q3bKBtIl0=",
"dev": true,
"requires": {
"chalk": "^2.0.0",
"esutils": "^2.0.2",
"js-tokens": "^3.0.0"
},
"babel-code-frame": {
"version": "6.0.15",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.0.15.tgz",
"integrity": "sha1-UmlpqYXzFaCBFdxi9IxMDz+af7w=",
"dev": true,
"requires": {
"babel-runtime": "^5.0.0",
"chalk": "^1.1.0",
"esutils": "^2.0.2",
"js-tokens": "^1.0.1",
"line-numbers": "^0.2.0",
"repeating": "^1.1.3"
},
"dependencies": {
"babel-runtime": {
"version": "5.8.38",
"resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-5.8.38.tgz",
"integrity": "sha1-HAsC62MxL18If/IEUIJ7QlydTBk=",
"dev": true,
"requires": {
"core-js": "^1.0.0"
}
},
"babel-core": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.0.tgz",
"integrity": "sha1-rzL3izGm/O8RnIew/Y2XU/A6C7g=",
"requires": {
"babel-code-frame": "^6.26.0",
"babel-generator": "^6.26.0",
"babel-helpers": "^6.24.1",
"babel-messages": "^6.23.0",
"babel-register": "^6.26.0",
"babel-runtime": "^6.26.0",
"babel-template": "^6.26.0",
"babel-traverse": "^6.26.0",
"babel-types": "^6.26.0",
"babylon": "^6.18.0",
"convert-source-map": "^1.5.0",
"debug": "^2.6.8",
"json5": "^0.5.1",
"lodash": "^4.17.4",
"minimatch": "^3.0.4",
"path-is-absolute": "^1.0.1",
"private": "^0.1.7",
"slash": "^1.0.0",
"source-map": "^0.5.6"
},
"dependencies": {
"babel-code-frame": {
"version": "6.26.0",
"resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
"integrity": "sha1-Y/1D99weO7fONZR9uP42mj9Yx0s=",
"requires": {
"chalk": "^1.1.3",
"esutils": "^2.0.2",
"js-tokens": "^3.0.2"
}
}
}
},
.babelrc:
{
"presets": [["env", {"modules": false}], "react-native"],
"env": {
"test": {
"presets": [["env", {"modules": false}], "react-native"]
}
}
}
The problem is that one of your library is still importing the
prop-types
from react-native bundle.
You have to correct that.
I was able to get it to work by downgrading React to 16.0.0-beta.5

Resources