NX创建的JS模块无法在HTML script标签中导入的问题求助

临时修复：调整导入语法 #

你的模块是CommonJS格式（使用exports.isEven导出），而浏览器的type="module"采用ES模块语法，默认导入（import isEven from '...'）对应ES模块的export default，但你的模块是具名导出，因此需要改成具名导入：

<script type="module">
    import { isEven } from "../packages/is-even/dist/index.js";
    // 测试使用
    console.log(isEven(2)); // 预期输出true
</script>

根本解决方案：让NX输出ES模块格式 #

临时修复能解决当前问题，但更规范的方式是配置NX，让模块直接输出浏览器兼容的ES模块：

1. 找到模块根目录下的package.json（如packages/is-even/package.json），添加或修改字段：

   {
     "type": "module",
     "main": "./dist/index.js",
     "module": "./dist/index.js"
   }
   

2. 调整NX的构建配置，在project.json的targets.build.options里设置输出格式为ES模块：

   {
     "targets": {
       "build": {
         "executor": "@nx/js:tsc",
         "options": {
           "format": ["esm"],
           "outputPath": "dist/packages/is-even",
           "tsConfig": "packages/is-even/tsconfig.lib.json",
           "main": "packages/is-even/src/index.js"
         }
       }
     }
   }
   

3. 重新构建模块：nx build is-even
4. 此时模块会输出ES格式，既支持具名导入，也可按需设置默认导出，更适配浏览器环境。

另外提醒：你手动添加的const exports = {};完全多余，NX构建工具会自动处理模块导出逻辑，建议删除避免冲突。

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