在同一JS文件中使用import与普通JS代码时函数未定义的解决方法

当你在JS文件中使用import语句时，该文件会被浏览器当作ES模块处理。ES模块拥有独立的作用域，模块内定义的函数（比如FunctionOfMainJs）默认不会挂载到全局window对象上；同时如果HTML中引用脚本时未声明type="module"，浏览器会直接报错无法解析import语法，进而导致后续函数未被定义。

具体解决步骤 #

1. 正确声明模块类型 #

在HTML中引用main.js时，必须添加type="module"属性，否则浏览器无法识别ES模块语法：

<script type="module" src="main.js"></script>

2. 仅内部调用函数（无需全局暴露） #

如果只是在main.js内部调用FunctionOfMainJs，只要确保脚本以模块方式加载，你的原代码本身可以正常执行——之前的报错大概率是因为没加type="module"导致import解析失败，进而函数未被定义。

3. 需要外部调用函数（需全局暴露） #

如果要在模块外部（比如HTML内联脚本、其他非模块脚本）调用FunctionOfMainJs，需要主动将函数挂载到全局window对象：
修改main.js代码：

import {CreateDropDown} from "./asset/js/customdropdown.js";

new CreateDropDown([{"ImagePath":null,"OptionValue":"text1"}],"Container");

function FunctionOfMainJs(){
    alert("hey guys");
}

// 将函数暴露到全局作用域
window.FunctionOfMainJs = FunctionOfMainJs;

// 内部正常调用
FunctionOfMainJs();

内容的提问来源于stack exchange，提问作者Jainil Prajapati