[Vuejs]-Cannot find module './undefined' when updating a template ref in Vue

by

1👍

I can’t explain the console.logs at the bottom of your question, but based on the child component code I believe there are two changes needed to fix the overall issue.

  1. require shouldn’t ever be used in code when using Vite since require is ESM only. The Vite documentation describes a better way to import dynamic assets using new URL with import.meta.url. One caveat is that you can’t use @ alias when constructing the URL due to Rollup limitations (Vite’s bundler). Your imgSrc then should look like this:
const imgSrc = computed(
  () => new URL(`../assets/images/subject/${subject.value.image}`, import.meta.url).href
);

(actual relative path might be different on your local machine)

  1. Change from using reactive to toRef when creating subject. Since props is reactive and you want to pull out the individual (non-reactive) property, you would use toRef for the job specifically because it keeps subject and props.subject synced together.
const subject = toRef(props, 'subject');

I don’t have your exact same setup but when I tested it locally with some mock data/local image files instead of an API it worked for me. If you still have problems let me know.

👤yoduh

Leave a comment