从 v2.0 开始，“injectBabelPlugin”助手已被弃用。 您可以使用自定义 cra 插件代替

Question

I am trying to customize my imports using babel. I am following this link:

https://medium.com/@leonardobrunolima/react-tips-working-with-relative-path-using-create-react-app-fe55c5f97a21

This is my config-overrides.js

const { injectBabelPlugin } = require('react-app-rewired');

const rootImportConfig = [
    "root-import",
    {
        rootPathPrefix: "~",
        rootPathSuffix: "src"
    }
];

module.exports = config => injectBabelPlugin(rootImportConfig, config);

Package.json:

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",

Currently, this gives me an error that: The "injectBabelPlugin" helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement

Hence, I installed

nom install customize-cra react-app-rewired --dev

and changed 'react-app-rewired' to 'customize-cra' in my js file as suggested here: https://github.com/arackaf/customize-cra#available-plugins

However, that still doesn't work since the injectBabelPlugin is also depreciated. What the function should I use here then? I tried the config files from here but it doesn't work from me either. It's src-functionality is also different.

https://github.com/timarney/react-app-rewired/issues/348

How can I fix my config file and imports? Instead of

import { ResultAlert } from '../../components/alerts/ResultAlert';

I want to do something like this:

import {ResultAlert} from '~/components';

Answer 1

I think you can achieve what you want here without having to resort to hacking the react-scripts . Simply use a baseUrl configuration in your jsconfig.js or tsconfig.ts file. More details in this blog post: https://dev.to/mr_frontend/absolute-imports-in-create-react-app-3ge8

But essentially:

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Then you can do things like import Home from "components/Home" and it'll just work.