I've been wondering why my npm start loads so slow even though I've only changed file file, it takes about a minute to read the change and takes another minute to load the page. It's making the development really slow because of the issue, I have to restart and run the application again just to gain few seconds faster.
The app folder is only 167kb in total, but my node_modules is big, not sure if these dependencies are all for angular but it seems like the whole npm library has been installed in my node_modules folder.
Edit: Looks like its maxing out my CPU while its reloading the files which is strange.
while my package.json dev dependencies are very little and the rest are the angular dependencies from angular installation.
"devDependencies": {
"body-parser": "^1.15.2",
"concurrently": "^2.0.0",
"cors": "^2.7.1",
"express": "^4.14.0",
"file-system": "^2.2.1",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.0.12",
"gulp-less": "^3.1.0",
"gulp-rename": "^1.2.2",
"gulp-useref": "^3.1.0",
"gulp-watch": "^4.3.8",
"jquery": "^3.1.0",
"lite-server": "^2.2.0",
"merge-stream": "^1.0.0",
"momentjs": "^1.1.12",
"ng2-bootstrap": "^1.0.24",
"typescript": "^1.8.10",
"typings": "^1.0.4"
}
Related
I wanted to use the new satisfies operator in my Typescript React app but it doesn't works.
here are the package.json and typescript related package details.
{
"dependencies": {
.
.
.
"babel-plugin-react-require": "^3.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
.
.
.
},
"devDependencies": {
"#babel/core": "^7.16.0",
"#babel/plugin-transform-runtime": "^7.16.10",
"#babel/preset-env": "^7.16.4",
"#babel/preset-react": "^7.16.0",
"#babel/preset-typescript": "^7.18.6",
"#types/react": "^17.0.36",
"#types/react-dom": "^17.0.11",
"#typescript-eslint/eslint-plugin": "^5.45.0",
"#typescript-eslint/parser": "^5.45.0",
"babel-loader": "^8.2.3",
"esbuild-loader": "^2.20.0",
"eslint": "^8.3.0",
"eslint-config-prettier": "^8.3.0",
"eslint-import-resolver-typescript": "^3.5.2",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-import": "^2.25.4",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.27.1",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-storybook": "^0.6.7",
"typescript": "^4.9.3",
"webpack": "^5.75.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.5.0",
"webpack-merge": "^5.8.0"
}
}
What could be the reason?
I've upgraded all the typescript related packages to latest but issue is not fixed
It seems the problem is caused by the babel version. (But take my answer with a grain of salt, as I am still learning myself)
The satisfies operator was introduced with Typescript 4.9 and babel supports this Typescript version since 7.20.0.
In the release notes babel specifically mentions #babel/plugin-transform-typescript and #babel/preset-typescript working with satisfies. But the newest version for the npm package #babel/preset-typescript is 7.18.6.
So it seems to me, to solve your problem you could:
Manually install a supporting version of #babel/preset-typescript
Switch to #babel/plugin-transform-typescript
Wait for the npm package to be updated
Have same problem, as workaround added plugin #babel/plugin-transform-typescript, not instead of #babel/preset-typescript, but additionally.
And now it works. I doubt this plugin makes something bad, maybe add a few ms to processing time.
Maybe someone has a better solution? If someone want to reproduce, this is a repo where it reproducible https://github.com/sshmyg/frontend. Just install, update babel packages and try to use satisfies in any tsx file.
VSCode uses it's own version of Typescript. So it might use older versions which doesn't understand satisfies keyword.
You can:
Upgrade your VSCode to the latest version
Use your workspace version of typescript by selecting Typescript: Select Typescript version... in command palette.
Also note that you have to restart TS Server. So restart your VSCode to see the effects.
This is my first time building an a-frame app with react and when running npm run-script build in my cmd prompt I come across this error.
Failed to compile.
static/js/main.9516bce8.js from UglifyJs
Unexpected token: operator (>) [./~/aframe/dist/aframe-master.js:57303,0][static/js/main.9516bce8.js:80512,32]
"aframe": "^1.0.4"
"webpack": {
"version": "2.6.1",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-2.6.1.tgz",
"integrity": "sha1-LgRX8KuxrF3zqxBsacZy8jZ4Xwc=",
"requires": {
"acorn": "^5.0.0",
"acorn-dynamic-import": "^2.0.0",
"ajv": "^4.7.0",
"ajv-keywords": "^1.1.1",
"async": "^2.1.2",
"enhanced-resolve": "^3.0.0",
"interpret": "^1.0.0",
"json-loader": "^0.5.4",
"json5": "^0.5.1",
"loader-runner": "^2.3.0",
"loader-utils": "^0.2.16",
"memory-fs": "~0.4.1",
"mkdirp": "~0.5.0",
"node-libs-browser": "^2.0.0",
"source-map": "^0.5.3",
"supports-color": "^3.1.0",
"tapable": "~0.2.5",
"uglify-js": "^2.8.27",
"watchpack": "^1.3.1",
"webpack-sources": "^0.2.3",
"yargs": "^6.0.0"
},
based on my research i'm guessing the version of uglify that i'm using doesn't support ES6
but I can't find anything online that can help me update or replace uglify-js to handle ES6
You can update it with
npm update uglify-js
which updates the package to the latest version that satisfies it version tag.
If this new version does not work, you can update it to a specific version
npm update uglify-js#3.0.5
or just update it to the latest one
npm update uglify-js#latest
Be careful because updates might break some existing code
terser-webpack-plugin works for me using webpack v4. it does support ES6+
This error appears when I started using react redux, I tried every solution I found online but nothing
Changing react and react redux version I installed schedule,
react 16.5 with redux 6.0.0 = nothing
react 16.8.6 with redux 6.0.0 or 6.0.1 or 7.0.2 = nothing
"dependencies": {
"expo": "^32.0.6",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-redux": "^6.0.0",
"react-saga": "^0.3.1",
"react-thunk": "^1.0.0",
"redux": "^4.0.1",
"redux-saga": "^1.0.2"
},
"devDependencies": {
"schedule": "^0.4.0"
},
FOUND SOLUTION
This is because you may of had a previous version of react-redux installed in node_modules in that folder name. instead of expo start or npm start. try expo r -c
This removes the cache in expo for that directory. Such a pain to find this answer.
Don't know why and who, but I think it's something with npm, So I've just created a new project with the same dependencies versions, and It worked !!
I moved all my file a created in last project to the new one, and it still working.
So If you tried every single solution out there just move to yarn, or create a new project with the same dependencies compatible versions, check redux documentation or use this one :
"dependencies": {
"expo": "^32.0.6",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-redux": "^6.0.0",
"react-saga": "^0.3.1",
"react-thunk": "^1.0.0",
"redux": "^4.0.1",
"redux-saga": "^1.0.2"
},
"devDependencies": {
"schedule": "^0.4.0"
},
Recently I started working on a commercial project that was written by another programmer basing on the create-react-app. Since the project is already big enough and does not stop developing, working with the create-react-app is becoming more and more inconvenient, because I want to be able to completely configure myself webpack, node.js and other packages.
I'm looking for an opportunity as quickly as possible to migrate the project from create-react-app to the form, as if the project was originally written without it.
To work with the code after npm run eject seemed to me unreasonably complex.
I am trying to find at least some instructions or guides on this issue but did not find it yet.
Here's the package.json dependencies:
{
"dependencies": {
"classnames": "^2.2.5",
"google-maps-react": "^2.0.2",
"history": "^4.7.2",
"husky": "^0.14.3",
"lint-staged": "^7.2.0",
"lodash.debounce": "^4.0.8",
"lodash.isequal": "^4.5.0",
"lodash.throttle": "^4.1.1",
"moment-timezone": "^0.5.17",
"prettier": "^1.12.1",
"prop-types": "^15.6.1",
"react": "^16.3.2",
"react-collapse": "^4.0.3",
"react-copy-to-clipboard": "^5.0.1",
"react-dom": "^16.3.2",
"react-facebook-login": "^3.7.2",
"react-google-login": "^2.11.3",
"react-input-mask": "^1.2.2",
"react-motion": "^0.5.2",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"react-router-redux": "^5.0.0-alpha.9",
"react-scripts": "1.1.4",
"react-scrollchor": "^4.2.1",
"react-slick": "^0.14.11",
"react-stripe-elements": "^1.6.0",
"redux": "^4.0.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.2.0",
"validator": "^8.2.0"
},
"devDependencies": {
"eslint": "^5.3.0",
"eslint-config-airbnb": "^17.0.0",
"eslint-config-prettier": "^2.9.0",
"eslint-plugin-import": "^2.13.0",
"eslint-plugin-jsx-a11y": "^6.1.1",
"eslint-plugin-prettier": "^2.6.2",
"eslint-plugin-react": "^7.10.0",
"react-scrolllock": "^3.0.1",
"redux-devtools-extension": "^2.13.5",
"reselect": "^3.0.1",
"stylelint": "^9.4.0",
"stylelint-config-standard": "^18.2.0"
}
}
I'd say it depends what you want to do. I had the same problem. I ejected my local copy and found I got a lot of problems. My solution was the take the existing CRA project ad do the following:
Update to latest react and react-dom , run 'yarn react#next react-dom#next'
You should now have the latest react versions - so you can code split using React.lazy/React.Suspense, use hooks and so on.
If you have an issue with errors when using the import syntax you need to use the babel-plugin-syntax-dynamic-import plugin. Put the "babel" field in your package json.
I hope that is some help. There are also libraries like https://github.com/timarney/react-app-rewired but I haven't used them.
My Jest snapshot tests consistently fail on Travis with the following difference:
- "_instance": Constructor {
+ "_instance": {
Dev dependencies include:
"babel-jest": "^19.0.0",
"jest": "^19.0.2",
"react-addons-test-utils": "^15.4.2",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"react-test-renderer": "^15.4.2",
"enzyme": "^2.7.1",
"enzyme-to-json": "^1.5.0",
"react": "^15.2.0",
"react-dom": "^15.2.1"
Using Node 7.0.0 locally and on Travis.
Any ideas?
I would make sure that I am using the exact same version on both locally and on CI. Try pinning jest and babel-jest to a specific version:
"babel-jest": "=19.0.0",
"jest": "=19.0.2",
Maybe I would do the same with all the dependencies! Then remove node_modules/ from your machine, run the tests (update snapshots if necessary) and push.
Ps. I would also try to empty the caches on travis: https://travis-ci.com/USERNAME/REPOSITORY_NAME/caches.
In my case, I had a mismatch between the node version in the build system vs local.