javascript - Vue warn unhandled error during execution of render function, of scheduler flush, and violation scroll-blocking - S

admin管理员组

文章数量:1324816

I've tried to figure out what is happening with this one particular page I have as I get a list of warnings and an error every time I load it

[Vue warn]: Unhandled error during execution of render function 
  at <MovieDetails id="5" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>


[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at /?repo=vuejs/vue-next 
  at <MovieDetails id="5" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'rating')
    at Proxy.render (MovieDetails.vue?e6ee:14)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:444)
    at ReactiveEffectponentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4211)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4337)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4120)
    at processComponent (runtime-core.esm-bundler.js?5c40:4078)
    at patch (runtime-core.esm-bundler.js?5c40:3673)
    at ReactiveEffectponentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4288)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)

5[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>

[Violation] 'setTimeout' handler took 96ms www-embed-player.js:575 

They all really make no sense to me other than the uncaught (in promise) and even that I'm very unsure about because when the page loads (the rating it says it can't read displays as it should). Can anyone tell me what the warning mean and if there is a way to fix them? This is the only page of my project that has this issue. I'll also leave my view here too and if someone might be able to tell my why the rating is throwing the error despite it displaying properly, that would be great!

<template>
  <div class="movie-details">
    <div class="route">
      <h3>
        <router-link to="/movies">
          <span>Movies</span>
        </router-link>
        &emsp;/&emsp;{{ movie.title }}
      </h3>
    </div>

    <div class="flex row">
      <h1>{{ movie.title }} <span class="subtitle">({{ moment(movie.releaseDate).format("YYYY") }})</span></h1>
      <Button title="Edit" @btn-click="editMovie(this.id)" />
    </div>

    <div class="flex flex-info info">
      <span class="details">{{ movie.rating.rating }}</span> |
      <span class="details">{{ movie.movieLength }}</span> |
      <span class="details">{{ movie.genre.genre }}</span> |
      <span class="details">{{ moment(movie.releaseDate).format("D MMMM YYYY") }}</span>
    </div>
    
    <div class="youtube">
      <iframe width="640" height="360" :src="videoEmbed" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    <div class="cast-crew grid">
      <div class="director">
        <h2>Directed By:</h2>
        
        <router-link :to="{name: 'DirectorDetails', params: {id: movie.director.id }}">
          <ListItem>
            {{ movie.director.firstName }} {{ movie.director.lastName }}
          </ListItem>
        </router-link>
      </div>
      <aside class="cast">
        <h2>Actors:</h2>
        <div class="actors grid">
          <div :key="actor.id" class="actor" v-for="actor in movie.actors">
            <router-link :to="{name: 'ActorDetails', params: {id: actor.id}}">
              <ListItem>
                {{ actor.firstName }} {{ actor.lastName }}
              </ListItem>
            </router-link>
          </div>
        </div>
      </aside>
    </div>
  </div>
</template>

<script>
  import moment from "moment";
  import Button from "@/ponents/Button.vue";
  import ListItem from "@/ponents/ListItem.vue";

  export default {
    ponents: {
      Button,
      ListItem,
    },
    props: [
      "id"
    ],
    data() {
      return {
        movie: {},
        moment,
        videoEmbed: "/"
      };
    },
    methods: {
      editMovie(id) {
        this.$router.push({name: "EditMovie", params: { id: id }});
      },
      async fetchMovie(id) {
        const res = await fetch(`api/movies/${id}`);
        const data = await res.json();

        return data;
      }
    },
    async created() {
      this.movie = await this.fetchMovie(this.id);
      
      //eslint-disable-next-line
      const reg = new RegExp('.*?=\s*(.*)');
      const split = reg.exec(this.movie.trailerUrl);
      this.videoEmbed += split[1];
    }
  }
</script>

<style scoped>
  h1 {
    font-weight: bold;
  }

  .subtitle {
    font-weight: 400;
    font-size: 1rem;
  }

  .info {
    font-weight: 300;
    letter-spacing: 1px;
  }

  .details {
    margin: 0 0.8rem;
  }

  .details:first-child {
    margin-left: 0;
  }

  .details:last-child {
    margin-right: 0;
  }

  .youtube {
    margin: 1.5rem 0;
    display: flex;
  }

  .youtube iframe {
    justify-self: flex-start;
    border-radius: 8px;
  }

  .cast-crew {
    height: 110%;
  }

  .cast-crew.grid {
    grid-template-columns: auto 75%;
  }

  .cast-crew a {
    font-weight: bold;
    font-size: 1.125rem;
  }

  .director {
    align-self: flex-start;
    text-align: left;
  }

  .cast {
    padding-left: 1.5rem;
    text-align: left;
    border-left: 2px solid #000;
    align-self: flex-start;
  }

  .actors.grid {
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: auto;
    gap: 0.75rem;
    grid-auto-flow: column;
    justify-content: flex-start;
  }
</style>

I've tried to figure out what is happening with this one particular page I have as I get a list of warnings and an error every time I load it

[Vue warn]: Unhandled error during execution of render function 
  at <MovieDetails id="5" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>


[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs/?repo=vuejs/vue-next 
  at <MovieDetails id="5" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'rating')
    at Proxy.render (MovieDetails.vue?e6ee:14)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:444)
    at ReactiveEffect.ponentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4211)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4337)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4120)
    at processComponent (runtime-core.esm-bundler.js?5c40:4078)
    at patch (runtime-core.esm-bundler.js?5c40:3673)
    at ReactiveEffect.ponentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4288)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)

5[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>

[Violation] 'setTimeout' handler took 96ms www-embed-player.js:575 

They all really make no sense to me other than the uncaught (in promise) and even that I'm very unsure about because when the page loads (the rating it says it can't read displays as it should). Can anyone tell me what the warning mean and if there is a way to fix them? This is the only page of my project that has this issue. I'll also leave my view here too and if someone might be able to tell my why the rating is throwing the error despite it displaying properly, that would be great!

<template>
  <div class="movie-details">
    <div class="route">
      <h3>
        <router-link to="/movies">
          <span>Movies</span>
        </router-link>
        &emsp;/&emsp;{{ movie.title }}
      </h3>
    </div>

    <div class="flex row">
      <h1>{{ movie.title }} <span class="subtitle">({{ moment(movie.releaseDate).format("YYYY") }})</span></h1>
      <Button title="Edit" @btn-click="editMovie(this.id)" />
    </div>

    <div class="flex flex-info info">
      <span class="details">{{ movie.rating.rating }}</span> |
      <span class="details">{{ movie.movieLength }}</span> |
      <span class="details">{{ movie.genre.genre }}</span> |
      <span class="details">{{ moment(movie.releaseDate).format("D MMMM YYYY") }}</span>
    </div>
    
    <div class="youtube">
      <iframe width="640" height="360" :src="videoEmbed" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    <div class="cast-crew grid">
      <div class="director">
        <h2>Directed By:</h2>
        
        <router-link :to="{name: 'DirectorDetails', params: {id: movie.director.id }}">
          <ListItem>
            {{ movie.director.firstName }} {{ movie.director.lastName }}
          </ListItem>
        </router-link>
      </div>
      <aside class="cast">
        <h2>Actors:</h2>
        <div class="actors grid">
          <div :key="actor.id" class="actor" v-for="actor in movie.actors">
            <router-link :to="{name: 'ActorDetails', params: {id: actor.id}}">
              <ListItem>
                {{ actor.firstName }} {{ actor.lastName }}
              </ListItem>
            </router-link>
          </div>
        </div>
      </aside>
    </div>
  </div>
</template>

<script>
  import moment from "moment";
  import Button from "@/ponents/Button.vue";
  import ListItem from "@/ponents/ListItem.vue";

  export default {
    ponents: {
      Button,
      ListItem,
    },
    props: [
      "id"
    ],
    data() {
      return {
        movie: {},
        moment,
        videoEmbed: "https://www.youtube./embed/"
      };
    },
    methods: {
      editMovie(id) {
        this.$router.push({name: "EditMovie", params: { id: id }});
      },
      async fetchMovie(id) {
        const res = await fetch(`api/movies/${id}`);
        const data = await res.json();

        return data;
      }
    },
    async created() {
      this.movie = await this.fetchMovie(this.id);
      
      //eslint-disable-next-line
      const reg = new RegExp('.*?=\s*(.*)');
      const split = reg.exec(this.movie.trailerUrl);
      this.videoEmbed += split[1];
    }
  }
</script>

<style scoped>
  h1 {
    font-weight: bold;
  }

  .subtitle {
    font-weight: 400;
    font-size: 1rem;
  }

  .info {
    font-weight: 300;
    letter-spacing: 1px;
  }

  .details {
    margin: 0 0.8rem;
  }

  .details:first-child {
    margin-left: 0;
  }

  .details:last-child {
    margin-right: 0;
  }

  .youtube {
    margin: 1.5rem 0;
    display: flex;
  }

  .youtube iframe {
    justify-self: flex-start;
    border-radius: 8px;
  }

  .cast-crew {
    height: 110%;
  }

  .cast-crew.grid {
    grid-template-columns: auto 75%;
  }

  .cast-crew a {
    font-weight: bold;
    font-size: 1.125rem;
  }

  .director {
    align-self: flex-start;
    text-align: left;
  }

  .cast {
    padding-left: 1.5rem;
    text-align: left;
    border-left: 2px solid #000;
    align-self: flex-start;
  }

  .actors.grid {
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: auto;
    gap: 0.75rem;
    grid-auto-flow: column;
    justify-content: flex-start;
  }
</style>

• javascript
• vue.js
• vuejs3

Share Improve this question Follow asked Dec 8, 2021 at 23:52 TapialjTapialj 33522 gold badges33 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

Use lodash method _.get() to fix undefined error.

The _.get() method is used to get the value at path of object. If the resolved value is undefined, the defaultValue is returned in its place.

<script>
import _ from 'lodash';
export default {
methods: {
    getValue(object, string, defaultValue = ''): {
      return _.get(object, string, defaultValue)
    }
}
</script>
<template>
    {{ getValue(movie, 'rating.rating') }}
</template>

you can make it as global helper to use later in template

just use null safty like movie?.rating?.rating

本文标签：