nuxt / nuxt

The Intuitive Vue Framework.
https://nuxt.com
MIT License
54.98k stars 5.03k forks source link

Onclick will not work if certain files are in the plugin folder #19162

Closed ccsv closed 1 year ago

ccsv commented 1 year ago

Environment

I am running windows 10 and using firefox

Nuxt project info:


Reproduction

Create a vue page with a @click function on it that does something

Install @urql/vue using:


yarn add @urql/vue graphql
# or
npm install --save @urql/vue graphql

Next make a urql.js in plugin with this:

import { createClient, ssrExchange, dedupExchange, fetchExchange, Client } from '@urql/core';
import { cacheExchange } from '@urql/exchange-graphcache'

export default defineNuxtPlugin(nuxtApp => {

const ssrKey = '__URQL_DATA__'

const ssr = ssrExchange({
    isClient: process.client
  })

 // when app has rendered in server, send SSR state to client
if (process.server) {
    nuxtApp.hooks.hook('app:rendered', () => {
        nuxtApp.payload[ssrKey] = ssr.extractData() 
    })
}

// when app is created in browser, restore SSR state from nuxt payload
if (process.client) {
nuxtApp.hooks.hook('app:created', () => {
  ssr.restoreData(nuxt.payload[ssrKey])
})
}

//GraphCache setup
// const cacheConfig ={
//     schema,
//     keys:{},
//     resolvers:{
//         Query:{
//         //country: (_, args) => ({__typename: "Country", id: args.id})
//         },
//     },
// }

const cache = cacheExchange()

const client = createClient({
  url: 'http://localhost:8000/graphql',
  exchanges: [
            dedupExchange,
            cache,
            ssr, 
            fetchExchange,
        ],
});

nuxtApp.provide("urql", client);
nuxtApp.provide("$urql", client);

})

Run npm run dev

Describe the bug

The click function will not fire. Not sure why. If you have other javascript libraries like primevue or bootstrapvue the dropdown does not work too

Additional context

No response

Logs

No response

danielroe commented 1 year ago

That means there was an error running your plugin. Try registering a global error handler in your Nuxt app.

danielroe commented 1 year ago

Would you provide a reproduction? 🙏

ccsv commented 1 year ago

@danielroe I tried doing a reproduction not sure if you can see it

https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz?file=app.vue

danielroe commented 1 year ago

If you save the reproduction, it will give you a unique URL you can then share with me.

ccsv commented 1 year ago

@danielroe Sorry I am having trouble saving and sharing it.

Basically I created a plugins folder added the exact copy of the urql.js above inside and added this in app.vue:

<template>

  <body>
    <p>Click the button to test</p>
    <button @click="talk()">Test</button>
  </body>
</template>

<script>

export default {
setup(){

function talk() {
  console.log("hi")
}

return{
talk,
}
}
danielroe commented 1 year ago

I think it's this typo: nuxt.payload should be nuxtApp.payload. But I think we should be logging this for you - that's a bug.