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

Question

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.

score 2 · Accepted Answer · answered Oct 22 '21 at 06:00

2

you can try as

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

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

answered Oct 22 '21 at 06:00

Shyam

thanks for answer but one thing I found out is after importing the name now is in Snake format instead of kabab format ,I mean `const tmrw_night=Highlighter['tomorrowNight']` any idea why? – Toby Maguire Oct 22 '21 at 07:25
file name would be in kabab case so while requiring you import from file in kabab. while function would be exported in snake case. not sure until we see script in details. check this for more details https://stackoverflow.com/questions/46677752/the-difference-between-requirex-and-import-x – Shyam Oct 22 '21 at 10:02

score 2 · Answer 2 · answered Oct 22 '21 at 06:00

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']

answered Oct 22 '21 at 06:00

nlta

thanks for answer but one thing I found out is after importing the name now is in Snake format instead of kabab format ,I mean `const tmrw_night=tmrw['tomorrowNight']` dont know why – Toby Maguire Oct 22 '21 at 07:23

2 Answers2