配置package.json exports后无法通过子路径导入sedcommon/epilog模块

核心问题原因 #

你遇到的报错核心来自两点：

1. React Native 0.61.5配套的Metro打包器版本过低，完全不支持Node.js新增的package.json exports 字段规范
2. 低于4.7版本的TypeScript默认node模块解析策略也不识别exports字段，所以即使普通TS Node项目也会报错

解决方案 #

第一步：调整公共包sedcommon配置（优先做兼容处理） #

修改sedcommon的package.json，补全发布配置和类型映射：

{
    "name": "sedcommon",
    "main": "build/index.js",
    "version": "2.1.4",
    "files": ["build"], // 确保build目录所有文件被发布到npm
    "exports": {
        ".": "./build/index.js",
        "./epilog": "./build/epilog/index.js",
        "./epilog/*": "./build/epilog/*.js"        
    },
    // 适配TS 4.7+的类型识别
    "typesVersions": {
        "*": {
            "epilog": ["./build/epilog/index.d.ts"],
            "epilog/*": ["./build/epilog/*.d.ts"]
        }
    },
...
}

如果要兼容完全不支持exports的旧环境，在sedcommon包根目录新建epilog文件夹，放入两个入口文件做转发：

1. epilog/index.js

module.exports = require('../build/epilog/index.js');

2. epilog/index.d.ts

export * from '../build/epilog/index';

如果需要支持sedcommon/epilog/xxx的子文件导入，按同样结构新增对应文件即可，也可以写脚本批量生成转发文件。

第二步：调整使用方项目配置 #

针对React Native 0.61.5项目

你tsconfig注释里也标注了路径需要和babel配置同步，所以需要同时修改两处配置：

1. 修改babel.config.js，添加module-resolver别名（如果没装这个插件先执行npm i babel-plugin-module-resolver -D安装）：

module.exports = {
  // 保留你原有其他配置
  plugins: [
    // 保留你原有其他插件
    [
      'module-resolver',
      {
        alias: {
          'sedcommon/epilog': './node_modules/sedcommon/build/epilog/index.js',
          'sedcommon/epilog/*': './node_modules/sedcommon/build/epilog/*.js',
        },
      },
    ],
  ],
};

2. 同步修改tsconfig.json的paths配置：

{
  "compilerOptions": {
    "paths": {
      // 保留你原有其他路径配置
      "sedcommon/epilog": ["./node_modules/sedcommon/build/epilog/index"],
      "sedcommon/epilog/*": ["./node_modules/sedcommon/build/epilog/*"]
    }
  }
}

针对普通TS Node项目

• 如果你的TS版本 >=4.7，直接修改tsconfig的moduleResolution为node16即可自动识别公共包的exports配置：

{
  "compilerOptions": {
    "moduleResolution": "node16"
  }
}

• 如果TS版本 <4.7，和RN项目一样在tsconfig的paths里加上面的sedcommon路径配置即可。

验证操作 #

配置完成后清理缓存再测试：

• RN项目执行npx react-native start --reset-cache重启打包服务
• Node TS项目删除node_modules/.cache目录后重新编译

即可正常使用import {EPILOG_RT_EEG_DATA_RECEIVED} from 'sedcommon/epilog'的子路径导入写法。

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