Next.js TypeScript 使用 babel-plugin-module-resolver 的导入别名

我正在使用 TypeScript 设置一个 Next.js 项目。我一直在参考几篇指南，但似乎在导入别名时遇到了一些问题。

我不确定这是我的配置问题还是 Next.js 的问题。

以下是一些提到类似问题的页面，我按照上面的建议尝试过，但没有成功：

• https://github.com/zeit/next-plugins/issues/535
• https://medium.com/anna-coding/how-to-use-absolute-module-import-path-in-next-js-dcbc806272e5

我尝试过修改 Next.js 的 webpack 配置来解决问题（直接在 next.config.js 中添加 resolve.alias 选项），但是这没有帮助，并且据说 Next.js 现在原生支持 TypeScript（resolve.extensions 已经定义得很好）

Next.js 版本 9.3.5

babel-plugin-module-resolver 版本 4.0.0

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "baseUrl": ".",
    "paths": {
      "@components/*": ["./components/*"],
      "@icons/*": ["./assets/icons/*"],
      "@views/*": ["./views/*"]
    }
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

.babelrc

{
  "presets": [ "next/babel" ],
  "plugins": [
    "inline-react-svg",
    ["module-resolver", {
      "root": ["./"],
      "alias": {
        "@components": "./components",
        "@icons": "./assets/icons",
        "@views": "./views"
      }
    }]
  ]
}

答案＃1

经过进一步思考，我意识到我在尝试做两件事：

• 处理 TypeScript 别名
• 使用 babel-plugin-inline-react-svg 导入 SVG

提供的配置实际上适用于常规的 TypeScript 导入，但是该配置不允许将 SVG 导入设置别名，我尝试在 module-resolver 中添加该扩展名，但没有成功。

在做了一些更多的研究之后，我发现 babel-plugin-inline-react-svg 正在处理一个未解决的问题：https://github.com/airbnb/babel-plugin-inline-react-svg/pull/17

这似乎是 babel-plugin-module-resolver 和 babel-plugin-inline-react-svg 之间已知的兼容性问题。