在React和JSX中如何导入文件名含特殊字符的JS文件？

你的判断正确，ESModule 导入解构不支持直接使用带连字符的标识符，只需给目标导入名加引号并通过as重命名为合法变量名即可解决，示例如下：

import { 'tomorrow-night' as tomorrowNight } from 'react-syntax-highlighter/dist/esm/styles/hljs';

后续代码中直接使用重命名后的tomorrowNight变量即可正常调用对应样式。

原理说明 #

• JavaScript 变量命名规则不允许包含连字符，直接写import { tomorrow-night }会被JS引擎识别为tomorrow 减去 night的运算表达式，属于语法错误，无法正常解析
• 针对包含特殊字符的导出属性，用引号包裹导入名指定要匹配的导出项，再通过as重命名为符合命名规范的变量（比如驼峰格式）是标准的兼容写法。

如果是 CommonJS 导入场景，可使用以下两种写法：

// 写法1：先导入整个模块再取属性
const hljsStyles = require('react-syntax-highlighter/dist/esm/styles/hljs');
const tomorrowNight = hljsStyles['tomorrow-night'];

// 写法2：带别名的解构写法
const { 'tomorrow-night': tomorrowNight } = require('react-syntax-highlighter/dist/esm/styles/hljs');

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