ECMAScript 2019（ES10）的 import() 经常遇到的类型错误和解决方法

在前端开发中，我们经常会使用 import() 动态导入模块，这是 ECMAScript 2019（ES10）中新增的特性。但是在使用过程中，我们也会遇到一些类型错误，本文将介绍这些错误及解决方法。

错误一：import() 中传入的模块路径必须是字符串

在使用 import() 导入模块时，我们需要传入一个字符串类型的参数，表示要导入的模块路径。如果我们传入一个非字符串类型的参数，就会出现类型错误。

示例代码：

const modulePath = './module.js';
import(modulePath); // 正确
import('./module.js'); // 正确

import(1); // 报错：Uncaught TypeError: Failed to resolve module specifier '1'. 
import({}); // 报错：Uncaught TypeError: Failed to resolve module specifier '[object Object]'.

解决方法：始终传入一个字符串类型的参数，如果需要动态拼接路径，可以使用模板字符串。

错误二：import() 导入的模块必须是一个 ES6 模块

在使用 import() 导入模块时，我们需要确保导入的模块是一个 ES6 模块。如果我们导入的是一个 CommonJS 模块或者其他类型的模块，就会出现类型错误。

示例代码：

// module.js
module.exports = {
  name: 'module'
}

// index.js
import('./module.js'); // 报错：Uncaught SyntaxError: Cannot use import statement outside a module

解决方法：确保导入的模块是一个 ES6 模块，如果需要导入其他类型的模块，可以使用工具将其转换为 ES6 模块。

错误三：import() 返回的是一个 Promise 对象

在使用 import() 导入模块时，我们需要注意 import() 返回的是一个 Promise 对象。如果我们忘记了这一点，就会出现类型错误。

示例代码：

const modulePath = './module.js';
const module = import(modulePath); // 返回的是一个 Promise 对象

console.log(module.name); // 报错：Uncaught TypeError: Cannot read property 'name' of undefined

解决方法：使用 then 方法获取导入的模块。

const modulePath = './module.js';
import(modulePath).then(module => {
  console.log(module.name); // 正确
});

结论

在使用 import() 导入模块时，需要注意传入的模块路径必须是字符串类型，导入的模块必须是一个 ES6 模块，返回的是一个 Promise 对象。如果我们能够注意这些细节，就能够避免类型错误的出现，提高开发效率。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6757de0d890bd9faa4396759