He estado jugando con este problema por un tiempo, estoy colocando algunas variables de estilo (azul, rojo, amarillo) en un archivo separado y las estoy importando en un módulo para usarlas.

Tengo un problema para entender cómo almacenamos los valores allí.

1) declaración de importación
Si utilizo la declaración de importación, puedo obtener los valores de mi clase con console.log(blue), console.log(eval(blue)) pero no puedo leerlo con console.log(eval(formColor)) . formColor es una cadena que es igual a "azul", "rojo" o "amarillo".

Recibo este error para console.log(eval(formColor)) y no puedo explicar por qué:

2) usando constante
Si defino las variables de estilo directamente al principio de mi archivo, antes de la definición de la clase, puedo acceder a ellas con un archivo console.log(blue/eval(blue)/eval(formColor))

Mi pregunta es, quiero reutilizar estas variables en otro lugar, por lo que deberían almacenarse en otro archivo para aclarar el código. ¿Cómo puedo lograr eso?

Para su información, estoy usando Rails y Stimulus en este proyecto.

radio_style.js (archivo donde defino algunas variables de estilo)

 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 (archivo donde quiero importar las variables de estilo en mi clase de controlador)

 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)); ... } }

Directorios: