Error: Cannot find module 'react-dev-utils/ignoredFiles' - javascript

I'm update React to 16.3.0 and my app crashed with Error: Cannot find module 'react-dev-utils/ignoredFiles'.
I try write this command to console: npm install --save-dev react-scripts, but it is not help, I else try delete node modules from project and reinstall it with npm i but without any result.
Dependencies from package.json:
"dependencies": {
"autoprefixer": "7.1.2",
"babel-core": "6.25.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.1",
"babel-preset-react-app": "^3.0.2",
"babel-runtime": "6.26.0",
"case-sensitive-paths-webpack-plugin": "2.1.1",
"chalk": "1.1.3",
"css-loader": "0.28.4",
"dotenv": "4.0.0",
"eslint": "4.4.1",
"eslint-config-react-app": "^2.0.0",
"eslint-loader": "1.9.0",
"eslint-plugin-flowtype": "2.35.0",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-jsx-a11y": "5.1.1",
"eslint-plugin-react": "7.1.0",
"extract-text-webpack-plugin": "3.0.0",
"file-loader": "0.11.2",
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "20.0.4",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.6",
"promise": "8.0.1",
"prop-types": "^15.6.0",
"radium": "^0.19.4",
"react": "^16.3.0",
"react-dom": "^16.3.0",
"style-loader": "0.18.2",
"sw-precache-webpack-plugin": "0.11.4",
"url-loader": "0.5.9",
"webpack": "3.5.1",
"webpack-dev-server": "2.7.1",
"webpack-manifest-plugin": "1.2.1",
"whatwg-fetch": "2.0.3"
}

I will assume you're using "create-react-app"
I would recommend you delete package-lock.json then run npm install
In most cases bumping the react-scripts version in package.json and
running npm install in this folder should be enough.
npm install --save --save-exact react-scripts#1.1.4
create-react-app update

Related

Running "npm run dev" throws "Input Error: You must pass a valid list of files to parse" error

I'm trying to make a Shopify Hydrogen app and install TailwindCSS.
I've followed all the steps in the Hydrogen docs: https://shopify.dev/docs/custom-storefronts/hydrogen/building/begin-development
For some reason I cannot run the scripts due to the previously mentioned error.
Dependencies:
"dependencies": {
"#remix-run/react": "1.12.0",
"#shopify/cli": "3.29.0",
"#shopify/cli-hydrogen": "^4.0.6",
"#shopify/hydrogen": "^2023.1.4",
"#shopify/remix-oxygen": "^1.0.3",
"graphql": "^16.6.0",
"graphql-tag": "^2.12.6",
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"#remix-run/dev": "1.12.0",
"#shopify/prettier-config": "^1.1.2",
"autoprefixer": "^10.4.13",
"concurrently": "^7.6.0",
"eslint": "^8.20.0",
"eslint-plugin-hydrogen": "0.12.2",
"postcss": "^8.4.21",
"postcss-cli": "^10.1.0",
"prettier": "^2.8.4",
"tailwindcss": "^3.2.7"
},

Module not found: Can't resolve 'formik' in 'C:\Live projects\New folder (2)\src\_metronic\partials\modals\create-app'

"dependencies": {
"#formatjs/intl-pluralrules": "^4.0.28",
"#formatjs/intl-relativetimeformat": "^9.1.7",
"#fortawesome/fontawesome-free": "^5.15.3",
"#popperjs/core": "~2.10.1",
"animate.css": "^4.1.1",
"apexcharts": "^3.27.1",
"axios": "^0.21.1",
"axios-mock-adapter": "^1.19.0",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.7.2",
"chart.js": "^3.3.2",
"clsx": "^1.1.1",
"del": "^6.0.0",
"formik": "^2.2.9",
"line-awesome": "^1.3.0",
"lint-staged": "^11.0.0",
"mini-css-extract-plugin": "1.6.2",
"nouislider": "^15.2.0",
"object-path": "^0.11.5",
"path": "^0.12.7",
"prism-react-renderer": "^1.2.1",
"prism-themes": "^1.7.0",
"prismjs": "^1.23.0",
"qs": "6.10.3",
"react": "^17.0.2",
"react-apexcharts": "^1.3.9",
"react-bootstrap": "^2.1.0",
"react-copy-to-clipboard": "^5.0.3",
"react-dom": "^17.0.2",
"react-inlinesvg": "^2.3.0",
"react-intl": "^5.20.4",
"react-is": "^17.0.2",
"react-query": "^3.34.12",
"react-router-dom": "6.2.1",
"react-scripts": "^4.0.3",
"react-table": "^7.7.0",
"react-topbar-progress-indicator": "^4.1.0",
"rtlcss-webpack-plugin": "^4.0.6",
"sass": "1.32.1",
"socicon": "^3.0.5",
"typescript": "^4.1.2",
"web-vitals": "^1.0.1",
"yup": "^0.32.11"
},
./src/_metronic/partials/modals/create-app/Main.tsx
Module not found: Can't resolve 'formik' in 'C:\Live projects\New folder (2)\src\_metronic\partials\modals\create-app'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
import {useFormik} from 'formik'
"formik": "^2.2.9",
enter image description here./src/_metronic/partials/modals/create-app/Main.tsx
When i did use this yarn add formik or npm install --save formik command, I was after install,I got "formik": "^2.2.9",But i did not solve above issue, Why it's happening error i did not get,I was tried remove node modules and package lock json but no use, I hope please be can you help for me on this issue?
To confirm: When you removed node_modules and package-lock.json you did remember to run npm install to get them back right? by apokryfos.
Try deleting the node modules and package-lock.json then redo yarn install!->by
Dharmik Patel
Both are helpful for fixed issue this credit goes to them only, thanks for all.

client.watchQuery cannot be called with fetchPolicy set to "standby" -- Error thrown on page load from useLazyQuery

I have a page written in tsx that keeps crashing on load with the error client.watchQuery cannot be called with fetchPolicy set to "standby", even though the query in question is useLazyQuery (so it hasn't run yet), and has the option fetchPolicy: 'no-cache'. It crashes for me, but not for my teammates, which makes me think it might have something to do with package versions of maybe my local typescript, but I've set and re-set it every way I can think of with no improvement. The relevant code and package.json are below. Any insight at all would be wonderful.
// myfile.tsx
const [getRoles] = useLazyQuery(GET_ALL_ACCOUNT_ROLES, {
fetchPolicy: 'no-cache',
onError: (e) => {
console.error(e.message);
showPrompt({ type: 'error', message: 400 });
},
onCompleted: async (data) => {
const {
getAllAccountRoles: { data: res }
} = data;
setAllRoles(res);
}
});
package.json
"dependencies": {
"#apollo/react-hooks": "^4.0.0",
"#aws-amplify/api": "^4.0.13",
"#aws-amplify/auth": "^4.1.3",
"#emotion/react": "^11.4.1",
"#emotion/styled": "^11.3.0",
"#loadable/component": "^5.15.0",
"#mui/icons-material": "^5.1.0",
"#mui/material": "^5.1.0",
"#mui/system": "^5.1.0",
"#reach/router": "^1.3.4",
"#rinxun/custom-questions": "^1.1.2",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.1.0",
"#testing-library/user-event": "^12.1.10",
"apollo-boost": "^0.4.9",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link": "^1.2.14",
"apollo-link-context": "^1.0.20",
"apollo-link-http": "^1.5.17",
"aws-appsync-auth-link": "^3.0.6",
"check-equal": "^1.0.7",
"clsx": "^1.1.1",
"dotenv": "^10.0.0",
"env-cmd": "^10.1.0",
"mockjs": "^1.1.0",
"qrcode.react": "^1.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-dropzone": "^11.3.4",
"react-scripts": "4.0.3",
"store": "^2.0.12",
"uuid": "^8.3.2"
},
"devDependencies": {
"#storybook/addon-actions": "^6.3.2",
"#storybook/addon-essentials": "^6.3.2",
"#storybook/addon-links": "^6.3.2",
"#storybook/node-logger": "^6.3.2",
"#storybook/preset-create-react-app": "^3.1.7",
"#storybook/react": "^6.3.2",
"#types/aws4": "^1.5.2",
"#types/jest": "^26.0.24",
"#types/loadable__component": "^5.13.4",
"#types/qrcode.react": "^1.0.2",
"#types/react": "^17.0.15",
"#types/react-dom": "^17.0.9",
"#types/uuid": "^8.3.1",
"#typescript-eslint/eslint-plugin": "^4.29.1",
"#typescript-eslint/parser": "^4.29.1",
"aws4": "^1.11.0",
"babel-eslint": "^10.1.0",
"babel-loader": "8.1.0",
"eslint": "^7.32.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.9.0",
"eslint-plugin-import": "^2.24.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.24.0",
"eslint-plugin-react-hooks": "^4.2.0",
"graphql": "^15.5.1",
"lint-staged": "^11.1.1",
"prettier": "2.3.2",
"typescript": "^4.3.5",
"web-vitals": "^1.0.1"
},
I was having a similar problem. Traced it back to the issue useQuery doesn't seem to use defaultOptions in 3.5 in #apollo/client (a dependency of #apollo/react-hooks).
Solution for me was to downgrade by setting "#apollo/client": "~3.4.0" in the package.json and run npm install. Check your package-lock.json to ensure you've replaced your 3.5.x version.
#apollo/react-hooks has a dependency of #apollo-client.
If you have imported useQuery from #apollo/react-hooks, then you need to import useQuery/useLazyQuery from #apollo-client instead of #apollo/react-hooks, along with the version lower than 3.5.
I scoured the internet for this error on a build with an existing react app that was using nwb before finally stumbling upon this. In my case, the apollo client version was 3.0.2. Updating my package.json "#apollo/client": "~3.4.0" and re running npm i finally did the trick. Thank you #GratefulGuest!

ESLint Unexpected Token {

As the title describes I am having an issue getting ESLint to run in my React project.
$ npx eslint **/*.js
Unexpected token {
package.json
"devDependencies": {
"#babel/core": "^7.9.6",
"#babel/preset-env": "^7.9.6",
"#babel/preset-react": "^7.9.4",
"babel-eslint": "^8.2.6",
"babel-loader": "^8.1.0",
"eslint": "^7.0.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
.eslintrc
{
"parser": "babel-eslint"
}
Your package.json should be an object
{
"devDependencies": {
"#babel/core": "^7.9.6",
"#babel/preset-env": "^7.9.6",
"#babel/preset-react": "^7.9.4",
"babel-eslint": "^8.2.6",
"babel-loader": "^8.1.0",
"eslint": "^7.0.0",
"html-loader": "^1.1.0",
"html-webpack-plugin": "^4.3.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
As stated in the Installation and Usage section of the npm package, there's a node.js version prerequisite for the eslint script to run.
You can check your node version by running node --version.
If you find you've got an unsupported node version, if figure you may consider switching to a higher node version or a lower eslint package version. E.g.: eslint#6.8.0

Babel not transpiling Expo module with Mocha test

When running a unit test with Mocha we are getting the following token exception which points to Babel not transpiling.
node_modules/expo/src/Expo.js:2
import './environment/validate';
^^^^^^
SyntaxError: Unexpected token import
The mocha test points to a file that imports Constants from expo
import { Constants } from 'expo'
const config = Constants.manifest.extra
This is how the mocha opts and babel are configured
test/mocha.opts
--recursive
--require babel-register
.babelrc
{
"presets": ["babel-preset-expo"],
"env": {
"development": {
"plugins": ["transform-react-jsx-source"]
}
}
}
Dependencies
{
"devDependencies": {
"babel-cli": "^6.26.0",
"babel-eslint": "^7.2.3",
"chai": "^4.1.2",
"eslint": "^3.19.0",
"eslint-config-airbnb": "^15.0.1",
"eslint-plugin-import": "^2.3.0",
"eslint-plugin-jsx-a11y": "^5.0.3",
"eslint-plugin-react": "^7.0.1",
"jest-expo": "^24.0.0",
"mocha": "^5.0.0",
"react-native-scripts": "1.0.0",
"react-test-renderer": "16.0.0-alpha.6",
"rimraf": "^2.6.2",
"sinon": "^4.2.0"
},
"dependencies": {
"axios": "^0.16.2",
"dot-object": "^1.7.0",
"expo": "^24.0.0",
"google-libphonenumber": "^3.0.5",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.4",
"moment": "^2.19.3",
"prop-types": "^15.5.10",
"react": "16.0.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",
"react-native-google-places-autocomplete": "^1.3.6",
"react-native-modal": "^4.1.1",
"react-native-modal-datetime-picker": "^4.12.0",
"react-native-swipeable": "^0.6.0",
"react-native-vector-icons": "^4.2.0",
"react-navigation": "^1.0.0-beta.21",
"react-redux": "^5.0.5",
"redux": "^3.6.0",
"redux-devtools": "^3.4.0",
"redux-devtools-dock-monitor": "^1.1.2",
"redux-devtools-log-monitor": "^1.3.0",
"redux-logger": "^3.0.6",
"redux-saga": "^0.15.3",
"redux-thunk": "^2.2.0",
"styled-components": "^2.0.1"
}
}
We are running
yarn mocha
I just faced a similar error - many of my suites would break after I used Expo.AuthSession in a single file.
I fixed my issue by adding
jest.mock('expo', () => ({
AuthSession: {
getRedirectUrl: jest.fn(),
},
}));
to my global mock file.

Categories

Resources