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
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"
}
}
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?
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.
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"
}
}
}
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