ParcelJs无法编译本地TSX依赖组件的问题求助

问题根源 #

Parcel未正确识别本地依赖中的TSX文件，将其当作普通JS文件处理，导致JSX语法（比如onClick属性）无法被解析。

解决步骤 #

• 给本地依赖配置TypeScript：在../../xbase/web目录下创建或修改tsconfig.json，确保包含JSX编译配置：

  {
    "compilerOptions": {
      "jsx": "react-jsx", // 或"react"，根据你的React版本选择
      "module": "ESNext",
      "target": "ES2020",
      "moduleResolution": "node"
    },
    "include": ["**/*.tsx", "**/*.ts"]
  }
  

• 本地依赖声明模块类型：在../../xbase/web/package.json中添加"type": "module"（若使用ES模块），同时确保入口文件的扩展名是.tsx。

• 安装Parcel的TSX转换器：在主项目中安装专门处理TSX的转换器：

  npm install @parcel/transformer-typescript-react --save-dev
  

• 清理Parcel缓存：删除缓存和构建目录，避免旧缓存干扰：

  rm -rf .parcel-cache dist
  

  之后重新执行parcel serve。

• 强制指定TSX转换器（可选）：如果以上方法无效，在主项目的package.json中添加Parcel配置，明确指定TSX文件的处理规则：

  "parcel": {
    "transformers": {
      "*.tsx": ["@parcel/transformer-typescript-react"]
    }
  }
  

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