我正在使用打字稿设置 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 现在应该支持开箱即用的打字稿(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"
}
}]
]
}