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

Question

How can I import a JS file with special characters in it's name in React and JSX?

I can

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

(the folder contains tomorrow.js and tomrorrow-night.js)

but I can't:

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

I don't think destructuring works here because it's an import statement.

Answer 1

you can try as

import * as Highlighter from 'react-syntax-highlighter/dist/esm/styles/hljs';

const TomorrowNight = Highlighter[`tomorrow-night`];

Answer 2

How about using the import * as blah import? That gives you an object that you can then lookup any string in.

import * as tmrw from from 'react-syntax-highlighter/dist/esm/styles/hljs';
const tmrw_night = tmrw['tomorrow-height']