0

I know this is only a few lines of code, but as far as I can tell this is independent from the rest of the project. However anyone thinks more context would be helpful I can post more code. And now for the strangest issue I have ever seen in all my years as a Javascript developer.

Please Help

Is there any reason that these two statements would be different?

require('./themes/'+'purple'+'.json');
require('./themes/'+['purple'][0]+'.json');

The first statement works, but the second does this:

enter image description here

I also tried this:

require('./themes/'+['purple'].pop()+'.json');

And to debug I tried this:

'./themes/'+'purple'+'.json' === './themes/'+['purple'][0]+'.json' // returns true

I don't understand how this is possible. I need to be able to select a theme from an array of themes.

Jon Doe
  • 2,172
  • 1
  • 18
  • 35
  • The first one can be understood to be static, but the interpreter isn't smart enough to see that the second one is effectively static too, I think, thus the error – CertainPerformance Feb 04 '19 at 03:46
  • @CertainPerformance is there any way I can get the non-static require to work so I can dynamically pick I theme? – Jon Doe Feb 04 '19 at 03:49
  • 1
    This question is answered in https://stackoverflow.com/questions/44991669/react-native-require-with-dynamic-string – brentvatne Feb 04 '19 at 05:09

1 Answers1

0

Given your code, I would have a file that exports each theme by name like so:

themes/index.js:

import blueTheme from `./blue.json`
import purpleTheme from `./purple.json`

export { blueTheme, purpleTheme }

Then import each theme individually by name elsewhere:

App.js:

import { purpleTheme } from './themes'
Ben Steward
  • 2,338
  • 1
  • 13
  • 23
  • Using `path.normalize` seems to make it worse. Now even a static string path throws an error. Also not a big deal, but your code overwrites `path` using `const` which can throw an error. Maybe this is an Expo issue. I'm not really sure what they are doing to the React Native JS code when compiling. – Jon Doe Feb 04 '19 at 04:02
  • Is path.resolve helping? If not I’ll just take this answer down so it doesn’t waste anyone’s time. – Ben Steward Feb 04 '19 at 04:04
  • I didn't work, but it was a good idea. The rest of my source code is available [here](https://github.com/christianjuth/flatcal-app) if you are interested. Otherwise, I will keep plugging away until I solve it. This is definitely one of the weirdest errors I have seen with JS. – Jon Doe Feb 04 '19 at 04:08
  • App.js line 16ish? – Ben Steward Feb 04 '19 at 04:10
  • Yup! That's the one. Don't ask why I'm building a calculator. it's kinda just a hello world project. – Jon Doe Feb 04 '19 at 04:10
  • Probably what you want to do is use Context API and a higher order component to wrap your app and pass down your theme. You would then have some state controlling the theme choice which would be choosing from a predefined list of each json file already imported. I’ll try to update my answer a bit. – Ben Steward Feb 04 '19 at 04:17