javascript - "Uncaught SyntaxError: import not found: default"在一个模块中工作，而不在另一个模块中工作

Question

我有两个 javascript 文件，它们都在同一个网页中使用，并且都使用第三个 javascript 文件的资源。
主 JS 文件 Person6.js，位于网络服务器上的/FamilyTree/Person6.js:

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

和 CommonForm.js，位于 Web 服务器上的/jscripts6/CommonForm.js，您会看到它有一个由主脚本导入的方法。

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

当我单独对这些文件中的每一个运行 eslint 时，除了在脚本中声明的未定义资源之外没有报告任何问题，这些资源通过标签合并到应用程序中:

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

我收到一个错误:

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

第 157 行是从 "../jscripts6/js20/http.js"导入 HTTP；如上图所示。
为什么这个语句嵌入CommonForm.js时会出现语法错误，而嵌入主文件Person6.js时不会？两个文件中的导入前面没有任何内容，只有注释。显然由于导入文件中的这个错误，主文件永远不会执行。我在导入之后发出了警报，但它没有弹出。
我正在尝试将我的代码从 ES3 迁移到 ES6。如何修复此错误？

Answer 1

import HTTP from "../jscripts6/js20/http.js";

相当于

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

和你的错误

import not found: default

是说http.js没有 default导出。使用您发布的片段，情况确实如此。

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 = {};

没有默认导出，有 HTTP导出，要使您的代码按原样工作，您需要这样做

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

还值得注意的是

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

在这种情况下，永远不会评估为 true并且永远不会抛出，因为您明确将其声明为 undefined在 export var HTTP; 中不提供值宣言。