导入ColorThief报模块外无法使用import错误且setBio未识别求助

1. 导入语法报错问题 #

报错Uncaught SyntaxError: Cannot use import statement outside a module的原因是：浏览器默认将普通JS文件识别为传统脚本，不支持ES6模块化的import语法。
你需要修改HTML中引入该JS文件的<script>标签，添加type="module"属性：

<!-- 修改前 -->
<script src="你的JS文件路径"></script>
<!-- 修改后 -->
<script type="module" src="你的JS文件路径"></script>

2. setBio函数未被读取的警告问题 #

当你给script标签添加type="module"属性后，JS文件内所有的变量、函数都属于模块私有作用域，不会自动挂载到全局window对象上。而HTML行内的onClick事件只能调用全局作用域下的函数，找不到模块内部的setBio，同时编辑器也会判定这个函数在模块内部没有被调用，因此抛出未读取的警告。
你可以任选一种方案解决：

• 方案1：手动将函数挂载到全局作用域，在setBio函数定义完成后添加一行代码：

  window.setBio = setBio
  

• 方案2（更符合前端规范）：取消HTML行内的onClick绑定，在JS文件内通过事件监听绑定点击事件。先给button添加id属性：

  <button id="searchBtn">Search</button>
  

  然后在JS文件中添加绑定逻辑：

  document.getElementById('searchBtn').addEventListener('click', setBio)
  

补充注意事项 #

• 直接打开本地HTML文件运行时，部分浏览器会因为跨域安全策略阻止模块化JS的加载，建议使用本地静态服务启动项目，比如VS Code的Live Server插件。
• 确认ColorThief的引入路径和你当前JS文件的相对位置匹配，如果你当前的JS文件存放在子文件夹中，需要对应调整import的路径写法。

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