Working on a yarn2 powered monorepo with two workspaces common and app. I've declared typescript and react-scripts as devDependencies in root's package.json ; and declared typescript and react-scripts as peerDependencies in app's package.json.
However, running yarn start gives the error
command not found: react-scripts
Any idea how to go about this?
Sidenote
react-scripts has peerDependencies on react which I've provided in root workspace's dependency section.
attaching package.json for root:
{
"name": "monorepo",
"packageManager": "yarn#3.2.1",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"#types/node": "^16.11.43",
"#types/react": "^18.0.15",
"#types/react-dom": "^18.0.6",
"fictoan-react": "^0.41.22",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"react-scripts": "5.0.1",
"typescript": "^4.7.4"
},
"workspaces": [
"common",
"app"
]
}
package.json for app
{
"name": "app",
"version": "0.1.0",
"private": true,
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"dependencies": {
"common": "workspace:*"
},
"peerDependencies": {
"#testing-library/jest-dom": "*",
"#testing-library/react": "*",
"#testing-library/user-event": "*",
"#types/jest": "*",
"#types/node": "*",
"#types/react": "*",
"#types/react-dom": "*",
"fictoan-react": "*",
"react": "*",
"react-dom": "*",
"react-scripts": "*",
"styled-components": "*",
"web-vitals": "*"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Not sure if this is a hack, but solved this using https://yarnpkg.com/getting-started/qa#how-to-share-scripts-between-workspaces
added this to root's package.json
"scripts": {
"g:start": "cd $INIT_CWD && react-scripts start",
"g:build": "cd $INIT_CWD && react-scripts build",
"g:test": "cd $INIT_CWD && react-scripts test",
"g:eject": "cd $INIT_CWD && react-scripts eject"
}
updated this in app's package.json
"scripts": {
"start": "yarn g:start",
"build": "yarn g:build",
"test": "yarn g:test",
"eject": "yarn g:eject"
}
PS:not really sure why react-scripts isn't available in app workspace even though its specified as a peerDependency :/
Related
im trying to use a proxy in my package.json fille like this
{
"name": "type-redux-toolkit",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.4",
"#material-ui/icons": "^4.11.3",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"#types/jest": "^27.5.2",
"axios": "^0.27.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-query": "^3.39.1",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.1",
"styled-components": "^5.3.5",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:8800/api/v1" //proxy is here
}
and then making a post request using axios like this
const res = await axios.post("/auth/login", credentials);
console.log(res);
now if i just put the full url in the request it works but i want to use the proxy.
i deleted the package-lock.json file and node_modules folder and restared the app like some people say but nothing
So I followed the steps on installing gh-pages and deploying my project onto github. However, my github page is giving me a 404 error and gave me this message:
"If this is your site, make sure that the filename case matches the URL.
For root URLs (like http://example.com/) you must provide an index.html file".
I have been googling around and nothing comes up.
I even switch the branch to gh-pages, but the page comes out blank.
Here is my package.json file:
{
"name": "dessert-menu",
"version": "0.1.0",
"homepage": "https://aaronv-github.github.io/DessertMenu/",
"private": true,
"dependencies": {
"-": "^0.0.1",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.1.1",
"#testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "^5.0.1",
"save": "^2.5.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^4.0.0",
"react-router-dom": "^6.3.0"
}
}
npm start command not progressing after below point -
Application is not getting loaded due to this.
Below is package.json -
{
"name": "reacttest",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.1",
"#material-ui/data-grid": "^4.0.0-alpha.33",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-facebook-login": "^4.1.1",
"react-google-login": "^5.2.2",
"react-redux": "^7.2.4",
"react-scripts": "4.0.3",
"redux": "^4.1.0",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "set HTTPS=true&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Windows (cmd.exe)
set HTTPS=true&&npm start
Windows (Powershell)
($env:HTTPS = "true") -and (npm start)
Linux, macOS (Bash)
HTTPS=true npm start
add variable in .env
REACT_APP_HTTPS = true
and in script
"scripts": {
"start": "react-scripts start",
....
}
then run npm start and see.
I've added the proxy property in package.json that is pointing to http://localhost:8080/ becouse I want to connect my node.js backend with my react frontend. However after setting this, my react app starts on the port 8080 or on whatever port I set in the proxy in package.json. What I'm doing wrong? I would like to start my react app on port 3000 and leave the port 8080 free for the node backend.
Here is my whole package.json file:
{
"name": "restaurants-portfolio-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.20.0",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"mongodb": "^3.6.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3",
"react-select": "^3.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev:server": "nodemon ./backend/server.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:8080/"
}
According to the official documentation here the sitemap-builder.js file should look like this:
require('babel-register');
const router = require('./router').default;
const Sitemap = require('../').default;
(
new Sitemap(router)
.build('http://my-site.ru')
.save('./sitemap.xml')
);
However, when I run npm run sitemap I get an error that require is undefined.
I have read that you cant use require in react so I tried import statements ex.
import Sitemap from 'react-router-sitemap'
But here I get another error that Sitemap is not a constructor
My sitemap-builder.js:
import pkg from 'react-router-sitemap';
const { Sitemap } = pkg;
const router = [
{
path: '/',
},
{
path: '/pravila',
},
{
path: '/users/:uid',
},
{
path: '/users/:uid/podcats/:pid',
},
{
path: '/post',
},
{
path: '/myprofile',
}
]
(
new Sitemap(router)
.build('https://example.com/')
.save('./sitemap.xml')
);
My package.json:
{
"name": "podcasts",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"axios": "^0.19.2",
"firebase": "^7.14.4",
"react": "^16.13.1",
"react-collapsible": "^2.8.0",
"react-copy-to-clipboard": "^5.0.2",
"react-dom": "^16.13.1",
"react-infinite-scroll-component": "^5.0.5",
"react-infinite-scroller": "^1.2.4",
"react-player": "^2.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"react-video-thumbnail": "^0.1.3",
"reactjs-popup": "^1.5.0"
},
"type": "module",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"predeploy": "npm run build",
"deploy": "firebase build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"sitemap": "babel-node src/sitemap/generator.js"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.10.2",
"#babel/node": "^7.10.1",
"#babel/preset-env": "^7.10.2",
"#babel/register": "^7.10.1",
"react-router-sitemap": "^1.2.0"
}
}
You need the default of it you can destructure the default property like this:
const { default: Sitemap } = pkg