To solve the problem that the craco configuration alias does not take effect, how to use craco to configure the alias for the react project.

If we build a react project from 0, it is necessary for us to configure an alias for our project, so as to prevent us from writing the path ../../../ when we write the path, wondering what we are doing Have you configured it?

The first step is to create a new file named craco.config.js under the root directory

const path = require("path");

const resolve = dir => path.resolve(__dirname, dir);

module.exports = {
  webpack: {
    alias: {
      "@": resolve("src"),
      "components": resolve("src/components")
    }
  }
}

The second step is to modify the configuration in the package

The purpose is to merge our craco and webpack

 

Solve the problem that still does not work

It may be that our react-srcipts version is too high, our craco supports react4.* version, we may be using version 5.*, so we need to download the alpha version when downloading

npm install @craco/craco@alpha -D