在 TypeScript 和 Next.js 中解析具有绝对导入的模块

Question

当我使用绝对导入从文件导入函数时，我一直在尝试消除一些不断出现的错误。 我得到的错误如下所示。

这些功能实际上是导入的，可以很好地使用。 但是，每当使用绝对路径导入某些内容时，我的 typescript 配置都会使 VS 代码抛出类似的错误。 我的理解是，从 Next.js 的版本 9 开始，开箱即用地支持 typescript，而无需做太多额外的工作。

我的 tsconfig.json 文件

{
"compilerOptions": {
"target": "esnext",
"lib": [
  "dom",
  "dom.iterable",
  "esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"strictNullChecks": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"sourceMap": true,
"baseUrl": ".",
"paths": {
  "@actions/*": [
    "redux/actions/*"
  ],
  "@components/*": [
    "./components/*"
  ],
  "@controllers/*": [
    "controllers/*"
  ],
  "@interfaces/*": [
    "interfaces/*"
  ],
  "@layouts/*": [
    "layouts/*"
  ],
  "@lib/*": [
    "lib/*"
  ],
  "@models/*": [
    "models/*"
  ],
  "@options/*": [
    "options/*"
  ],
  "@public/*": [
    "public/*"
  ],
  "@reducers/*": [
    "redux/reducers/*"
  ],
  "@redux/*": [
    "redux/*"
  ],
  "@static/*": [
    "static/*"
  ],
  "@store/*": [
    "./store/*"
  ],
  "@style": [
    "style/*"
  ],
  "@utils": [
    "utils/*"
  ],
  "@dummy/*": [
    "__dummy__/*"
  ]
}
},
"exclude": [
  "node_modules"
],
"include": [
  "next-env.d.ts",
  "**/*.ts",
  "**/*.tsx"
]
}

我的 next.config.js 文件

/* eslint-disable */
const withPlugins = require("next-compose-plugins")
const withFonts = require("next-fonts")
const withImages = require("next-images")
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin")
/* eslint-enable */

module.exports = withPlugins([[withFonts], [withImages]], {
webpack: (config) => {
    if (config.resolve.plugins) {
        config.resolve.plugins.push(new TsconfigPathsPlugin())
    } else {
        config.resolve.plugins = [new TsconfigPathsPlugin()]
    }

    config.resolve.extensions.push(".ts", ".tsx")
    return config
}
})

Answer 1

如果你使用 Next.js 9.4，你可以删除tsconfig-paths-webpack-plugin插件。

绝对导入和别名

Answer 2

当我使用绝对导入从文件中导入函数时，我一直在尝试消除一些不断出现的错误。 我得到的错误如下所示。

这些功能实际上是导入的，可以很好地使用。 但是，我的 typescript 配置会使 VS 代码在使用绝对路径导入某些内容时抛出类似的错误。 我的理解是，从 Next.js 的第 9 版开始，typescript 开箱即用，无需做太多额外的工作。

我的 tsconfig.json 文件

{
"compilerOptions": {
"target": "esnext",
"lib": [
  "dom",
  "dom.iterable",
  "esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"strictNullChecks": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"sourceMap": true,
"baseUrl": ".",
"paths": {
  "@actions/*": [
    "redux/actions/*"
  ],
  "@components/*": [
    "./components/*"
  ],
  "@controllers/*": [
    "controllers/*"
  ],
  "@interfaces/*": [
    "interfaces/*"
  ],
  "@layouts/*": [
    "layouts/*"
  ],
  "@lib/*": [
    "lib/*"
  ],
  "@models/*": [
    "models/*"
  ],
  "@options/*": [
    "options/*"
  ],
  "@public/*": [
    "public/*"
  ],
  "@reducers/*": [
    "redux/reducers/*"
  ],
  "@redux/*": [
    "redux/*"
  ],
  "@static/*": [
    "static/*"
  ],
  "@store/*": [
    "./store/*"
  ],
  "@style": [
    "style/*"
  ],
  "@utils": [
    "utils/*"
  ],
  "@dummy/*": [
    "__dummy__/*"
  ]
}
},
"exclude": [
  "node_modules"
],
"include": [
  "next-env.d.ts",
  "**/*.ts",
  "**/*.tsx"
]
}

我的 next.config.js 文件

/* eslint-disable */
const withPlugins = require("next-compose-plugins")
const withFonts = require("next-fonts")
const withImages = require("next-images")
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin")
/* eslint-enable */

module.exports = withPlugins([[withFonts], [withImages]], {
webpack: (config) => {
    if (config.resolve.plugins) {
        config.resolve.plugins.push(new TsconfigPathsPlugin())
    } else {
        config.resolve.plugins = [new TsconfigPathsPlugin()]
    }

    config.resolve.extensions.push(".ts", ".tsx")
    return config
}
})

Answer 3

你必须只使用@/name ：

import name from '@/name'