使用ES6 import导入模块时获取HTML组件报错：document未定义

核心问题 #

document是浏览器环境特有的API，Node.js作为服务器/命令行运行环境，压根不存在这个对象。你直接用node index.js运行依赖浏览器DOM的代码，自然会报document is not defined的错误。

关于之前require的情况 #

你之前用require时没出问题，肯定不是用Node.js直接跑的脚本，而是通过浏览器加载HTML文件执行代码的——此时代码在浏览器环境里，document是存在的。改成import后，你错误换成了用Node.js直接运行，才触发了这个报错。

正确运行方式 #

• 别再用node index.js执行这段代码
• 启动本地HTTP服务器（比如用npx serve、live-server，或者VS Code的Live Server插件），然后在浏览器里打开你的HTML文件，代码会在浏览器环境中运行，document就能正常获取DOM元素了。

额外说明 #

你在package.json里设置type: module只是让Node.js支持ES模块的import语法，但这改变不了Node.js没有浏览器DOM API的本质。你的代码是前端浏览器代码，必须在浏览器环境里执行。

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