Develop Reference

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

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 {...}
Question:
What does this error mean and what do I have to do to correct the error?

Use brackets {} 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 {...}

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';

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:

For the sake of helping anyone bumping into this error and arriving at this page, the word default in export default function myFunction() can cause this error. Or in other words: remove the word default may help.

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);

node: getting error importing CommonJS module however I try to import it

I have a local node module, #em/inVis in my company whose index.d.ts file looks as follows:
import UWeb from "./UWeb";
import UWebParams from "./UWebParams";
export { UWeb, UWebParams };
elsewhere within the app, it's used as follows in typescript files
import { UWeb, UWebParams } from "#em/inVis";
when I try to do that in my TS file, I get the node error:
SyntaxError: Named export 'UWeb' not found. The requested module '#em/inVis' is a CommonJS module, which may not support all
module.exports as named exports. CommonJS modules can always be
imported via the default export, for example using:
import pkg from '#em/inVis'; const { UWeb, UWebParams } = pkg;
so when I try using that approach suggested above, I am getting the node error:
SyntaxError: Cannot use import statement outside a module not sure
what I am doing wrong.

Failed to resolve module specifier "three" as of 137

Coming back to some old project, I discover nothing was loading. Checking the console log I see the following:
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
In my script I got the following:
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three/build/three.module.js"
import { OBJLoader } from "https://cdn.skypack.dev/three/examples/jsm/loaders/OBJLoader.js"
import { FirstPersonControls } from "https://cdn.skypack.dev/three/examples/jsm/controls/FirstPersonControls.js"
I try to step back some versions and not until I reach 0.136.0 does this error go away. Has the way one imports three.js changed, or is this a bug?
Also, would there be some way of catching this at runtime? Like I get the latest version number from Skypack and try an import. If failed, automatically step back a decimal and try again.
Edit
#Mugen87 offers using importmap. I change my code with the following:
<script type="importmap">
{
"imports": {
"three": "https://cdn.skypack.dev/three/build/three.module.js",
"three/OBJLoader": "https://cdn.skypack.dev/three/examples/jsm/loaders/OBJLoader.js",
"three/FirstPersonControls": "https://cdn.skypack.dev/three/examples/jsm/controls/FirstPersonControls.js"
}
}
</script>
<script type="module">
import * as THREE from "three"
import { OBJLoader } from "three/OBJLoader"
import { FirstPersonControls } from "three/FirstPersonControls"
I get the following error:
Uncaught SyntaxError: The requested module '/-/three#v0.137.5-HJEdoVYPhjkiJWkt6XIa/dist=es2019,mode=raw/build/three.module.js' does not provide an export named 'default'

The CDN you're using (cdn.skypack.dev) does some re-exporting on their side, which is causing the problem.
The file you're referencing in your import isn't actually the three.js module, but a re-direct.
That file does an export * (which is fine), AND an export {default}, which is where the failure is occurring. Three.js does not have a default export.
Skypack is likely applying this redirect universally to all modules, so it's not that they necessarily KNOW this is happening, but they should definitely be testing their system before hosting a specific module...
Try changing your importmap to reference the following URL, and it should work:
https://cdn.skypack.dev/-/three#v0.137.5-HJEdoVYPhjkiJWkt6XIa/dist=es2019,mode=raw/build/three.module.js

How to import a variable from a JS file in another JS file that uses Vue CDN? - Uncaught SyntaxError: Unexpected identifier

I'm new to Vue, and been trying to import a variable that consists of API key necessary for my app.js where Vue CDN is used.
But I received this error:
Uncaught SyntaxError: Unexpected identifier app.js:1
Everything else works fine, only I have issue with importing.
The preview of my code:
//---config.js---
export const key = 'someKey';
//---app.js---
import key from './config.js'
new Vue({
...,
components: {
key
},
...
P.S. is there a way to make it work without using Vue CLI?

if you want to use import/export you should add type="module" in script tag in html. Like this.
<script type="module" src="index.js"></script>
And as you used export instead of default export when importing use:
import {key} from './config.js'

Where are you using import export statement? (Chrome, Firefox and etc). To understand where import export statement work you should check Browser compatibility.

Foundation "Uncaught SyntaxError: Unexpected token import"

I'm taking over development from a previous developer who added Zurb Foundation as a framework to our website. Foundation has been installed with npm. I'm getting errors in the console for all of the foundation javascript files as follows:
Uncaught SyntaxError: Unexpected token import
Checking the code, foundation.core.js has the lines:
"use strict";
import $ from 'jquery';
import { GetYoDigits } from './foundation.util.core';
import { MediaQuery } from './foundation.util.mediaQuery';
I'm including jQuery right before any other JS is included in my HTML doc. Not sure what the deal is here. Can anyone offer help?
Thanks.

The syntax for an as would be the following:
import * as $ from 'jquery';
import { GetYoDigits } from './foundation.util.core';
import { MediaQuery } from './foundation.util.mediaQuery';
This is saying to take all exports from the node module jquery and make them live under the keyword $. You should then be able to use $ as expected.

You need to change the way you import it
"use strict";
import {$} from 'jquery';