在查找"tsconfig.json"中提到的绝对路径时发生TypeScript编译器错误

Question

我有以下目录结构：

.
├──  .babelrc
├── README.md
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── icon128.png
│   ├── icon16.png
│   ├── icon48.png
│   ├── manifest.json
│   └── popup.html
├── src
│   ├── App.tsx
│   ├── background.ts
│   ├── components
│   │   ├── Main.tsx
│   │   ├── Options.tsx
│   │   ├── SiteImage.tsx
│   │   ├── TrafficSignal.tsx
│   │   └── index.ts
│   ├── content.ts
│   ├── custom.d.ts
│   ├── popup.tsx
│   ├── store
│   │   ├── FrameItContext.tsx
│   │   ├── FrameItStore.ts
│   │   └── index.ts
│   ├── styles
│   │   ├── popup.css
│   │   └── tailwind.css
│   └── types
│       └── index.ts
├── tailwind.config.js
├── tsconfig.json
└── webpack.config.js

tsconfig.json看起来像：

{
"compilerOptions": {
"baseUrl": "node_modules",
"paths": {
"@/*": ["../src/*"]
},
"outDir": "./dist/",
"sourceMap": true,
"strict": true,
"noImplicitReturns": true,
"noImplicitAny": true,
"module": "es6",
"moduleResolution": "node",
"target": "es5",
"allowJs": true,
"jsx": "react",
},
"exclude": ["node_modules"],
"include": [
"./src/**/*",
"src/custom.d.ts"
]
}

我的App.tsx看起来像：

import { Main } from '@/components/index'
import { config, FrameItProvider } from '@/store/index'

TS错误看起来像：

ERROR in ./src/App.tsx 2:0-42
Module not found: Error: Can't resolve '@/components/index'
ERROR in ./src/App.tsx 3:0-48
Module not found: Error: Can't resolve '@/store/index'

我该如何解决此问题？我遵循Next.js的绝对导入结构。

甚至尝试过做：

{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
},
}

但它仍然会出错。我该如何解决？

我也有webpack.config.js，看起来像：

const webpack = require('webpack')
const path = require('path')
const CopyPlugin = require('copy-webpack-plugin')
const config = {
entry: {
popup: path.join(__dirname, 'src/popup.tsx'),
content: path.join(__dirname, 'src/content.ts'),
background: path.join(__dirname, 'src/background.ts'),
},
output: { path: path.join(__dirname, 'dist'), filename: '[name].js' },
module: {
rules: [
{
test: /.(js|jsx)$/,
use: 'babel-loader',
exclude: /node_modules/,
},
{
test: /.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader'],
exclude: /.module.css$/,
},
{
test: /.ts(x)?$/,
loader: 'ts-loader',
exclude: /node_modules/,
},
{
test: /.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: true,
},
},
],
include: /.module.css$/,
},
{
test: /.svg$/,
use: 'file-loader',
},
{
test: /.png$/,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png',
},
},
],
},
],
},
resolve: {
extensions: ['.js', '.jsx', '.tsx', '.ts'],
alias: {
'react-dom': '@hot-loader/react-dom',
},
},
devServer: {
contentBase: './dist',
},
plugins: [
new CopyPlugin({
patterns: [{ from: 'public', to: '.' }],
}),
],
}
module.exports = config

我必须在webpack.config.js中指定什么吗？因为VSCode自动完成工作正常。

Answer 1

这是一个webpack问题，而不是我发现的TShttps://decembersoft.com/posts/say-goodbye-to-relative-paths-in-typescript-imports/

我保持tsconfig.json原样：

{
"compilerOptions": {
"baseUrl": "node_modules",
"paths": {
"@/*": ["../src/*"],
},
}

我不得不在webpack.config.js中添加以下代码：

const fs = require('fs')
const srcPath = (subdir) => path.join(__dirname, 'src', subdir)
const getFilesAndDirectories = (source) =>
fs.readdirSync(source, { withFileTypes: true }).map((dirent) => dirent.name)
let absoluteImports = {}
getFilesAndDirectories('src').forEach((fileName) => {
const fileNameWithoutExtension = path.parse(fileName).name
absoluteImports[`@/${fileNameWithoutExtension}`] = srcPath(fileName)
})
const config = {
.
.
.
resolve: {
alias: {
'react-dom': '@hot-loader/react-dom',
...absoluteImports,
},
},
}

成功了🎉