Unhandled error during execution of setup function - Исправление ошибок и поиск оптимальных решений проблем

I want to render markdown in my component, which usually can be done with the marked library which can be installed like so:

yarn add marked

and used in a component like so:

<template>
  <div id="article" class="article page">
    <div v-html="test"></div>
  </div>
</template>


<script setup>
import marked from "marked";

const test = marked('<p>hello</p>')
</script>

But for whatever reason it throws a bunch of errors:

[Vue warn]: Unhandled error during execution of setup function 
  at <Article onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  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.org/?repo=vuejs/core 
  at <Article onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< null > > 
  at <RouterView> 
  at <App>
[Vue Router warn]: uncaught error during route navigation:
TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_0__.default) is not a function
    at setup (app.js:38984:66)
    at callWithErrorHandling (app.js:25167:22)
    at setupStatefulComponent (app.js:32032:29)
    at setupComponent (app.js:31988:11)
    at mountComponent (app.js:29911:13)
    at processComponent (app.js:29886:17)
    at patch (app.js:29487:21)
    at ReactiveEffect.componentUpdateFn [as fn] (app.js:30096:17)
    at ReactiveEffect.run (app.js:23830:29)
    at callWithErrorHandling (app.js:25167:36)
Uncaught (in promise) TypeError: (0 , marked__WEBPACK_IMPORTED_MODULE_0__.default) is not a function
    at setup (app.js:38984:66)
    at callWithErrorHandling (app.js:25167:22)
    at setupStatefulComponent (app.js:32032:29)
    at setupComponent (app.js:31988:11)
    at mountComponent (app.js:29911:13)
    at processComponent (app.js:29886:17)
    at patch (app.js:29487:21)
    at ReactiveEffect.componentUpdateFn [as fn] (app.js:30096:17)
    at ReactiveEffect.run (app.js:23830:29)
    at callWithErrorHandling (app.js:25167:36)

Library versions used:

"vue": "^3.2.29"
"vue-loader": "^17.0.0"
"marked": "^4.0.12"

Источник

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

Comments

Environment

Operating System: Darwin
Node Version: v16.14.0
Nuxt Version: 3.0.0-rc.9
Nitro Version: 0.5.0
Package Manager: npm@8.3.1
Builder: vite
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

npx nuxi init nuxt-app
cd nuxt-app
npm install
npm run dev

Error is thrown only when running on macbook…

Describe the bug

Unable to run dev after fresh install on Macbook.
However, doing npm run build, and npm run preview works without issue.
Testing in stackblitz shows no issues however.

Additional context

Had no issues yesterday when doing fresh install of rc.9

Logs

gurpinder@Gurpinders-MacBook-Pro bug % npx nuxi init bug-test
Need to install the following packages:
  nuxi
Ok to proceed? (y) 
Nuxi 3.0.0-rc.9                                                                                         22:28:53
ℹ cloned nuxt/starter#v3 to /Users/gurpinder/Desktop/bug/bug-test                                       22:28:54
                                                                                                        22:28:54
Nuxi 3.0.0-rc.9                                                                                                              22:29:51
Nuxt 3.0.0-rc.9 with Nitro 0.5.0                                                                                             22:29:51
                                                                                                                             22:29:54
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.0.106:3000/

ℹ Vite server warmed up in 171ms                                                                                             22:29:55
✔ Nitro built in 185 ms                                                                                                nitro 22:29:55
ℹ Vite client warmed up in 701ms                                                                                             22:29:55
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.
[Vue warn]: Unhandled error during execution of setup function 
  at <NuxtRoot>
[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'modules')
  at _sfc_main.setup (./node_modules/nuxt/dist/app/components/nuxt-root.vue:67:16)  
  at callWithErrorHandling (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:157:22)  
  at setupStatefulComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7107:29)  
  at setupComponent (./node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:7062:11)  
  at renderComponentVNode (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:172:17)  
  at renderToString (./node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:446:26)  
  at Object.renderToString$1 [as renderToString] (./.nuxt/dev/index.mjs:472:24)  
  at Object.renderToString (./node_modules/vue-bundle-renderer/dist/runtime.mjs:173:40)  
  at processTicksAndRejections (node:internal/process/task_queues:96:5)  
  at async ./.nuxt/dev/index.mjs:521:21
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.
[Vue warn]: Unhandled error during execution of setup function 
  at <NuxtRoot>
[Vue warn]: inject() can only be used inside setup() or functional components.
[Vue warn]: Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.
[Vue warn]: Unhandled error during execution of setup function 
  at <NuxtRoot>

I have the same problem. With 3.0.0-rc.8 it works fine

After reinstalling. Xcode, home brew and node , it worked . Don’t know where the issue origins from. I had no issues running previous rc version before reinstalling . It only caused issues on rc.9. Worth a try for others , hope it helps.

The same thing is happening for me and my colleague on Windows. I can’t recreate it in a blank project, but our actual project has this issue.

I’ve tried:

deleting package-lock.json and node_modules and reinstalling everything
clearing the nuxt caches
commenting out my module + plugin code
running it both natively on my machine and in a Linux docker container

When the project is built for production it runs fine.

I appreciate I’m not offering much to go on, but I’m a bit stumped as to what else to try.

The error message here is referring to useSSRContext().modules It seems that useSSRContext is returning null for some reason, possibly because of a mismatch of vue versions within your node_modules folder. Check your dependency tree/lockfile to ensure you have only one version of vue installed.

Thanks for the pointer. I think I figured out which of my dependencies is doing it. For now I’ve just commented out the dependency in question as it’s not really necessary.

I have a module project (scaffolded via npx nuxi init -t module my-module) which installs and uses particles.vue3 in the playground site, which seems to be the cause.

I wouldn’t know how to go about bringing that dependency back into the project while avoiding this error, but it’s not the end of the world.

If it is a vue dependency issue, you could either add that package to your build.transpile or use yarn resolutions or npm overrides to force vue version.

As this is also happening in https://github.com/sidestream-tech/sidebase, I’ve checked for different vue-versions there, and it looks like they are all the same:

❯ npm list --depth=10 | grep ' vue@'
│ └── vue@3.2.38 deduped
│ │ └── vue@3.2.38 deduped
│ └── vue@3.2.38 deduped
│ └── vue@3.2.38 deduped
│ │ └── vue@3.2.38 deduped
│ │ └── vue@3.2.38 deduped
│ ├── vue@3.2.38 deduped
│ │ │ └── vue@3.2.38 deduped
│ │ └── vue@3.2.38 deduped
│ │ └── vue@3.2.38 deduped
│ │ └── vue@3.2.38 deduped
│ └── vue@3.2.38 deduped
│ └── vue@3.2.38 deduped
├─┬ vue@3.2.38
│ │ └── vue@3.2.38 deduped

I’m getting this issue also.

Strangely though, I created a new install of Nuxt 3rc9 and added my modules one by one to find the one causing the issue and they all worked. Matched the dependencies with the original project experiencing the problem and still get the 500 error.

clean install of rc.9 and rc.10 fails for Ubuntu 22.04.
does not fail on windows on same machine.
tried cleaning caches, tried npm, yarn and pnpm.
vue versions are all the same.

Check the vue versions in your lock file. If you see two or more different versions like vue@3.2.39 vue@3.2.37, make the same vue versions in your project.

Get all your vue versions to the latest version.

This is not a problem on the nuxt side.

@productdevbook The problem is that for some people, even the starter project fails where Vue versions should be fine.

See #14802, as well as the author of the issue.

clean install of rc.9 and rc.10 fails for Ubuntu 22.04. does not fail on windows on same machine. tried cleaning caches, tried npm, yarn and pnpm. vue versions are all the same.

@a1xon How many different vue versions do you see in the lock file?

search please @vue/runtime-core/

Same error on MacBook Pro , Ubuntu 18.04.6. But it’s ok on windows 11.

Node Version: v16.17.0
Nuxt Version: 3.0.0-rc.9 / 3.0.0-rc.10

Same error on MacBook Pro , Ubuntu 18.04.6. But it’s ok on windows 11.

Node Version: v16.17.0 Nuxt Version: 3.0.0-rc.9 / 3.0.0-rc.10

@brightjune How many different vue versions do you see in the lock file?

search please @vue/runtime-core/

Take a look at vue and its subversions.

Same error on MacBook Pro , Ubuntu 18.04.6. But it’s ok on windows 11.
Node Version: v16.17.0 Nuxt Version: 3.0.0-rc.9 / 3.0.0-rc.10

@brightjune How many different vue versions do you see in the lock file?

search please @vue/runtime-core/

One. «version»: «3.2.39». It’s a fresh install.

Same error on MacBook Pro , Ubuntu 18.04.6. But it’s ok on windows 11.
Node Version: v16.17.0 Nuxt Version: 3.0.0-rc.9 / 3.0.0-rc.10

@brightjune How many different vue versions do you see in the lock file?
search please @vue/runtime-core/

One. «version»: «3.2.39». It’s a fresh install.

very interesting, can you send me a lock file so I can review it ? Thank you

I have the same problem, I install a purely new Nuxt RC10 or RC9 project and get this error.
Node 16.14.2 and Windows 11 21H2 22000.978

Also, I only have one @vue/runtime-core version in package-lock.json is 3.2.39

Here is my package-lock.json: https://www.transfernow.net/dl/20220916abOwN9Oc

Same error on MacBook Pro , Ubuntu 18.04.6. But it’s ok on windows 11.
Node Version: v16.17.0 Nuxt Version: 3.0.0-rc.9 / 3.0.0-rc.10

@brightjune How many different vue versions do you see in the lock file?
search please @vue/runtime-core/

One. «version»: «3.2.39». It’s a fresh install.

very interesting, can you send me a lock file so I can review it ? Thank you

@vue/runtime-core 3.2.39

Here is the yarn lock file, Thank you!

yarn.lock.txt

pi0

mentioned this issue

Jan 19, 2023

pi0

mentioned this issue

Sep 16, 2022

7 tasks

danielroe

transferred this issue from nuxt/framework

Jan 19, 2023

Источник

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

Источник

Javascript — Unhandled error during execution of scheduler flush. This is likely a Vue internals bug

I am getting the following error while creating slides in Vue.js:

[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.org/?repo=vuejs/vue-next 
  at <Anonymous key=1 > 
  at <Anonymous pager="true" options=  > 
  at <Anonymous fullscreen=true > 
  at <IonPage isInOutlet=true registerIonPage=fn<registerIonPage> > 
  at <Product Details ref=Ref< Proxy {…} > key="/products/1" isInOutlet=true  ... > 
  at <IonRouterOutlet> 
  at <IonApp> 
  at <App>

Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
    at insert (webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:222:16)
    at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3958:9)
    at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3899:13)
    at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3819:21)
    at componentEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4312:21)
    at reactiveEffect (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:71:24)
    at effect (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:46:9)
    at setupRenderEffect (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4277:89)
    at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4235:9)
    at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4195:17)

If I add the slides hard coded it does not show any errors. But if I add the slides dynamically using a v-for loop then it shows the above errors.

I have added the slides in following way:

This is the template:

  <ion-slides pager="true" :options="slideOpts">
    <ion-slide v-for="image in product.product_images" v-bind:key="image.id">
      <h1>Slide 1</h1>
    </ion-slide>
  </ion-slides>

This is the script:

export default {
  name: "Product Details",
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonSlides,
    IonSlide,
  },
  data() {
    return {
      product: {},
    };
  },
  setup() {
    // Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
    const slideOpts = {
      initialSlide: 1,
      speed: 400,
    };
    return { slideOpts };
  },
  mounted: function () {
    fetch("http://localhost:4000/api/products/" + this.$route.params.id, {
      method: "get",
    })
      .then((response) => {
        return response.json();
      })
      .then((jsonData) => {
        this.product = jsonData;
        // console.log(jsonData.product_images);
      });
  },
};

What am I doing wrong in the code?

Answers

There are 3 suggested solutions
here and each one has been listed below with a detailed description. The following
topics have been covered briefly such as
Javascript, Vue.js, Vuejs3, Ion Slides.
These have been categorized in sections for a clear and precise explanation.

Arguably, the error message could be improved on this one.

The error was caused by trying to iterate through a non-iterable (in your case undefined), using v-for. Specifically, before the call made in mount() returns, product.product_images is undefined, because you initiate product as empty object.

Vue 2 style solutions

instantiate product.product_image as iterable:

//...
  data: () => ({ 
    product: { product_images: [] }
  })

or provide an empty array as fallback in template:

<ion-slide v-for="image in product.product_images || []" v-bind:key="image.id">
  <h1>Slide 1</h1>
</ion-slide>

or place a v-if on the parent of the v-for:

<ion-slides pager="true" :options="slideOpts" v-if="product.product_images">
  ...
</ion-slides>

Vue 3 style solution

Make the entire ProductDetails component suspensibe, by giving it an async setup function. In the setup function, make the call to get the product.
Proof of concept:

//...
async setup() {
  const product = await fetch("http://localhost:4000/api/products/" + 
    this.$route.params.id, {
      method: "get",
    }).then(r => r.json());
  return { product }
}

Now place <product-details> into a <Suspense>‘s <template #default>, providing a fallback template (which will be rendered while <Suspense> resolves all the async components found in its default template):

<Suspense>
  <template #default>
    <product-details></product-details>
  </template>
  <template #fallback>
    Product is loading...
  </template>
</Suspense>

The beauty (and elegance) of using <Suspense> is that the parent doesn’t need to know the actual condition(s) for which the markup is not yet to be rendered. It simply waits for all suspensible components to resolve.
In short, using <Suspense> you no longer need to hardcode the rendering logic into the template using v-ifs and specifying the condition in clear, on the wrapper. Each async child component contains its own condition and all it announces to the parent is: i’m done. When all are done, they’re rendered.

Can you change the component name ?

export default 

  name: "Product Details" ... <= here

Also ran into this error when having malformed hooks (created, mounted, etc…). In my case, created was an object instead of a function.

BAD:

created: { /* some code */ }

GOOD:

created() { /* some code */ }
// or...
created: function() { /* some code */ }

Associated Technologies

Details of all the mentioned technology in the question that you should know about for a
detailed
information.

Javascript

Javascript is the programming language of the web. It is client side scripting language that runs inside a browser. It’s a lightweight, interpreted programming language and is very capable for network centric applications. One of the primary reasons for its popularity is also because it’s fun and flexible.

Javascript is one of the core-technologies for the web alongside HTML and CSS. It is high level language with dynamic typing, first class functions and is termed as multi-paradigm as it supports event-driven, functional and imperative programming styles. It also has various APIs to work with text, dates, DOM etc.

VueJS

Vue.js is an open source MVVM front end JS framework for building interactive user interfaces and single page applications (SPA). It’s one of the popular front end framework beside ReactJS and provides a declarative and component-based programming model and helps in developing user interfaces efficiently. You can learn more about VueJS at vuejs.org

Источник

Comments

Environment

Reproduction

Describe the bug

Additional context

Logs

Recommend Projects

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://www.typescriptlang.org/favicon-32x32.png" alt="Typescript photo" /> Typescript

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars2.githubusercontent.com/u/27804?s=200&amp;v=4" alt="Django photo" /> Django

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://laravel.com/img/logomark.min.svg" alt="Laravel photo" /> Laravel

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars.githubusercontent.com/u/6154722?v=4" alt="Microsoft photo" /> Microsoft

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars.githubusercontent.com/u/1342004?v=4" alt="Google photo" /> Google

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars.githubusercontent.com/u/1961952?v=4" alt="Alibaba photo" /> Alibaba

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars.githubusercontent.com/u/1562726?v=4" alt="D3 photo" /> D3

<img decoding="async" onError="javascript: wp_broken_images = window.wp_broken_images || function(){}; wp_broken_images(this);" loading="lazy" width="24" height="24" src="https://avatars.githubusercontent.com/u/18461506?v=4" alt="Tencent photo" /> Tencent

Javascript — Unhandled error during execution of scheduler flush. This is likely a Vue internals bug

Answers

Associated Technologies

Javascript

VueJS

Typescript

Django

Laravel

Microsoft

Google

Alibaba

D3

Tencent