Migrating from create-app-app to usual react application

Question

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"
  }
}

Answer 1

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:

1. Update to latest react and react-dom , run 'yarn react@next react-dom@next'
2. You should now have the latest react versions - so you can code split using React.lazy/React.Suspense, use hooks and so on.
3. 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.