无法使用 .tsx 文件运行 ts-node

Question

我已经使用 Typescript 和 JSX 创建了一个 React 应用程序（创建 .tsx 文件而不是 .ts），我尝试在具有热重载的 Docker 容器中运行它，但收效甚微。

我尝试过将 nodemon 与 ts-node 结合使用，但仍然遇到错误

[ERR_UNKNOWN_FILE_EXTENSION]：未知的文件扩展名“.tsx”

一种建议是从 package.json 文件中删除“type”：“module”，但这会导致错误；

语法错误：无法在模块外部使用 import 语句

我陷入了这个问题和这个问题之间的循环

有谁知道如何解决让 ts-node 处理 tsx 文件的具体问题，或者更一般地说如何解决在 docker 容器内使用 JSX 热重载 typescript 的问题？

Answer 1

• 尝试compilerOptions.module在CommonJS您的tsconfig.json
• 不要"type": "module"放入package.json

概念证明： https://github.com/ferdinandant/stacko-unknown-ext-tsx

tsconfig.json

{
  "include": ["src", "types/**/*"],
  "exclude": ["node_modules/**"],
  "compilerOptions": {
    "module": "CommonJS",
    "lib": ["dom", "esnext"],
    "rootDir": "./src",
    "jsx": "react",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noEmit": true
  },
  // /sf/ask/3612740841/
  "ts-node": {
    "files": true
  }
}

package.json

{
  "name": "stacko-unknown-ext-tsx",
  "version": "1.0.0",
  "main": "src/index.tsx",
  "author": "Ferdinand Antonius",
  "license": "MIT",
  "scripts": {
    "dev": "ts-node src/index.tsx"
  },
  "devDependencies": {
    "@types/node": "^18.11.18",
    "ts-node": "^10.9.1",
    "typescript": "^4.9.4"
  }
}

src/index.tsx

import fs from "fs";

console.log("Hello!");
console.log(fs);

运行它作为yarn ts-node src/index.tsx