如何解决浏览器JS导入时报'Failed to resolve module specifier "assert"'错误

报错核心原因 #

浏览器原生支持的ES模块规范不允许裸模块导入，也就是导入路径没有/、./、../前缀的写法，和Node.js默认会自动查找node_modules目录的逻辑不同。

解决步骤 #

1. 排查导入语句写法 #

• 先检查所有import语句的路径规则：如果你是导入自己写的本地JS文件，必须补全相对路径前缀和.js后缀，比如和当前文件同目录的导出文件是config.js，正确写法是：

  import { targetVariable } from './config.js'
  

  不能省略./写成import { targetVariable } from 'config.js'，否则浏览器会将config.js识别为裸模块触发报错。
• 如果你的导入语句确实是写了import xxx from 'assert'，说明你在调用Node.js内置的assert核心模块，浏览器原生不支持这类Node专属内置模块，需要按场景做兼容处理。

2. 不同开发场景的适配方案 #

• 纯原生前端项目（无构建工具）：
  • 所有第三方依赖都需要用浏览器兼容的ES模块版本，要么下载到本地后写完整的相对路径导入，要么使用支持ES模块的公开CDN地址导入。
• 用webpack/vite等构建工具的项目：
  • 先执行npm install assert安装适配浏览器的assert依赖包
  • 如果是webpack5项目，需要在webpack配置中新增Node核心模块polyfill配置：

    module.exports = {
      resolve: {
        fallback: {
          assert: require.resolve('assert/')
        }
      }
    }
    

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