I can't install react#18 because i get the following error
Raw JSON explanation object:
{
"code": "ERESOLVE",
"current": {
"name": "react",
"version": "18.0.0",
"whileInstalling": {
"name": "cap",
"version": "0.1.0",
"path": "/Users/dheld/pollopi/cap"
},
"location": "node_modules/react",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "react",
"spec": "^18.0.0",
"from": {
"location": "/Users/dheld/pollopi/cap"
}
}
]
},
"currentEdge": {
"type": "prod",
"name": "react",
"spec": "^18.0.0",
"from": {
"location": "/Users/dheld/pollopi/cap"
}
},
"edge": {
"type": "peer",
"name": "react",
"spec": "<18.0.0",
"error": "INVALID",
"from": {
"name": "#testing-library/react",
"version": "12.1.5",
"whileInstalling": {
"name": "cap",
"version": "0.1.0",
"path": "/Users/dheld/pollopi/cap"
},
"location": "node_modules/#testing-library/react",
"isWorkspace": false,
"dependents": [
{
"type": "prod",
"name": "#testing-library/react",
"spec": "^12.0.0",
"from": {
"location": "/Users/dheld/pollopi/cap"
}
}
]
}
},
"strictPeerDeps": false,
"force": false
}
I already tried to install #testing-library/react globally and in the folder but both doesn't work
React 16 I can install without any problems
What you see in the code segment is the output of the file eresolve-report.txt
Maybe someone has a solution for :)
Thanks so much!!!
What I understand from the error message, is that the #testing-library/react package requires a React version prior to 18. So you cannot install React 18, at least while it's not supported by testing-library.
You could try the following:
npm install react-html-parser --legacy-peer-deps
Related
I want my React app in my Nx monorepo to retrieve all the assets in my asset library called common-assets.
I managed to do it with my NextJS app like so :
project.json of my NextJS app
{
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "apps/clients",
"projectType": "application",
"implicitDependencies": ["common-assets"],
"targets": {
"build": {
"executor": "#nrwl/next:build",
"outputs": ["{options.outputPath}"],
"defaultConfiguration": "production",
"options": {
"root": "apps/clients",
"outputPath": "dist/apps/clients",
"assets": [
{
"input": "libs/common/assets/src/lib",
"glob": "**/*",
"output": "assets"
}
]
},
...
}
I tried to do the exact same thing for my react App by modifying the asset key in the project.json
project.json of my React app :
"$schema": "../../node_modules/nx/schemas/project-schema.json",
"sourceRoot": "apps/sellers/src",
"projectType": "application",
"implicitDependencies": ["common-assets"],
"targets": {
"build": {
"executor": "#nrwl/web:webpack",
"outputs": ["{options.outputPath}"],
"defaultConfiguration": "production",
"options": {
"compiler": "babel",
"outputPath": "dist/apps/sellers",
"index": "apps/sellers/src/index.html",
"baseHref": "/",
"main": "apps/sellers/src/main.tsx",
"polyfills": "apps/sellers/src/polyfills.ts",
"tsConfig": "apps/sellers/tsconfig.app.json",
"assets": [
"apps/sellers/src/favicon.ico",
"apps/sellers/src/assets",
{
"input": "libs/common/assets/src/lib",
"glob": "**/*",
"output": "src/assets"
}
],
"styles": ["apps/sellers/src/styles.scss"],
"scripts": [],
"webpackConfig": "#nrwl/react/plugins/webpack"
},
"configurations": {
"development": {
"extractLicenses": false,
"optimization": false,
"sourceMap": true,
"vendorChunk": true
},
"production": {
"fileReplacements": [
{
"replace": "apps/sellers/src/environments/environment.ts",
"with": "apps/sellers/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false
}
}
},
"serve": {
"executor": "#nrwl/web:dev-server",
"defaultConfiguration": "development",
"options": {
"buildTarget": "sellers:build",
"hmr": true
},
"configurations": {
"development": {
"buildTarget": "sellers:build:development"
},
"production": {
"buildTarget": "sellers:build:production",
"hmr": false
}
}
},
"lint": {
"executor": "#nrwl/linter:eslint",
"outputs": ["{options.outputFile}"],
"options": {
"lintFilePatterns": ["apps/sellers/**/*.{ts,tsx,js,jsx}"]
}
},
"test": {
"executor": "#nrwl/jest:jest",
"outputs": ["coverage/apps/sellers"],
"options": {
"jestConfig": "apps/sellers/jest.config.ts",
"passWithNoTests": true
}
}
},
"tags": []
}
But it's not working...
I kept assets into image folder and
"assets": [
"apps/boost/src/favicon.ico",
"apps/boost/src/assets",
{
"input": "libs/common-assets/assets/src/lib/images",
"glob": "**/*",
"output": "assets"
}
],
I'm able to use it into other project as well
<img alt="logo" src="/assets/logo.png" />
Do this:
{
"input": "./libs/common-assets/src/lib/images",
"glob": "**/*",
"output": "/assets/"
}
Then access it with:
<img alt="logo" src="assets/logo.png" />
I am learning Next.js and and want to debug in visual code and chrome. I have tried different combination for launch.json to debug next.js app in visual code. I grab one of the the code from stack overflow itself. but it turns another failure.
can you please help me how to debug in Next.js app in visual studio code using google chrome.
Below is my launch.json file code :
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Example",
"runtimeExecutable": "node",
"runtimeArgs": ["--inspect", "node_modules/.bin/next", "dev"],
"port": 9229,
"cwd": "${workspaceFolder}/frontend",
"sourceMapPathOverrides": {
"webpack:///./*": "${workspaceRoot}/frontend/*"
}
}
]
}
code for my .next.config.js
module.exports = {
webpack(config) {
config.devtool = 'cheap-module-eval-source-map'
return config
},
}
my package.json for frontend
{
"name": "frontend",
"version": "1.0.0",
"description": "Social networking app",
"proxy": "http://127.0.0.1:8080",
"main": "index.js",
"scripts": {
"dev": "cross-env NODE_OPTIONS='--inspect' next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"author": "Vivek padelkar",
"license": "ISC",
"dependencies": {
"#ant-design/icons": "^4.7.0",
"antd": "^4.16.13",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"next": "^12.0.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-toastify": "^8.1.0"
},
"devDependencies": {
"cross-env": "^7.0.3"
}
}
My folder structure is as follows:
outer pacakge.json code (i.e. path : SOCIAL NETWORK/pacakge.json"
{
"name": "socialnetwoek",
"version": "1.0.0",
"description": "social network backend",
"main": "server.js",
"type": "module",
"scripts": {
"start": "node backend/server",
"server": "nodemon backend/server",
"client": "npm run dev --prefix frontend",
"all": "concurrently \"npm run server\" \"npm run client\""
},
"author": "Vivek Padelkar",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"colors": "^1.4.0",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"esm": "^3.2.25",
"express": "^4.17.1",
"express-async-handler": "^1.2.0",
"joi": "^17.4.2",
"mongoose": "^6.0.12",
"morgan": "^1.10.0"
},
"devDependencies": {
"concurrently": "^6.4.0",
"nodemon": "^2.0.15"
}
}
Steps that I am following:
while in root folder (i.e.. SOCIAL NETWORK) I am executing command
npm run all.
then I press F5 to run debugger.
Below is my vs screen I am running my Next.js app with chrome and all the debug points are greyed out.(highlighted with red box)
but nothing is working.
Next.js Docs has its dedicated documentation over Debugging.
Your .vscode/launch.json should be:
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev"
},
{
"name": "Next.js: debug client-side",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000"
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"console": "integratedTerminal",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
]
}
And no changes should be made with next.config.js.
npm run dev can be replaced with yarn dev if you're using Yarn. If you're changing the port number your application starts on, replace the 3000 in http://localhost:3000 with the port you're using instead.
You can select the type of debugging option you need from the dropdown.
Finally found solution , I have edited my launch.json in following way and everything is working as expected , thank you for your valuable time guys.
launch.json
{
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/frontend"
},
{
"name": "Attach to Edge",
"port": 9222,
"request": "attach",
"type": "pwa-msedge",
"webRoot": "${workspaceFolder}/frontend"
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"name": "Launch Edge",
"request": "launch",
"type": "pwa-msedge",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/frontend"
},
{
"name": "Launch Microsoft Edge and open the Edge DevTools",
"request": "launch",
"type": "vscode-edge-devtools.debug",
"url": "http://localhost:3000" // Provide your project's url to finish configuring
}
]
}
Not a proper solution but I've manage without fixing it to run the "fullstack" debugger with this configuration (the one from the documentation).
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"console": "integratedTerminal",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
The Next.js documentation over Debugging only works for the frontend or client files, but no to /api/files*, follow theres steps and you can debug your /api/files:
https://blogs.sap.com/2019/07/15/how-to-debug-a-node.js-rest-api-in-visual-studio-code-locally/
Facing this error after calling expo build:android.
Can anyone check what's the issue ? I'm using windows 8 OS and yarn.
app.json
"expo": {
"name": "GTechApp",
"slug": "GTechApp",
"version": "1.0.0",
"icon": "./assets/images/icons/logo.png",
"platforms": [
"ios",
"android",
"web"
],
"assetBundlePatterns": [
"**/*"
],
"ios": {
"bundleIdentifier": "com.gtech.gtechapp",
"buildNumber": "1.0.0",
},
"android": {
"package": "com.gtech.gtechapp",
"versionCode": 1,
"icon": "./assets/images/icons/logo.png"
}
}
Thanks for the help.
When I used ng serve in my Angular project (in to correct place) its show this error in cmd.
The serve command requires to be run in an Angular project, but a project definition could not be found.
I try this also
Angular Cli Error: The serve command requires to be run in an Angular project, but a project definition could not be found
but this also not work for me.
I tried also to delete node-module and reinstall, but not work. When I used npm start it work.
Why? What is the problem?
My angular-cli.json code here
"project": {
"version": "1.0.0-beta.28.3",
"name": "angular-src"
},
"apps": [
{
"root": "src",
"outDir": "../public",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"files": "src/**/*.ts",
"project": "src/tsconfig.json"
},
{
"files": "e2e/**/*.ts",
"project": "e2e/tsconfig.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
ng update #angular/cli --migrate-only --from=<WhateverVersionYouAreCurrentlyOn>
e.g.
ng update #angular/cli --migrate-only --from=1.7.3
getting ref from here https://github.com/angular/angular-cli/issues/12215#issuecomment-433593036
Make sure that you are in the project directory in the terminal before
running "ng serve".
Let's say your folder structure is as follows:
|-Documents
|---my_projects
|-----angular_project
Make sure that your terminal is in "angular_project" for example. i.e
username#PC_NAME:~/Documents/my_projects/angular_project$ ng serve
Few minutes ago, i just run into a 404 error in my angular 2 app. There are no errors in my terminal although there are some 404 errors in my console. I have included bootstrap in my node_modules in the angular-cli.json file. However, i dont't know where the unhandled promise rejection is coming from. Any idea on how to resolve this issue?
**404 error**
Unhandled Promise rejection: Failed to load ../bootstrap/css/bootstrap.min.css ; Zone: <root> ; Task: Promise.then ; Value: Failed to load ../bootstrap/css/bootstrap.min.css undefined
ZoneAwareError {__zone_symbol__error: Error: Uncaught (in promise): Failed to load ../bootstrap/css/bootstrap.min.css
at resolvePromis…, rejection: "Failed to load ../bootstrap/css/bootstrap.min.css", promise: ZoneAwarePromise, zone: Zone, task: ZoneTask}
GET http://localhost:4200/css/local.css 404 (Not Found)
**angular-cli**
{
"project": {
"version": "1.0.0-beta.28.3",
"name": "frontend"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
],
"scripts": [
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"files": "src/**/*.ts",
"project": "src/tsconfig.json"
},
{
"files": "e2e/**/*.ts",
"project": "e2e/tsconfig.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
You made mistake in your app.dashboard.html as below,
Which should be as