React+TypeScript+SocketIO项目编译报错：Module parse failed求助

我用React、TypeScript和SocketIO搭建的项目里，一段TS代码突然跑不起来了，编译报错Module parse failed: Unexpected token，提示需要合适的loader处理文件类型。已经试过重装Node、Babel和TypeScript，问题还是没解决，求帮忙。

相关代码 #

import Question from "../models/Question.ts";
import IQuestionnaireQuestion from "../interfaces/IQuestionnaireQuestion";
import baseQuestions from "../db/basequestions.ts";

const addQuestion = async (question: IQuestionnaireQuestion): Promise<any> => {
  try {
    const newQuestion = new Question(question);
    const questionExists =
      (await Question.exists({ text: question.text })) ||
      (await Question.exists({ quizText: question.quizText }));
    if (!questionExists) {
      await newQuestion.save();
      console.log(newQuestion);
      return newQuestion;
    }
    return null;
  } catch (e) {
    console.error(`Issue adding question: ${e}`);
    return null;
  }
};

export default {
  getQuestions: async (): Promise<any> => {
    try {
      const questions = await Question.find();
      return questions;
    } catch (e) {
      console.error(`Issue getting questions: ${e}`);
      return [];
    }
  },
  addQuestion,
  getRandomQuestions: async (numQuestions: number): Promise<any> => {
    try {
      const questions = await Question.aggregate([
        { $sample: { size: numQuestions } },
      ]);
      return questions;
    } catch (e) {
      console.error(`Issue getting random questions: ${e}`);
      return [];
    }
  },
  addBaseQuestions: async (): Promise<any> => {
    for (const thisQuestion of baseQuestions) {
      const formattedQuestion: IQuestionnaireQuestion = {
        text: thisQuestion.text,
        quizText: thisQuestion.quizText,
        fakeAnswers: thisQuestion.fakeAnswers,
      };
      await addQuestion(formattedQuestion);
    }
  },
};

报错信息 #

Module parse failed: Unexpected token (5:35)
You may need an appropriate loader to handle this file type.
| import baseQuestions from "../db/basequestions.ts";
| 
> const addQuestion = async (question: IQuestionnaireQuestion): Promise<any> => {
|   try {
|     const newQuestion = new Question(question);

1. 移除导入时的.ts后缀 #

TypeScript导入文件不需要加.ts后缀，webpack会自动识别解析，这大概率是触发错误的直接原因：

// 错误写法
import Question from "../models/Question.ts";
// 正确写法
import Question from "../models/Question";

2. 检查webpack配置是否正确处理TS文件 #

确保webpack配置里添加了ts-loader或babel-loader来处理.ts/.tsx文件：

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
};

3. 确认tsconfig.json配置有效 #

检查项目根目录的tsconfig.json是否存在且配置合理，至少包含核心编译选项：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "jsx": "react",
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

4. 补全必要依赖 #

确保所有处理TS的依赖都已正确安装：

# 使用ts-loader的情况
npm install typescript ts-loader webpack webpack-cli --save-dev

# 使用Babel的情况
npm install @babel/preset-typescript @babel/preset-react @babel/core babel-loader --save-dev

如果用Babel，还要在babel.config.json中添加预设：

{
  "presets": ["@babel/preset-react", "@babel/preset-typescript"]
}

5. 清理缓存 #

清理webpack和npm缓存，避免缓存导致的异常：

rm -rf node_modules/.cache
npm cache clean --force

内容的提问来源于stack exchange，提问作者tyler