V
V
Vladimir Petrov2020-03-04 20:11:16
npm
Vladimir Petrov, 2020-03-04 20:11:16

Update deprecated stack for React app?

A couple of years ago, for one of the projects, a stack was built for a React application. At the moment, it is partially obsolete, some packages are no longer used and not supported (for example, extract-text-webpack-plugin), and some have been replaced by others (for example, instead of babel-preset-es2015, now babel-preset-env).
My stack also affects config files (.babelrc, webpack.config.js, .eslintrc).

When building the project, there are many warnings that some packages are outdated and not supported. And the React version itself is no longer fresh.
When building a stack from scratch now, there are a lot of bugs and compatibility issues.

Is it possible to somehow update this stack as painlessly and quickly as possible? Or what actions will be optimal now in order to work on a new project with the same stack (updated) in the near future?

package.json

{
  "name": "react-application",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "babel-core": "^6.14.0",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-polyfill": "^6.13.0",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "bluebird": "^3.4.1",
    "express": "^4.14.0",
    "react": "^15.3.1",
    "react-dom": "^15.3.1"
  },
  "devDependencies": {
    "babel-eslint": "^6.1.2",
    "babel-loader": "^6.2.5",
    "clean-webpack-plugin": "^0.1.10",
    "css-loader": "^0.24.0",
    "eslint": "^3.3.1",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-react": "^6.1.2",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "json-loader": "^0.5.4",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "nodemon": "^1.10.2",
    "postcss-loader": "^0.10.1",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.15.0"
  },
  "scripts": {
    "build": "NODE_ENV='production' webpack -p",
    "webpack-devserver": "webpack-dev-server --debug --hot --devtool eval-source-map --output-pathinfo --watch --colors --inline --content-base public --port 8050 --host 0.0.0.0",
    "nodemon": "NODE_PATH=./src nodemon server.js"
  },
  "author": "unknown",
  "license": "ISC"
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
Alexander Cheremkhin, 2020-03-04
@Che603000

Now almost always use create-react-app
Read more
https://ru.reactjs.org/docs/create-a-new-react-app.html

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question