module.exports 不包含默认导出

Question

我正在尝试使用`module.exports =

在我的 React 应用程序中导出我的主题

 module.exports = {
   defaultFontColor: "#282828",
   name: "Planswell",
   primary: primary,
   deemphasizedPrimary: "#e7f6ee",
   secondary: "#E4A432",
   danger: "#DF5F2B"...}`

在我的文件 whatever.js 中，我尝试使用 import whatever from "themes/whatever.js";

将其导入另一个文件

一切正常，但我更新了 Babel，现在收到错误 Attempted import error: 'themes/whatever.js' does not contain a default export (imported as 'whatever').

导致此错误的 Babel 发生了什么变化？我该如何解决？

Answer 1

您遇到的错误应该可以帮助您指明方向。使用 module.exports = {...} 语法时，默认导出为对象。

您应该尝试导入模块的特定导出属性，例如 import { someModule } from 'themes/whatever.js'。您可以选择使用

import * as whatever from 'themes/whatever.js'

// Use it

whatever.myFunction()

Babel 是一个非常复杂的工具，所以我会检查您从哪个版本升级到，然后查看更改日志以查看发生了什么变化。 Babel 有大量的预设和插件，所以它可以是任意组合，抱歉这里没有简单的答案。在我看来，您可能正在使用某种不同类型的模块。

也许您正在使用 @babel/preset-env 与 browserslist 设置的组合，并且您转译为 ES6 模块？

Answer 2

如果您 whatever.js 中唯一的出口是

module.exports = {mod1, mod2, ...}

然后，假设 whatever 实际上是您文件中的一个模块，您应该永远无法使用

导入它

import whatever from "themes/whatever.js";

唯一可能的方法是，如果您在 whatever.js 中做了：

export default whatever;

否则，您将不得不像这样解构导入：

import {whatever, mod1, mod2, ...} from "themes/whatever.js";

同样，所有这些都假定 whatever 实际上是 whatever.js 文件中的一个模块，例如 const whatever = () => {...。你没有把那部分说清楚。

Answer 3

在您的 whatever.js 中，您已将导出为包含组件的对象，因此您必须像这样导出它

import {whatever} from "themes/whatever.js";

要使您的示例正常工作，您必须导出不带括号的组件

export {whatever}

module.exports 不包含默认导出

module.exports does not contain a default export

javascript

babeljs

es6-modules