WebStorm调试器import报错 如何使用package.json指定外部库

测试代码时引入lodash库遇到两类报错：

1. 代码内写import语句时，WebStorm调试器抛出ReferenceError
2. 调试控制台内输入import语句时，抛出SyntaxError
   目标是正常使用package.json中声明的外部依赖。

前置检查 #

• 先在项目根目录执行依赖安装命令npm install lodash，确认根目录下node_modules文件夹存在lodash包，package.json的依赖项中已写入lodash对应版本。
• 如果使用ESM规范编写代码，确认package.json中已配置"type": "module"，避免和CommonJS规范混用导致解析异常。

修复代码内import报ReferenceError的问题 #

• 打开WebStorm的运行/调试配置面板，找到当前使用的Node.js调试项，将工作目录配置为项目根目录（即存放package.json和node_modules的目录层级），不要设置为测试文件所在的子目录，否则Node无法正常向上查找依赖路径。
• 如果是跑单元测试场景，不要直接用裸Node.js配置运行测试文件，选择对应测试框架（Jest/Vitest等）的官方配置模板创建调试项，框架会自动处理依赖解析、规范适配的逻辑。

修复调试控制台import报SyntaxError的问题 #

WebStorm调试控制台默认不支持ESM顶层import语法，可通过两种方式绕开：

• 使用动态导入写法，在控制台输入const _ = await import('lodash')后回车，Node 16+版本默认支持该写法，导入后即可正常调用lodash的方法。
• 将WebStorm升级到2023.2及以上版本，新版本调试控制台已原生支持ESM顶层import语法，可直接在控制台写静态import语句。
• 临时调试也可以用CommonJS的require写法：const _ = require('lodash')，注意该写法仅适合控制台临时调用，不要写入ESM规范的业务代码中。

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