TypeScript 中出现意外的令牌导入错误

作者

TypeScript 中出现意外的令牌导入错误

Unexpected token import Error in TypeScript

要解决 TypeScript 中的“Uncaught SyntaxError: Unexpected token import”，请在您的文件中设置module选项，并确保编译您的 TypeScript 文件（例如使用），而不是直接使用.commonjstsconfig.jsonts-nodenode

打开您的tsconfig.json文件并确保该module选项设置为
commonjs.

tsconfig.json文件
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "esModuleInterop": true,
    // ... rest
  }
}

模块选项设置程序的模块系统。

esModuleInterop
选项默认设置为，false这导致它像对待 ES6 模块一样对待 CommonJS 模块。这会导致一些问题。设置esModuleInterop修复
true这些问题。

TypeScript 中“Uncaught SyntaxError: Unexpected token import”错误的另一个常见原因是尝试直接使用 运行 TypeScript 文件node，例如node src/index.ts. 这是行不通的，因为在使用node.

如果您错误地配置了使用babel或的 TypeScript 项目，情况也是如此ts-node。

您的 TypeScript 文件是否被转换为构建目录中的 JavaScript 文件？你的构建目录应该只包含 JavaScript 文件。如果它包含 TypeScript 文件，则说明您的项目配置不正确。

如果您的项目使用ts-node，您可以尝试
在您的文件中添加设置module为的覆盖。commonjstsconfig.json

tsconfig.json文件
{
  "ts-node": {
    // these options are overrides used only by ts-node
    "compilerOptions": {
      "module": "commonjs"
    }
  },
  "compilerOptions": {
    // ... rest of your ts options
  },
}

您应该检查的另一件事是文件中的main属性
package.json指向您的index.js文件，而不是您的index.ts
文件。

另外，请确保您在特定机器上的 Node.js 版本是最新的。最好使用 LTS 版本并避免使用过时的版本。

查看您的构建文件夹，您已通过文件中的outDir选项设置了该tsconfig.json文件夹。您的配置可能是错误的，您仍然可以在构建目录中生成 TypeScript 文件。

如果以上建议均无效，请查看使用ts-node.

这是我的tsconfig.json文件。

tsconfig.json文件
{
  "compilerOptions": {
    "skipLibCheck": true,
    "target": "es6",
    "module": "commonjs",
    "moduleResolution": "node",
    "allowJs": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "outDir": "./build",
    "rootDir": "src",
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

确保include数组指向包含项目所有必需文件的目录。

这是我的package.json文件。

包.json
{
  "name": "example",
  "version": "1.0.0",
  "main": "build/index.js",
  "scripts": {
    "build": "rimraf ./build && tsc",
    "dev": "nodemon",
    "start": "npm run build && node build/index.js",
  },
  "devDependencies": {
    "@types/node": "^17.0.21",
    "nodemon": "^2.0.15",
    "rimraf": "^3.0.0",
    "ts-node": "^10.4.0",
    "typescript": "^4.6.2"
  }
}

nodemon.json这是位于同一目录中的配置文件。

nodemon.json
{
  "watch": ["src"],
  "ext": ".ts,.js",
  "ignore": [],
  "exec": "ts-node --files ./src/index.ts"
}
此项目结构假定您将所有 TypeScript 文件放在一个名为 的目录中src，并index.ts在src/index.ts.

该ts-node包会将您的代码转换为 JavaScript 并使用
node.

您的构建文件将位于该build目录中。请注意，您的构建目录不应包含任何 TypeScript 文件，而应仅包含 JavaScript 文件。

如果您的构建目录包含 TypeScript 文件，则您的项目中存在配置错误。

结论

要解决 TypeScript 中的“Uncaught SyntaxError: Unexpected token import”，请在您的文件中设置module选项，并确保编译您的 TypeScript 文件（例如使用），而不是直接使用.commonjstsconfig.jsonts-nodenode

–

发表评论