Vue.js Error "Cannot find module './undefined'" from webpack when using src=require()

Question

I am trying to load images from a local folder using the src="" from the img tag but I want to load them using the backend. The frontend already has the relative path which is "../assets/imgs/" the backend just has the name and extension ex) "1.png". Thing is that it does work but I'm getting error messages.

This is causing me an issue

<img width=100px height=100px :src="getIconPath(`${user.icon}`)"/>

here is the function that gets called

  methods: {
    getIconPath(iconName) {
      return iconName ? require("../assets/imgs/" + iconName) : ''
    }

Here are both the error messages I am getting on the console

[Vue warn]: Error in render: "Error: Cannot find module './undefined'"
found in
---> <Profile> at src/components/profile.vue
       <Navbar> at src/components/navbar.vue
         <Main> at src/main.vue
           <Root> vue.runtime.esm.js:619
Error: "Cannot find module './undefined'"
    webpackContextResolve .*$:13
    webpackContext .*$:8
    getIconPath profile.vue:74
    render profile.vue:12
    VueJS 43
    <anonymous> main.js:31
    js app.js:1415
    __webpack_require__ app.js:785
    fn app.js:151
    1 app.js:1488
    __webpack_require__ app.js:785
    checkDeferredModules app.js:46
    <anonymous> app.js:861
    <anonymous>

I found very little resources to help out but many of them have said that required fixes their issues. So far I tried moving it to a different folder, moving the require as a function method, using absolute path, using v-attr, and binding it without require. Still I haven't had any luck getting rid of the error message. Here is another link of someone else having the same issue as me but I still couldn't figure out how they fixed it.

https://forum.vuejs.org/t/how-to-fix-the-console-log-error-when-using-require-method-to-bind-an-img-src/77979

I would very much appreciate the help!! I've been stuck for many hours on this and I can't seem to find a helpful solution. If this isn't a good way to go about loading images from the backend feel free to suggest any other alternative ways to do so. Thank You!

Please edit your question instead of putting code in the comments section. Please also provide all relevant information such as where the user (or is it image) data comes from and what its data format looks like — Phil
– Phil, Commented Apr 29, 2020 at 3:52
noted thank you sorry this is my first time! I edited my post hope that makes a lot more sense. — Victor
– Victor, Commented Apr 29, 2020 at 3:58
Where does user come from? Is it loaded asynchronously? If so, what does its initial data look like (before it's loaded)? — Phil
– Phil, Commented Apr 29, 2020 at 4:01
user comes from my store. I named it that way. Honestly I have no clue if it is loaded asynchronously. I am using axios to connect to my api not sure if that's useful to know. Actually I changed it to getIconPath(user.icon) as you mentioned and it is loading without any error messages! — Victor
– Victor, Commented Apr 29, 2020 at 4:08

Phil · Accepted Answer · 2020-04-29 04:14:50Z

11

I'm going to take a guess here and say that user is populated with data asynchronously. I bet you have something like this in your initial data or store

{
  user: {}
}

The issue here is that user.icon is undefined, at least for some period of time. Where you are needlessly converting that into a string with

getIconPath(`${user.icon}`)

will convert undefined into the string "undefined" (because JavaScript is fun like that), hence your error message. The simple solution is to not use a string template, ie

getIconPath(user.icon)

To avoid these sorts of problems, I would instead use a computed property to resolve image imports. This is more efficient than executing a method in your template which happens on every tick

computed: {
  userWithIcon () {
    return {
      ...this.user, 
      icon: this.user.icon && require(`../assets/imgs/${this.user.icon}`)
    }
  }
}

and in your template

<img width="100px" height="100px" :src="userWithIcon.icon">

edited Apr 29, 2020 at 4:14

answered Apr 29, 2020 at 4:07

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Victor Over a year ago

AH THIS MAKES SO MUCH SENSE NOW!!! THANK YOU!!! VERY MUCH!!! Is there any way to add to your reputation or something? I appreciate it! :D

Phil Over a year ago

@VictorDanielCampa you're welcome and by accepting my answer, you've already given me those delicious reputation points 😋

Narhzih · Accepted Answer · 2021-06-25 08:50:42Z

0

I had a similar issue recently and I was able to solve it by making sure that my data was ready before rendering the view. using @Phil assumption that you have something like user: {} in your data, you can just wrap your whole HTML in <div v-if="user !== null"></div>. This makes sure that the user data is ready before even trying to render any image at all or use any data from the user object.

This should eliminate any error at all.

answered Jun 25, 2021 at 8:50

Narhzih

214 bronze badges

Collectives™ on Stack Overflow

Vue.js Error "Cannot find module './undefined'" from webpack when using src=require()

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related