关于js和ts文件导包问题总结:SyntaxError: Cannot use import statement outside a module

目录

常见报错

示例代码

关于"type": "module"

---

常见报错

先来看这几个报错，是否眼熟：

【报错1】：SyntaxError: Cannot use import statement outside a module

【报错2】：ReferenceError: require is not defined in ES module scope, you can use import instead

【报错3】TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for  xxx.ts

【报错4】：Parameter 'request' implicitly has an 'any' type

用一个示例总结一下解决办法，一次解决上述几个问题。

示例代码

http.createServer(function (request, response) {

    // 发送 HTTP 头部
    // HTTP 状态值: 200 : OK
    // 内容类型: text/plain
    response.writeHead(200, {'Content-Type': 'text/plain'});

    // 发送响应数据 "Hello World"
    response.end('Hello World\n');
}).listen(8888);

// 终端打印如下信息
console.log('Server running at http://127.0.0.1:8888/');

这时候导包有两种方式：

var http = require('http');

或：

import http from 'http'

创建成.js后缀的文件时，使用前者require来导包，此时正常；

创建成.ts、.mjs后缀的文件时，使用后者import来导包，此时正常；

如果你的情形和这两种正好相反，那就会出现报错1：SyntaxError: Cannot use import statement outside a module

也就是说以匹配的导包方式进行，就正常了。

如果相反且要继续运行成功，这时候可在package.json中加

"type": "module"

解决，或将文件后缀改为.mjs即可。

关于"type": "module"

如果是.ts文件，不论是什么方式导包，此时运行若出现【报错3】的问题：

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for  xxx.ts

解决办法是删掉 "type": "module"。

如果是.ts文件，且没有"type": "module"配置，此时若以require方式导包，就会出现【报错4】的问题，这时不要加"type": "module"，加了就是【报错3】，只需将导包方式改为import就正常了。