nextjs webpack typescript (.ts, .tsx) 模块解析失败：意外令牌 (6:7)

Question

我的next.config.mjs ：

export default {
  webpack: (config) => {
    // Find rules that includes current directory
    const rulesWithCurrentDir = config.module.rules.filter((rule) => rule.include && rule.include.includes(__dirname))
    // Prepare the sibling package paths that we want to include
    const apiPath = path.resolve(`${__dirname}../../api`)
    const siblingPackagePaths = [apiPath]
    // Push sibling package paths
    rulesWithCurrentDir.forEach((ruleWithCurrentDir) => ruleWithCurrentDir.include.push(...siblingPackagePaths))
    return config
  },
}

babel.config.mjs ：

export default {
  presets: ["@babel/preset-env", '@babel/preset-typescript', "@babel/preset-react"],
  plugins: [
    [
      'babel-plugin-transform-imports',
      {
        lodash: {
          transform: 'lodash/${member}',
          preventFullImport: true,
        },
        '@mui/material': {
          transform: '@mui/material/${member}',
          preventFullImport: true,
        },
        '@mui/icons-material': {
          transform: '@mui/icons-material/${member}',
          preventFullImport: true,
        },
        '@mui/lab': {
          transform: '@mui/lab/${member}',
          preventFullImport: true,
        },
<snip>
}

我遇到的yarn build错误：

../api/src/components/ModelAutocompleteField.tsx
Module parse failed: Unexpected token (6:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| import { AutocompleteProps, CircularProgress, TextField, TextFieldProps } from '@mui/material'
| 
> export interface OptionType {
|   id: string
|   title?: string

Answer 1

当您的 Next.js 项目不知道 TypeScript 文件的存在时，会发生此错误。 它通过检查tsconfig.json是否存在于项目的根目录中来做到这一点，即除了next.config.js或next.config.mjs文件。 如果tsconfig.json在其他地方，那么您必须手动配置它。