Chrome扩展使用WebPack引入外部库时出现import语法错误

问题出在哪？ #

你直接在popup.html里引入了未经过Webpack打包的business_logic.js，而这个文件里用了ES模块的import语法：

import A11yDialog from 'a11y-dialog'

浏览器加载HTML中的脚本时，默认会把它当作传统非模块脚本处理，不识别import语法，所以抛出Uncaught SyntaxError: Cannot use import statement outside a module错误。

另外，你在package.json里设置的"type": "module"只对Node.js环境或者通过模块方式加载的文件生效，对浏览器直接加载的普通脚本标签不起作用。

两种解决方案 #

方案1：使用Webpack打包后的文件（推荐）

既然你已经配置好Webpack且构建成功，直接修改popup.html的脚本引用，指向Webpack输出的打包后文件（比如dist/bundle.js，具体路径看你的Webpack配置）：

<!-- 替换之前的未打包文件引用 -->
<script src="./dist/bundle.js"></script>

Webpack会把business_logic.js和它依赖的a11y-dialog库一起打包成一个浏览器能直接识别的脚本，不需要处理模块语法，这也是使用Webpack的核心目的之一。

方案2：将未打包脚本标记为ES模块（仅临时测试用）

如果非要直接引入未打包的business_logic.js，需要在popup.html的script标签上添加type="module"属性，告诉浏览器这是ES模块：

<script type="module" src="../server/business_logic.js"></script>

但要注意两个问题：

• 浏览器会按ES模块规则解析import路径，从node_modules引入a11y-dialog需要使用完整的相对路径（比如../node_modules/a11y-dialog/dist/a11y-dialog.js），否则浏览器找不到模块。
• 可能需要调整Chrome扩展的内容安全策略（CSP），确保允许加载模块脚本，本地文件场景下一般无需额外配置。

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