使用NPM搭建Google Sheets Reader时遇模块导入及未定义错误求助

问题根源 #

• 报错Cannot use import statement outside a module：浏览器默认将普通<script>标签识别为非模块脚本，不支持ES6的import语法。
• 报错Uncaught ReferenceError: GSheetProcessor is not defined：注释import语句后，未正确引入目标模块，导致全局作用域中找不到该变量。

分步解决方案 #

1. 修正HTML的脚本引用规则 #

给引入index.js的<script>标签添加type="module"属性，明确告知浏览器这是ES模块脚本：

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <title>Google Sheets Reader</title>
  </head>
  <body>
    <main id="output">...loading</main>        
    <script type="module" src="./index.js"></script>
  </body>
</html>

2. 恢复并验证import语句 #

取消index.js中import语句的注释，同时确认文件路径与实际目录结构匹配：

// 请根据你的项目目录层级调整路径，比如若index.js在根目录、src也在根目录，路径应为./src/gsheetsprocessor.js
import GSheetProcessor from '../src/gsheetsprocessor.js';  

// 保留你的GSheetProcessor调用代码
GSheetProcessor({
  // 此处填写你的配置参数
})

3. 匹配模块导出方式 #

检查gsheetsprocessor.js的导出规则：

• 如果是默认导出（比如export default GSheetProcessor），当前import写法正确；
• 如果是命名导出（比如export { GSheetProcessor }），需要修改为：

  import { GSheetProcessor } from '../src/gsheetsprocessor.js';
  

优化建议 #

没必要手动克隆仓库到项目文件夹，直接使用npm安装的包更规范，可将index.js的import语句改为：

import GSheetProcessor from 'g-sheets-api';

同时确保用本地服务器（比如npx serve）打开HTML文件，避免直接打开本地文件引发的CORS或模块加载异常。

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