在前端开发中，我们经常使用 ES6 的语法来编写代码，但是有些浏览器还不支持 ES6，为了让我们的代码能够在这些浏览器上运行，我们需要使用 Babel 将 ES6 代码转换成 ES5 代码。然而，在使用 Babel 编译 ES6 代码时，有时会遇到 "SyntaxError: export 'default' (imported as 'xxx') was not found in 'xxx'" 的错误，这个错误该如何解决呢？
错误原因
这个错误的原因是因为在使用 Babel 编译 ES6 代码时，Babel 会将 ES6 的模块语法转换成 CommonJS 的模块语法。而在 CommonJS 的模块语法中，没有默认导出的概念，所以当我们使用 ES6 的默认导出语法时，Babel 就会报错。
解决方法
要解决这个问题，我们需要让 Babel 能够正确地识别 ES6 的默认导出语法。有两种解决方法：
方法一：使用 @babel/plugin-proposal-export-default-from 插件
这个插件可以让 Babel 支持 ES6 的默认导出语法。我们只需要在项目中安装这个插件，然后在 babel.config.js 中配置即可。
首先，我们需要安装这个插件：
npm install --save-dev @babel/plugin-proposal-export-default-from
然后，在 babel.config.js 中配置这个插件：
// javascriptcn.com 代码示例
module.exports = {
presets: [
// ...
],
plugins: [
// ...
"@babel/plugin-proposal-export-default-from"
]
}配置好之后，重新编译代码，就不会再出现 "SyntaxError: export 'default' (imported as 'xxx') was not found in 'xxx'" 的错误了。
方法二：使用 CommonJS 的导出语法
另一种解决方法是使用 CommonJS 的导出语法，而不是 ES6 的默认导出语法。我们只需要将 ES6 的默认导出语法改成 CommonJS 的导出语法即可。
例如，我们原来的代码是这样的：
// javascriptcn.com 代码示例
// export.js
export default {
name: "John",
age: 30
}
// import.js
import person from "./export.js"
console.log(person.name)我们只需要将 export.js 中的代码改成这样：
// javascriptcn.com 代码示例
// export.js
module.exports = {
name: "John",
age: 30
}
// import.js
const person = require("./export.js")
console.log(person.name)这样就可以避免 "SyntaxError: export 'default' (imported as 'xxx') was not found in 'xxx'" 的错误了。
总结
在使用 Babel 编译 ES6 代码时，有时会遇到 "SyntaxError: export 'default' (imported as 'xxx') was not found in 'xxx'" 的错误。这个错误的原因是因为在使用 Babel 编译 ES6 代码时，Babel 会将 ES6 的模块语法转换成 CommonJS 的模块语法，而在 CommonJS 的模块语法中，没有默认导出的概念。为了解决这个问题，我们可以使用 @babel/plugin-proposal-export-default-from 插件或者使用 CommonJS 的导出语法。这个问题的解决方法对于前端开发者来说是非常有帮助的，希望大家能够掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650a019495b1f8cacd476e09