迹忆客 专注技术分享

当前位置:主页 > 学无止境 > 编程语言 > TypeScript >

TypeScript 中出现 Unexpected token import 错误

作者:迹忆客 最近更新:2022/11/12 浏览次数:

要解决 TypeScript 中的“Uncaught SyntaxError: Unexpected token import”,请在 tsconfig.json 文件中将模块选项设置为 commonjs,并确保编译 TypeScript 文件(例如使用 ts-node),而不是直接使用 node 运行它们。

打开我们的 tsconfig.json 文件并确保将模块选项设置为 commonjs

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "esModuleInterop": true,
    // ... rest
  }
}

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

esModuleInterop 选项默认设置为 false,这使其将 CommonJS 模块视为类似于 ES6 模块。 这会导致一些问题。 将 esModuleInterop 设置为 true 可以解决这些问题。

TypeScript 中“Uncaught SyntaxError: Unexpected token import”错误的另一个常见原因是尝试直接使用节点运行 TypeScript 文件,例如 节点 src/index.ts。 这不起作用,因为我们首先必须将文件转换为 JavaScript,然后才能使用 node.js 运行它。

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

我们的 TypeScript 文件是否被转译为构建目录中的 JavaScript 文件? 您的构建目录应该只包含 JavaScript 文件。 如果它包含 TypeScript 文件,则项目配置不正确。

如果我们的项目使用 ts-node,可以尝试在 tsconfig.json 文件中添加将 module 设置为 commonjs 的覆盖。

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

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

此外,请确保您在特定机器上的 Node.js 版本是最新的。 最好使用 LTS 版本,避免使用过时的版本。 查看您通过 tsconfig.json 文件中的 outDir 选项设置的构建文件夹。 您的配置可能有误,您仍然可以在构建目录中生成 TypeScript 文件。

如果上述建议都不起作用,请查看使用 ts-node 的 TypeScript 项目的工作配置。

这是我的 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"]
}

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

这是我的 package.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 的目录中,并且在 src/index.ts 下有一个 index.ts 入口点。

ts-node 包会将我们的代码转换为 JavaScript 并使用 node.js 运行它。

我们的构建文件将位于构建目录中。

请注意 ,我们的构建目录不应包含任何 TypeScript 文件,而应仅包含 JavaScript 文件。

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


总结

要解决 TypeScript 中的“Uncaught SyntaxError: Unexpected token import”,请在 tsconfig.json 文件中将模块选项设置为 commonjs,并确保编译 TypeScript 文件(例如使用 ts-node),而不是直接使用 node 运行它们 .

转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处

本文地址:

相关文章

在 TypeScript 中返回一个 Promise

发布时间:2023/03/19 浏览次数:182 分类:TypeScript

本教程讨论如何在 TypeScript 中返回正确的 Promise。这将提供 TypeScript 中 Returns Promise 的完整编码示例,并完整演示每个步骤。

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

最新推荐

教程更新

热门标签

扫码一下
查看教程更方便