React TS项目使用Emotion时多主题对象导入导出报错问题咨询

问题排查与解答 #

1. import/export语法是否错误

你写的ES模块命名导出、导入语法本身完全符合规范，不存在语法错误。

2. 是否属于JSX与TSX跨文件导入问题

该报错90%以上属于跨文件导入的配置/缓存问题，两个常见诱因：

• 开发服务缓存：修改导出方式后热更新未同步编译结果，重启本地devServer即可解决
• TS配置未开启JS解析：如果你的tsconfig.json中compilerOptions.allowJs未设置为true，TS默认无法识别.jsx文件的命名导出，仅能识别默认导出，这也是你最初用默认导出时运行正常，改命名导出就报错的核心原因。

3. 是否可以将主题文件改为TSX/TS格式适配Emotion

完全可以，且更推荐在TS项目中这么做，甚至你不需要用.tsx后缀：主题文件中没有JSX渲染逻辑，直接用.ts后缀即可，还能配合Emotion做类型声明，获得完整的类型提示，具体实现参考：

// src/theme.ts
export const themeLight = {
  colors: {
    primary: '#141414',
    // 其余主题配置
  }
}

export const themeDark = {
  colors: {
    primary: '#ffffff',
    // 其余主题配置
  }
}

// 导出主题类型，供全局类型扩展用
export type Theme = typeof themeLight

如果需要让Emotion的useTheme、styled组件自动识别主题类型，可新增全局类型声明文件：

// src/emotion.d.ts
import '@emotion/react'
import type { Theme as CustomTheme } from './theme'

declare module '@emotion/react' {
  export interface Theme extends CustomTheme {}
}

修改完成后在App.tsx中直接按命名导入即可正常运行：

import { themeLight, themeDark } from './theme'

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