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

ccsv commented 1 year ago

Environment

I am running windows 10 and using firefox

Nuxt project info:

Operating System: Windows_NT
Node Version: v18.12.1
Nuxt Version: 3.2.2
Nitro Version: 2.2.2
Package Manager: npm@9.3.1
Builder: vite
User Config: css, build
Runtime Modules: -
Build Modules: -

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.

nuxt / nuxt