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.
Related
Why i'm getting this error?
Warning: Using UNSAFE_componentWillMount in strict mode is not
recommended and may indicate bugs in your code. See
https://reactjs.org/link/unsafe-component-lifecycles for details.
Move code with side effects to componentDidMount, and set initial state in the constructor.
Please update the following components: SideEffect(NullComponent)
The app was working fine, went for few hours and came back found it giving me this error! one solution I found is removing I removed it and the error went away, but the api i'm using didn’t work, so i'm looking for another solution!
"dependencies": {
"#emotion/styled": "^11.10.4",
"#mui/icons-material": "^5.10.9",
"#mui/lab": "^5.0.0-alpha.103",
"#mui/material": "^5.10.9",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^1.1.2",
"font-awesome": "^4.7.0",
"gapi-script": "^1.2.0",
"html-react-parser": "^3.0.4",
"jwt-decode": "^3.1.2",
"react": "^18.2.0",
"react-cookie": "^4.1.1",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-router-dom": "^6.4.2",
"react-scripts": "^5.0.1",
"sanitize-html": "^2.7.2",
"web-vitals": "^2.1.4"
},
For API call use "componentDidMount"
If it not help then need to see your code snapshot in order understand what is going on.
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+
I am using lottie-react-native and it's not working properly.
"lottie-ios": "3.1.3",
"lottie-react-native": "^3.3.2",
"react": "16.9.0",
"react-native": "0.61.5",
The lottie should works like this:
https://i.imgur.com/MgTJtUw.mp4
But it's working like this: https://i.imgur.com/dk3YUCR.mp4
As you can see it's not bouncing several times. It drops like stone.
resolved this issue by updating the versions and Podfile.
"react": "16.9.0",
"react-native": "0.61.2",
"lottie-react-native": "^3.2.1",
"lottie-ios": "^3.1.3",
added use_frameworks! to Podfile in ios folder
Or
used this with react-native-animated-loader
"react": "16.9.0",
"react-native": "0.61.5",
"lottie-react-native": "^3.3.2",
"lottie-ios": "^3.1.3",
"react-native-animated-loader": "^0.0.8"
Added use_frameworks! into Podfile in IOS folder as well
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"
},
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"
}