如何在 Next JS 中启用 SWC 别名导入？

Question

Upgrading from babel to SWC. I deleted the .babelrc file but now the path aliases are no longer recognized in my project. Tried to restore this with a .swrc

.swrc

{
    "jsc": {
        "target": "ES2017",
        "baseUrl": ".",
        "paths": {
            "@components/*": ["./components/*"]
        }
    }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["es6", "dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "ESNEXT",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@components/*": ["./components/*"],
    }
  },
  "exclude": ["node_modules", "**/*.stories.tsx"],
  "include": ["**/*.ts", "**/*.tsx", "next-env.d.ts", "next.config.js"]
}

14:24 Error: Unable to resolve path to module '@components/NavBar'

.eslintrc.json

{
    "root": true,
    "parser": "@typescript-eslint/parser",
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:react/recommended",
        "plugin:import/errors",
        "plugin:import/warnings",
        "plugin:jsx-a11y/recommended",
        "plugin:react-hooks/recommended"
    ],
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "plugins": [
        "@typescript-eslint", "react", "prettier"
    ],
    "rules": {
        "prefer-const": "off",
        "import/extensions": "off",
        "jsx-a11y/anchor-is-valid": "off",
        "import/no-cycle": [0, { "ignoreExternal": true }],
        "prettier/prettier": ["error", { "endOfLine": "auto" }],
        "react/prop-types": "off",
        "react-hooks/exhaustive-deps": "off",
        "react/no-unescaped-entities": "off",
        "react/jsx-filename-extension": [1, { "extensions": [".ts", ".tsx"] }],
        "react/jsx-props-no-spreading": ["error", { "html": "ignore", "custom": "ignore", "exceptions": [""] }],

        // needed because of https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md#how-to-use & https://stackoverflow.com/questions/63818415/react-was-used-before-it-was-defined
        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": [
          "error",
          { "functions": false, "classes": false, "variables": true }
        ],
        "@typescript-eslint/ban-ts-comment": "off",
        "@typescript-eslint/no-explicit-any": "off"
    },
    "settings": {
        "import/resolver": {
            "babel-module": {
                "extensions": [".js", ".jsx", ".ts", ".tsx"]
            }
        }
    }
}

old .babelrc

{
    "presets": ["next/babel"],
    "plugins": [
      [
        "module-resolver",
        {
          "root": ["./"],
          "alias": {
            "@components": "./components",
            "@api": "./api",
            "@models": "./models",
            "@screens": "./screens",
            "@hooks": "./hooks",
            "@services": "./services",
            "@constants": "./constants",
            "@context": "./context",
            "@queries": "./queries",
            "@data": "./data",
            "@typeDefs": "./types",
            "@generated": "./generated",
            "@utils": "./utils",
            "@pages": "./pages",
            "@public": "./public"
          }
        }
      ]
    ]
  }

Answer 1

Was able to solve this with a few tweaks.

1. Remove the import/resolver section of .eslintrc.json
2. Extend next in eslint.