The cause of

Recently I worked on a new project based on React + Antd + Ts + Mobx. After the project has installed the dependencies, it will see a console error when it starts:

solution

  • When a hand party
  • Google search
  • Look at the principles, see what’s going on
  • Look at the source code and try to solve it yourself
  • Open Source community questions

When a hand party

This is my favorite way to do it, but it doesn’t work…

Google search

The way to solve the problem is to extract keywords from the problem, believe that I am not the first person to encounter this problem, and then turn to Google or other search engines for help.

This method, there are two points need to pay attention to, the first is the extraction of keywords, must be accurate; Second, be calm, do not believe in miracles, I will be able to find the answer.

The history.js referenced by react-router-dom could not find a reference to Babel. So, we search for:

react-router Can’t resolve ‘@babel/runtime/helpers/esm/extends’

Turning off CSDN’s answer, as well as some unrelated Github issues, we found three answers:

  • react-router issues/6648Upgrade:reactAs well asreact-scriptsGo to the latest version and reinstall the dependencies. (After trying, useless)
  • babel issues/9746: Probably, it needs an upgradebabelAnd update the configuration.
  • Babel JS file can ‘t resolve “@ Babel/runtime/helpers/builtin/classCallCheck”: Also an upgradebabelAnd update the configuration.

At this point, there’s no straight answer. However, you can already lock down the answer to “just upgrade Babel and update the configuration.”

To explore the principle of

Babel is a toolchain for converting ECMAScript 2015+ code to backward-compatible versions of JavaScript code in older browsers or environments. — from the official website

Since the configuration of the participating project has been upgraded to Babel7.x, check out the website for guidance on upgrading to Babel7. So, this is a good place to start by checking the existing configuration against the guidelines to see if it meets expectations.

npx babel-upgradeCopy the code

As you can see, running the update not only helps us change the Babel dependencies, but also automatically overwrites the Babel configuration.

Install the dependencies, start the project, and discover that the problem is not resolved.

Look at the source code

The error message is history.js. Use the react-router-dom version to find the history.js version. Download the corresponding source code and modify the dependencies in the project according to the package.json dependencies in this version of the source code. Remove node_modules, reinstall dependencies, and start the project. Problem solved.

The community to ask questions

This is what I ask in the evening, the next morning has the answer 🙏

conclusion

I also spend a lot of time on the first and second solutions when I’m trying to solve problems, but these two solutions are usually the least efficient. If time is allocated, it should be allocated as follows:

  • 1. Being a Hand grabber (5%)
  • 2. Google Searches (15%)
  • 3. Explore principles and understand what’s really going on (20%)
  • 4. Open source community questions (20%)
  • 5. Look at the source code and try to solve it yourself (40%)