SyntaxError: ambiguous indirect export: default Error when importing my own class

Question

I have written a validation class and want to include it in my VueJS 3 project. Unfortunately I get the following error: SyntaxError: ambiguous indirect export: default

This is my code:

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

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

export default {...}

What does this error mean and what do I have to do to correct the error?

Fungiform

Answer 1

Use braces {} around your import Name

// ..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 {...}

Vaclava

It worked, but why? – Clericals

Answer 2

Incompatibility of ES and CommonJS Modules Causes This Error

The most probable cause of this exception is inconsistency of syntaxes of ES and CommonJS modules. Using different syntax conventions in the same module can lead to conflicts resulting in syntax errors and runtime errors. I, for example, encountered this error (Chrome browser):

Uncaught SyntaxError: The requested module '/node_modules/axios/index.js?v=fae0673e' does not provide an export named 'default' (at index.ts:1:8)

In Firefox, the error text is as follows:

Uncaught SyntaxError: ambiguous indirect export: default

In 2023, you're most likely using ES syntax, but the libraries you're plugging in are most likely distributed in CommonJS syntax.

To determine the syntax:

• look in package.json and check the module and main fields: if there is a file there with the extension .mjs or .js, this indicates the ES module format;
• if the main field points to a file with .cjs extension (or the file uses require syntax), it points to the CommonJS format.

In my case, the error pointed to the following line:

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

I knew I was using ES6, but was unsure about axios 0.27.2. Opening its package.json, I found the "main": "index.js" property, but inside the file itself I saw CommonJS syntax:

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

The require meant that I was trying to import a CommonJS module from my ES module, which caused the error.

Solution

The solution was pretty simple: upgrade axios to version 1.4.0, where the library uses ES syntax by default and CommonJS provides on-demand:

npm i axios@latest

Another possible solution

import * as axios from "axios";
const defaultExport = axios.default;

First we import all exported values from "axios" module and pack them into one object named "axios", and then we access the default exported variable.

You can also consult MDN for detailed help on imports.

Wounded

Thanks for the explanation... It wasn't obvious that import * as d3 from 'd3'; is not the same as import d3 from 'd3'; — the latter gave me ambiguous indirect export: default, the former worked. – Drus

Answer 3

I found that none of the tsconfig, package.json fixes would never work for me. Hopefully the following helps someone in the future.

I was consistently getting this error when working with Vite projects and not Webpack projects. I would not be able to import anything, named or otherwise.

On one Svelte code base I ran the Svelte CLI sync command and it mentioned a type import was breaking the importsNotUsedAsValues or preserveValueImports and that I should explicitly mark the import as a type.

The import statement in question:

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

TUser exported as:

export type TUser = { ... }

Errors

Would cause the following errors:

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)

Solution

Doing the following fixed the issue for me.

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

Cay

I had the case where, importing Ref from vue, I had the "ambiguous indirect export" but not a better understandable error. Replacing import { Ref } from "vue" by import { type Ref } from "vue" did the trick, as I just needed the interface declaration. – Sulph

Answer 4

My story: WebStorm generated .js files right next to .ts files (because I once enabled the Recompile on changes option), so my app tried to import from .js files instead of .ts one. That was the reason for the import problems.

This is the compiled code on the local dev server:

Wounded

Answer 5

The word default in export default function myFunction() can cause this error. Or in other words: remove the word default may help.

Collaborationist

Answer 6

In my case I had the curly braces where I shouldn't have. I had a JSON file and import { users } from ... where instead I should have no curly braces like so:

import users from './users.json';
console.log("users", users);

Begrime

Answer 7

Maybe it's just an incorrect import caused by a bad refactor

In my case, I had a actual syntax error in my code. I had renamed a method in one file, but never fixed the name in the other files. I guess my IDE's auto-refactor didn't work in that instance.

Error message reported from file2: SyntaxError: ambiguous indirect export: something

The error is clear when looking at this simple example. It's less clear when knee deep in a coding session, making lots of changes.

File 1

import { something } from 'file2'

File 2

// this function used to be named "something", but then I renamed it
export function somethingRenamed() { }

Krebs

Answer 8

This could also be caused by using module.exports = FormValidator; instead of export default FormValidator;.

Ready

Answer 9

In a React + Vite project with VSCode I got this error too. But it turned out the error was transient and fixed itself:

Simple App.tsx: import {Test} from './Test' ... Test() Resulted in "ambiguous indirect export"
( npx vite dev --open )

Test.ts has interface, type, class, and
export const Test = () => { let test = new Test()... }

Not sure what the error was I added export to the interface, type, and class, and that worked without error. Then to see which one fixed the issue I removed the export directives one at a time. But after removing all of them (except on the Test function itself of course) the project ran without error.

In summary, our colleagues here are sharing the fact that they made changes and the problem went away. But I'm thinking the cause and remedy for this "can" be due to something unrelated to the code, transient, and perhaps non-reproducible. Try closing and reopening VSCode. Try the other solutions and then reversing them out. I'll come back with an Edit if I can reproduce this.

Platt

Answer 10

This is in case of vite/react In my case this error was solved by writing rafce in all the files so that all files in components are exported to App.jsx and from App.jsx to main.jsx

It is your choice whether you want to use curly braces and remove default or use default for example:

export default App

or

export {App}

Quincentenary

Answer 11

I was getting the error trying to import a UI package I built to an app from within the same monorepo.

Uncaught SyntaxError: ambiguous indirect export

In my case, I needed to change the settings in the package.json. I needed to make sure to have the "module" specified, as well as make sure that ESM files were getting generated in the /dist folder output. Note the ```--format esm,cjs" here, whereas before I only had "--format cjs".

package.json:

  ...
  "main": "./dist/index.js",
  "module": "./dist/index.mjs",
  "types": "./dist/index.d.ts",
  "files": [
    "dist/**"
  ],
  "scripts": {
    "build": "tsup src/index.tsx --format esm,cjs --dts --external next @emotion/react @emotion/styled @mui/material react react-dom",
    "dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external next @emotion/react @emotion/styled @mui/material react react-dom --sourcemap",
    ...
  },
  ... 

Apothecium

Answer 12

Adding my potential reason to the pile after none of the previous answers were the problem - an outdated version of the import file was cached...

Clearing browser cache and reloading fixed it.

Oxalis