2

我正在使用打字稿设置 Next.js 项目。我一直在关注几个指南,但我似乎遇到了导入别名的问题。

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

以下是一些引用类似问题的页面,我遵循了这些提示但没有成功:

我尝试使用 Next.js 的 webpack 配置来解决问题(将 resolve.alias 选项直接添加到 next.config.js,但这没有帮助,而且 Next.js 现在应该支持开箱即用的打字稿(resolve.扩展名定义明确)

Next.js 版本 9.3.5

b abel-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"
      }
    }]
  ]
}

4

1 回答 1

2

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

  • 处理打字稿别名
  • 使用 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 之间已知的兼容性问题。

于 2020-04-16T09:51:40.627 回答