Default export is not declared in imported module

image.png

问题原因

这个错误通常意味着你尝试从一个模块导入默认导出的时候出现了问题。在JavaScript的ES6模块系统中，一个模块可以导出多个值，其中一个导出可以被标记为默认导出（default export）。如果你尝试从这个模块导入默认导出，但是模块内部并没有声明默认导出，你就会遇到这个错误。

前端的模块化规范包括 commonJS、AMD、CMD 和 ES6。其中 AMD 和 CMD 可以说是过渡期的产物，目前较为常见的是commonJS 和 ES6。在 TS 中这两种模块化方案的混用，往往会出现一些意想不到的问题。

解决方案

一、import * as

考虑到兼容性，我们一般会将代码编译为 es5 标准，于是 tsconfig.json 会有以下配置：

{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
  }
}

代码编译后最终会以 commonJS 的形式输出。
使用 React 的时候，这种写法 import React from "react" 会收到一个莫名其妙的报错：

Module "react" has no default export

这时候使用：

import * as React from "react"

究其原因，React 是以 commonJS 的规范导出的，而 import React from "react" 这种写法会去找 React 模块中的 exports.default，而 React 并没有导出这个属性，于是就报了如上错误。而 import * as React 的写法会取 module.exports 中的值，这样使用起来就不会有任何问题。

二、esModuleInterop: true

为了兼容这种这种情况，TS 提供了配置项 esModuleInterop 和 allowSyntheticDefaultImports，加上后就不会有报错了：

{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true
  }
}

allowSyntheticDefaultImports: 作用只是在静态类型检查时，把 import 没有 exports.default 的报错忽略掉
esModuleInterop: 在编译的过程中真正生成兼容代码，使模块能正确的导入
mport React from "react";

现在 TS 编译后是这样的：

var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };

};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importDefault(require("react"));

编译器帮我们生成了一个新的对象，将模块赋值给它的 default 属性，运行时就不会报错了。

三、Tree Shaking

如果把 TS 按照 ES6 规范编译，就不需要加上 esModuleInterop，只需要 allowSyntheticDefaultImports，防止静态类型检查时报错就可以了。

{
"compilerOptions": {
"module": "es6",
"target": "es6",
"allowSyntheticDefaultImports": true
}
}