"Uncaught SyntaxError: import not found: default" works in one module and not in another

user_5054721 0
Viewed 11109

I have two javascript files which are both used in the same web page and which both use the resources of a third javascript file.

The main JS file Person6.js, at /FamilyTree/Person6.js on the webserver:

import HTTP from "../jscripts6/js20/http.js";
import {iframe, actMouseOverHelp, openFrame, openSignon, debug, args,
        getOffsetLeft, getOffsetTop, popupAlert, show,
        showHelp, hideHelp, helpElt, keyDown,
        eltMouseOver, eltMouseOut}
            from "../jscripts6/util.js";
import {capitalize} from "../jscripts6/CommonForm.js";
import Cookie from "../jscripts6/Cookie.js";

and CommonForm.js, at /jscripts6/CommonForm.js on the web server, which you see has one method imported by the main script.

import HTTP from "../jscripts6/js20/http.js";
import {getOffsetLeft, getOffsetTop, popupAlert, 
        helpDiv, eltMouseOver, eltMouseOut, displayHelp}
            from "../jscripts6/util.js";

When I run eslint over each of these files individually there are no problems reported except undefined resources which are declared in scripts which are incorporated in the application through tags:

    <script src="/jscripts/tinymce/js/tinymce/tinymce.js" type="application/javascript">
    </script>
    <script src="/FamilyTree/Person6.js" type="module">
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?v=3.43&callback=initializeMaps&region=$GOOGLECC&key=$GOOGLEKEY" type="application/javascript"></script>

I am getting an error:

Uncaught SyntaxError: import not found: default CommonForm.js:157:7.

line 157 is import HTTP from "../jscripts6/js20/http.js"; as shown above.

Why is this statement a syntax error when it is embedded in CommonForm.js, but not when it is embedded in the main file Person6.js? There is nothing in front of the imports in either file but comments. Apparently because of this error in the imported file the main file is never executed. I put an alert just after the imports and it did not pop.

I am trying to migrate my code from ES3 to ES6. How do I fix this error?

ecmascript-6 javascript
1 Answers
import HTTP from "../jscripts6/js20/http.js";

is the equivalent of

import { default as HTTP } from "../jscripts6/js20/http.js";

and your error

import not found: default

is saying that http.js does not have a default export. With the snippet you posted, that is indeed the case.

export var HTTP; 
if (HTTP && (typeof HTTP != "object" || HTTP.NAME)) 
  throw new Error("Namespace 'HTTP' already exists"); // Create our namespace, and specify some meta-information 
window.HTTP = HTTP = {};

does not have a default export, is has an HTTP export, For your code to work as-is, you would need to do

import { HTTP as HTTP } from "../jscripts6/js20/http.js";
// or shortened
import { HTTP } from "../jscripts6/js20/http.js";

it is also worth noting that

if (HTTP && (typeof HTTP != "object" || HTTP.NAME))

in this context will never evaluate to true and will never throw, because you're explicitly declaring it as undefined by not providing a value in the export var HTTP; declaration.

user_7850650
Related