Eval function not working in production

I was using eval function for dynamic loading of vue component. It was working fine in development server while runnign npm run dev. After project build (npm run build) it is not working.

Code

import { onMounted, reactive } from 'vue';
import Frames from "../components/Bills/Frames.vue";
const steps = reactive([]);

onMounted(() => {
  				steps.push({
                        title: 'Frames',
                        component_name: eval('Frames'),
                });
})

this is working fine in local. Once I build the project I'm getting a error as

error ReferenceError: Frames is not defined
    at eval (eval at <anonymous> (app-1fe63c09.js:41:49710), <anonymous>:1:1)
    at app-1fe63c09.js:41:49710
    at Array.map (<anonymous>)
    at app-1fe63c09.js:41:49648

martinbean

3 years ago

Level 80

@shariff You need to read the error message. The problem isn’t with eval. The problem is, you’re calling Frames which isn’t defined.

You also shouldn’t be using eval as it’s wholly unsafe to be executing arbitrary JavaScript like that. Load your components properly.

shariff

3 years ago

Level 51

@martinbean Frames is a component. I'm importing in the top. Any other way to import component other than using eval?

martinbean

3 years ago

Level 80

@shariff Yes. By importing it?

import Frames from './components/Bills/Frames.vue';

onMounted(() => {
    steps.push(Frames);
});

shariff

3 years ago

Level 51

@martinbean The component name is coming from API. The component name will be in string type. So I was using eval function. But it's not working in server.

Please or to participate in this conversation.