Vite项目中@decky.fx/react-native-essentials无法解构导入问题咨询

核心原因 #

你遇到的问题本质是模块导出结构不匹配：

• 当直接导入@decky.fx/react-native-essentials时，Vite会依据package.json的main字段加载lib/index.js，但该文件里的Store仅作为默认导出对象的属性存在，而非独立的命名导出。
• 举个例子，lib/index.js的代码可能是这种结构：

  export default { Store: /* Store类/对象定义 */ };
  

  这种情况下，import { Store } from 'xxx'会找不到对应的命名导出，自然返回undefined；而import All from 'xxx'拿到的是默认导出的整个对象，所以All.Store能正常访问。

解决办法 #

1. 调整模块导出方式 #

修改lib/index.js，同时支持命名导出和默认导出，兼顾两种导入场景：

// 先定义Store的具体实现
class Store { /* ... */ }

// 新增命名导出，支持解构导入
export { Store };
// 保留默认导出，兼容现有代码逻辑
export default { Store };

2. 检查打包配置（若模块为打包生成） #

如果lib/目录是通过Rollup、Webpack等工具打包产出的，需确保打包配置正确处理命名导出：

• 比如使用Rollup时，在rollup.config.js中设置output.exports: 'named'，保证命名导出被正确保留在打包产物中。

3. 同步更新类型定义文件 #

修改lib/index.d.ts，添加对应的命名导出类型，保证TS类型提示正常：

export declare class Store {
  // 补充Store的具体类型定义
}

// 保留默认导出的类型（若需要兼容原有默认导入逻辑）
declare const _default: { Store: typeof Store };
export default _default;

完成以上调整后，你就能像使用React那样，通过import { Store } from '@decky.fx/react-native-essentials'直接解构导入了。

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