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

Question

我正在使用 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 配置来解决问题（将 resolve.alias 选项直接添加到 next.config.js，但这没有帮助，而且 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"
      }
    }]
  ]
}

Answer 1

在考虑了更多之后，我意识到我正在尝试做两件事：

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

提供的配置实际上适用于常规 typescript 导入，但是此配置不允许 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 之间已知的兼容性问题。