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

Question

我正在使用打字稿建立一个 Next.js 项目。我一直在遵循几个指南，但我似乎遇到了导入别名的问题。

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

这里有几页引用了类似的问题，我遵循了这些问题的提示但没有成功：

我试着弄乱 Next.js' webpack 配置来解决问题（将 resolve.alias 选项直接添加到 next.config.js，但这没有帮助 Next.js据说现在支持开箱即用的打字稿（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"
      }
    }]
  ]
}

Answer 1

在进一步思考之后，我意识到我正在尝试做两件事：

处理打字稿别名
使用 babel-plugin-inline-react-svg 导入 SVGS

提供的配置实际上适用于常规打字稿导入，但是此配置不允许 svg 导入别名，我尝试将扩展添加到模块解析器但没有成功。

在做了更多研究后，我发现了一个正在解决的未解决问题：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 之间已知的兼容性问题。

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

Next.js typescript import aliases with babel-plugin-module-resolver

import

typescript

next.js

babel-plugin