We Keep Coding

command not found: react-scripts (PS: yarn2(berry) workspaces)

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 :/

Disable linter only in development mode not when try to commit changes

I have this code which is obviously failing by the linter
console.log('asd', {asd:'asd'});
Line 76:23: Replace `asd:'asd'` with `·asd:·'asd'·` prettier/prettier
and the thing is that this error is happening when I ran yarn start on every change. I know how to solve this lint error but I want the linter to work only when changes are tried to being commited which this is already working with Husky, not when I run yarn start and making development/debug/code review changes.
This is my package.json
{
"name": "#advisorycloud/golden-gate-web-users",
"version": "0.1.0",
"private": true,
"dependencies": {
"#advisorycloud/react-ui-components": "1.1.37",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.11.2",
"aws-amplify": "^3.3.11",
"formik": "^2.1.7",
"formik-material-ui": "^3.0.0",
"i18next": "^19.6.3",
"i18next-browser-languagedetector": "^6.0.1",
"i18next-http-backend": "^1.0.21",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-helmet": "^6.1.0",
"react-i18next": "^11.7.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"webfontloader": "^1.6.28",
"yup": "^0.29.3"
},
"scripts": {
"start": "yarn translate && react-scripts start",
"build": "yarn translate && react-scripts build",
"test-menu": "react-scripts test --coverage --reporters=default --reporters=jest-junit",
"test": "react-scripts test --coverage --reporters=default --reporters=jest-junit --watchAll=false --env jest-environment-jsdom-fourteen",
"tdd": "react-scripts test --env jsdom-fourteen",
"eject": "react-scripts eject",
"eslint": "eslint ./src",
"cy": "cypress open",
"cy:run": "cypress run",
"cy:noapp:tests": "start-server-and-test start http://localhost:3000 cy:run && yarn test",
"cy:merge": "junit-merge --dir ./__cytests__ --out ./__cymerge__/cypressresults.xml",
"tests:merge:allreports": "junit-merge --out ./__finalreport__/finalreport.xml ./__jest-junit-reports__/junit.xml ./__cymerge__/cypressresults.xml",
"clear:reports": "rm -r ./__cymerge__/* && rm -r ./__cytests__/* && rm -r ./__finalreport__/* && rm -r ./__jest-junit-reports__/* || true ",
"full:test": "yarn clear:reports && yarn cy:noapp:tests && yarn cy:merge && yarn tests:merge:allreports",
"translate": "npx translate --source ."
},
"eslintConfig": {
"extends": "react-app"
},
"jest-junit": {
"suiteName": "jest tests",
"outputDirectory": "./__jest-junit-reports__",
"outputName": "junit.xml",
"uniqueOutputName": "false",
"classNameTemplate": "{classname}-{title}",
"titleTemplate": "{classname}-{title}",
"ancestorSeparator": " › ",
"usePathForSuiteName": "true"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#advisorycloud/translation": "^1.1.1",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^10.4.9",
"#testing-library/user-event": "^12.1.3",
"cypress": "^5.2.0",
"eslint": "^7.13.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-cypress": "^2.11.2",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jest": "^24.1.3",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.1.4",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": ">=4",
"jest-junit": "^11.1.0",
"junit-merge": "^2.0.0",
"lint-staged": ">=10",
"prettier": "^2.0.5",
"react-scripts": "^3.4.3",
"start-server-and-test": "^1.11.4"
},
"husky": {
"hooks": {
"pre-commit": "lint-staged && yarn test"
}
},
"lint-staged": {
"*.js": "eslint --cache",
"*.jsx": "eslint --cache"
}
}
and this is my linter configuration
{
"env": {
"browser": true,
"es2020": true,
"commonjs": true,
"node": true,
"jest": true
},
"extends": ["airbnb", "prettier", "plugin:cypress/recommended"],
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"plugins": ["react", "jsx-a11y", "import", "prettier", "jest", "cypress"],
"rules": {
"prettier/prettier": ["error"],
"linebreak-style": ["error", "unix"],
"react/jsx-filename-extension": [
2,
{
"extensions": ["index.js", ".jsx"]
}
],
"react/jsx-props-no-spreading": 0,
"react/prop-types": 0,
"import/prefer-default-export": 0,
"jest/no-disabled-tests": 0,
"jest/no-focused-tests": "error",
"jest/no-identical-title": "error",
"jest/prefer-to-have-length": "warn",
"jest/valid-expect": "error",
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [
"**/*.test.js",
"**/*.test.jsx",
"**/*.spec.js",
"**/*.spec.jsx",
"**/setupTests.js"
]
}
],
"cypress/no-unnecessary-waiting": 0
}
}
Sorry for my english and anticipated thanks

Require is not defined react-router-sitemap

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

Unexpected token "{" when running mocha tests

I've created a react app that I want to test using the mocha/chai/enzyme combination, but I'm having trouble setting up the testing files.
I decided to follow a tutorial for creating the mocha tests, which can be found here: https://www.robinwieruch.de/react-testing-mocha-chai-enzyme-sinon. I have gotten to the point where I have created my script that uses the mocha command. The following
This is my package.json:
{
"name": "congressforme-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel/core": "^7.6.4",
"#babel/register": "^7.6.2",
"#types/react": "^16.9.4",
"#types/react-bootstrap": "^0.32.20",
"#types/react-dom": "^16.9.1",
"#types/react-router-bootstrap": "^0.24.5",
"#types/react-router-dom": "^5.1.0",
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"bootstrap-3-card": "^0.2.0",
"chai": "^4.2.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"ignore-styles": "^5.0.1",
"jquery": "^3.4.1",
"jsdom": "^15.2.0",
"mdbreact": "^4.21.0",
"mocha": "^6.2.2",
"newman": "^4.5.5",
"popper.js": "^1.15.0",
"react": "^16.10.1",
"react-bootstrap": "^1.0.0-beta.12",
"react-bootstrap-card": "^0.2.1",
"react-dom": "^16.9.0",
"react-paginate": "^6.3.0",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^4.3.1",
"react-scripts": "3.1.2",
"react-twitter-embed": "^2.0.8",
"typescript": "^3.6.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"deploy": "aws s3 sync build/ s3://congressforme",
"test": "react-scripts test",
"eject": "react-scripts eject",
"my-tests": "mocha --require #babel/register --require ./test/helpers.js --require ./test/dom.js --require ignore-styles ./src/**/*.spec.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"
]
}
}
And this is the error message I am receiving:
ERROR: Unexpected token {
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! congressforme-app#0.1.0 my-tests: `mocha --require `#babel/register --require ./test/helpers.js --require ./test/dom.js --require ignore-styles ./src/**/*.spec.js
I only have 1 test file in the my src folder. It is named App.spec.js
This is what it looks like:
import React from 'react';
import App from './App';
import Navbar from "react-bootstrap";
// this is a testing suite app component
describe('App Component', () => {
// this is a single test in the testing suite
it('renders the Counter wrapper', () => {
const wrapper = shallow(<App />);
expect(wrapper.find(Navbar)).to.have.length(1);
});
});
However, even if I delete the contents of App.spec.js entirely, the same error still occurs.

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file

I'm trying to integrate webpack with my react project and I get the following error message.
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
I tried to find some answers on here but to no avail. It looks like the problem is stemming from my index.js page where I try to render the entire app
ReactDOM.render(<Main />, document.getElementById('root'));
Here is my package.json file:
{
"name": "app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.4.2",
"#material-ui/icons": "^4.4.1",
"axios": "^0.19.0",
"babel-core": "^6.26.3",
"material-ui": "^0.20.2",
"react": "^16.10.2",
"react-activity": "^1.2.2",
"react-dom": "^16.10.2",
"react-dropzone": "^10.1.10",
"react-redux": "^7.1.1",
"react-responsive-carousel": "^3.1.51",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-router-flux": "^1.0.0",
"react-scripts": "3.1.1",
"react-tap-event-plugin": "^3.0.3",
"redux": "^4.0.4",
"redux-persist": "^6.0.0",
"redux-promise": "^0.6.0",
"redux-thunk": "^2.3.0",
"serve": "^11.2.0",
"superagent": "^5.1.0"
},
"scripts": {
"start": "PORT=8080 react-scripts start",
"build": "webpack --env.API_URL=https://neighbor-hood.herokuapp.com --config
webpack.config.build.js",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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": {
"webpack": "^4.39.1",
"webpack-cli": "^3.3.10"
}
}
Here is my webpack.config.build.js file:
const webpack = require('webpack');
module.exports = (env) => {
const envKeys = Object.keys(env).reduce((prev, next) => {
prev[`process.env.${next}`] = JSON.stringify(env[next]);
return prev;
}, {});
module:{
rules:[{
loader: 'babel-loader',
test: /\.js$|jsx/,
exclude: /node_modules/
}]
}
return {
plugins: [
new webpack.DefinePlugin(envKeys)
]
};
};
Any my .babelrc file if necessary:
.babelrc
{
"presets": ["env", "react","#babel/preset-env"],
"plugins": [
"transform-class-properties"
]
}
Here is my index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import Main from './Main';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<Main />, document.getElementById('root'));
Not sure what this means now ... (may have answered it)

Your immediate problem is right here. There is a carriage return, or new line, after --config.
"build": "webpack --env.API_URL=https://neighbor-hood.herokuapp.com --config
webpack.config.build.js",
Try this.
"build": "webpack --env.API_URL=https://neighbor-hood.herokuapp.com --config webpack.config.build.js",