ES6 import报错：同目录下index.html引入index.js无法解析lib模块原因求解

首先你的猜测是错误的，index.html 和 index.js 完全可以放在同一目录下，问题出在浏览器缓存。

你看到的报错提示是模块路径不符合浏览器原生ES模块的加载规则：

Uncaught TypeError: Failed to resolve module specifier "lib". Relative references must start with either "/", "./", or "../".

但从你贴的index.js代码来看，导入语句已经正确写了from './lib.js'，说明浏览器运行的并不是你当前写的这个版本的index.js，而是之前的旧缓存版本：大概率你最开始写index.js的时候导入语句写的是import {square} from 'lib'，没有加相对路径前缀./，也没有写.js后缀，浏览器加载了这个错误版本之后缓存到了本地，之后你修正了代码，但浏览器没有拉取最新的文件，还是用了旧缓存，所以一直报错。

你把文件重命名为index2.js之后，浏览器没有这个文件名的缓存，会直接拉取最新的正确代码，所以功能就正常了，和文件名本身没有任何关系。

验证方法 #

你可以把文件名改回index.js，之后用以下任意一种方式操作就能正常运行：

• 打开浏览器开发者工具的「网络」面板，勾选「禁用缓存」选项，之后刷新页面
• 按下强制刷新快捷键：Windows/Linux按Ctrl + Shift + R，Mac按Cmd + Shift + R，直接跳过缓存加载最新资源

补充提示 #

浏览器原生支持的ES模块加载规则和Webpack、Vite等构建工具的规则不同：

• 相对路径必须带./、../、/前缀
• 必须写全文件后缀名.js，不能省略
• 不能直接写第三方包名（比如import React from 'react'），因为浏览器没有自动查找node_modules的能力

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