0

I have been playing with this issue for a while, I am placing some styling variables (blue, red, yellow) in a separate file and I am importing them in a module to use them.

I have a problem understanding how we store the values there.

1) import statement
If I use the import statement, I can get the values in my class with a console.log(blue), console.log(eval(blue)) but I can't read it with console.log(eval(formColor)). formColor is a string that is equal to "blue", "red", or "yellow".

I get this error for console.log(eval(formColor)) and can't explain why: enter image description here

2) using const
If I define the styling variables directly at the beginning of my file, before the class definition, I can access them with a console.log(blue/eval(blue)/eval(formColor))

My question is, I want to reuse these variables somewhere else so they should be store in another file to make the code clear. How can I achieve that?

FYI, I am using Rails and Stimulus on this project.

radio_style.js (file were I define some styling variables)

const blue = { classToApplyNotChecked: [
"flex",
"justify-center",
"items-center",
"bg-white",
"rounded",
"border-2",
"border-blue-200"], classToApplyChecked: [
"flex",
"justify-center",
"items-center",
"bg-blue-200",
"rounded",
"border-2",
"border-blue-400"],};

form_controller.js (file were I want to import the styling variables in my controller class)

import { Controller } from "stimulus";
// import { blue, red, yellow } from "../plugins_variables/radio_style";

const blue = {...};

export default class extends Controller {
  static get targets() {
    return ["formWrapper", "errorMessage"];
  }
  ...
  styleRadio(){
    ...
    console.log(blue);
    console.log(eval(blue));
    console.log(formColor); // formColor retrieves a string value equal to "blue", "red" or "yellow"
    console.log(eval(formColor));
    ...
  }
}

Directories:
enter image description here

Mathieu EUSTACHY
  • 55
  • 8
  • I guess you're using `Webpack` to compile JS/CSS assets, so `Webpacker` should know how to include `radio_style.js` into compiled assembly. Try to add `import "plugins_variables/radio_style"` into `app/javascript/packs/application.js` – Lyzard Kyng Oct 18 '21 at 05:26
  • Hi, thank you for your answer, I put `import "../plugins_variables/radio_style";` in my `app/javascript/packs/application.js` then I uncommented the `import { blue, red, yellow } from "../plugins_variables/radio_style";` and commented out `const blue = {...}` in my `form_controller.js`. However I get the same error `ReferenceError: blue is not defined`. – Mathieu EUSTACHY Oct 19 '21 at 08:36
  • First `import` (in `application.js`) don't need `../` prefix, because paths for `packs` are relative from `javascript` directory – Lyzard Kyng Oct 19 '21 at 09:05
  • Just tested it, it did not resolve the problem. I can read the value of blue with `console.log(blue/eval(blue))` but when I try to read it with `console.log(eval(formColor))` with formcolor = "blue" it gets me this `ReferenceError: blue is not defined` again. I must miss something but I can't figure what... – Mathieu EUSTACHY Oct 19 '21 at 12:08
  • Check how the assembly is compiled by Webpack: maybe there's some syntax error in `radio_style.js` and it can't be used obviously – Lyzard Kyng Oct 19 '21 at 17:57
  • Well, when I use `import { blue, red, yellow } from "../plugins_variables/radio_style";`, it is working properly for `console.log(blue/eval(blue))` so I guess there is no error in radio_style.js? The thing is it does not work for the `eval(formColor)` with formColor = blue that troubles me... – Mathieu EUSTACHY Oct 20 '21 at 08:15
  • 1
    Maybe you refactor `radio_style.js` code making `blue`, `red`, `yellow` properties of one object and then `import` this object. After that you simply write `importedObject[formColor]` like [here](https://stackoverflow.com/a/10953396) – Lyzard Kyng Oct 20 '21 at 08:44
  • Hi Lyzard, I refactored as you offered and... it works! Thank you very much, the code is a bit cleaner this way also. I still do not understand why it did not work with the first method, I guess it is related to the way Webpack compiles things. – Mathieu EUSTACHY Oct 21 '21 at 08:17

0 Answers0