SyntaxError：不明确的间接导出：导入我自己的类时出现默认错误

Question

我已经编写了一个验证类，并希望将其包含在我的 VueJS 3 项目中。不幸的是我收到以下错误：SyntaxError: ambiguous indirect export: default

这是我的代码：

// ..classes/formValidationClass.js
export class FormValidator {
...
}

// some vue file with a form
import FormValidation from "..classes/formValidationClass"

export default {...}

此错误是什么意思？我需要做什么来纠正该错误？

Answer 1

{}在导入名称周围使用大括号

// ..classes/formValidatorClass.js // Comment: => suggestion change your file name to similar your class name
export class FormValidator {
...
}

// some vue file with a form
// import FormValidation from "..classes/formValidationClass"
import { FormValidator as FormValidation} from "../classes/formValidatorClass"; // Comment: => use brackets around your import name. if you want use FormValidation you can use also a alias (`originalName as newName`)

export default {...}

Answer 2

ES和CommonJS模块不兼容导致此错误

造成此异常的最可能原因是ES和CommonJS模块的语法不一致。在同一模块中使用不同的语法约定可能会导致冲突，从而导致语法错误和运行时错误。例如，我遇到了这个错误（Chrome浏览器）：

未捕获的语法错误：请求的模块'/node_modules/axios/index.js?v=fae0673e'不提供名为'default'的导出（位于index.ts:1:8）

在Firefox中，错误文本如下：

未捕获的语法错误：不明确的间接导出：默认

到 2023 年，您很可能使用 ES 语法，但您插入的库很可能以 CommonJS 语法分布。

确定语法：

• 查看package.json并检查module和main字段：如果存在扩展名为.mjs或 的文件.js，则表示ES模块格式；
• 如果该main字段指向具有.cjs扩展名的文件（或者该文件使用require语法），则它指向CommonJS格式。

就我而言，错误指向以下行：

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";

我知道我使用的是 ES6，但不确定 axios 0.27.2。打开它package.json，我找到了该"main": "index.js"属性，但在文件本身中我看到了 CommonJS 语法：

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from "axios";

require意味着我试图从我的 ES 模块导入 CommonJS 模块，这导致了错误。

解决方案

解决方案非常简单：将 axios 升级到版本1.4.0，该库默认使用 ES 语法，CommonJS 按需提供：

module.exports = require('./lib/axios');

另一种可能的解决方案

npm i axios@latest

首先，我们导入“axios”模块中的所有导出值，并将它们打包到一个名为“axios”的对象中，然后访问默认的导出变量。

您还可以咨询 MDN 以获取有关导入的详细帮助。

Answer 3

我发现所有的修复tsconfig方法package.json都不适合我。希望以下内容对将来的人有所帮助。

在使用 Vite 项目而不是 Webpack 项目时，我一直遇到此错误。我将无法导入任何东西，无论是命名的还是其他的。

在一个 Svelte 代码库上，我运行了 Svelte CLIsync命令，它提到类型导入破坏了importsNotUsedAsValuesor preserveValueImports，我应该明确地将导入标记为type.

有问题的声明import：

import { TUser } from '../models/Users/Users';

TUser导出为：

export type TUser = { ... }

错误

会导致以下错误：

Error: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'. (ts)                

Error: 'TUser' is a type and must be imported using a type-only import when 'preserveValueImports' and 'isolatedModules' are both enabled. (ts)

解决方案

执行以下操作为我解决了这个问题。

Error: This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'. (ts)                

Answer 4

我的故事：WebStorm在.ts文件旁边生成了.js文件（因为我曾经启用了Recompile\xc2\xa0on\xc2\xa0changes选项），因此我的应用程序尝试从 .js 文件而不是 .ts 文件导入。这就是进口问题的原因。

\n

这是本地开发服务器上编译的代码：

\n

\n

Answer 5

defaultin一词export default function myFunction()可能会导致此错误。或者换句话说：删除这个词default可能会有所帮助。