使用babel-plugin-module-resolver的Ne​​xt.js Typescript导入别名 [英] Next.js typescript import aliases with babel-plugin-module-resolver

问题描述

我正在使用Typescript设置Next.js项目.我一直在遵循几本指南，但似乎遇到了导入别名的问题.

I'm setting up a Next.js project with typescript. I've been following several guides but I seem to be facing an issue with import aliases.

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

I'm not sure if this is an issue with my configuration or with Next.js.

以下是涉及类似问题的几页，我遵循的技巧没有成功:

Here are a few pages referencing similar issues whose tips I followed without success:

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

• 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应该支持开箱即用的打字稿. (resolve.extensions定义明确)

I tried messing around with Next.js' webpack configuration to solve the problem (adding resolve.alias options directly to next.config.js, but this didn't help and Next.js supposedly supports typescript out of the box now (resolve.extensions are well defined)

Next.js版本9.3.5

b abel-plugin-module-resolver版本4.0.0

tsconfig.json

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

推荐答案

对此进行了更多思考之后，我意识到我正在尝试做两件事:

After thinking on this some more I realized I was trying to do two things:

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

提供的配置实际上适用于常规的打字稿导入，但是此配置不允许对svg导入进行别名，因此我尝试将扩展名添加到module-resolver中没有运气.

The provided configuration actually works for regular typescript imports however this configuration doesn't allow svg imports to be aliased, I tried adding the extension to module-resolver with no luck.

经过更多研究后，我在babel-plugin-inline-react-svg中发现了一个未解决的问题: https://github.com/airbnb/babel-plugin- inline-react-svg/pull/17

After doing some more research I found an open issue being tackled at 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之间的已知兼容性问题.

It seems this is a know compatibility issue between babel-plugin-module-resolver and babel-plugin-inline-react-svg.

这篇关于使用babel-plugin-module-resolver的Ne​​xt.js Typescript导入别名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！