Enabling Vite with Nuxt-Bridge prevents events from firing, but it works with Nitro.

FieldMarshallVague commented 2 years ago

Versions

"@nuxt/bridge": "npm:@nuxt/bridge-edge@^3.0.0-27374015.eb14eca", "nuxt-edge": "latest", Nuxt-Vite: ~I don't see a separate dep for nuxt/vite, I assume it's part of the nuxt-bridge package?

Reproduction

I can't share my repo and I'm not sure how to provide a cut-down version for this. It's a Nuxt 2 install with an update to Nuxt-Bridge (having followed the migration steps).

Here is an example of a component with the problem, though.

NOTE: It's showing it emitting an event, but it doesn't matter if I emit or just call the local 'onClickLeftButton' method, the console.log doesn't happen in the browser.

<template>
  <nav class="pagination">
    <button
      class="paginationButton"
      @click="$emit('clickLeft')"
    >
      <img class="paginationButtonImageLeft" src="~~/assets/images/chevron-right-blue.svg" />
    </button>
  </nav>
</template>

<script lang="ts">
import { defineComponent } from '#imports';

interface PaginationProps {
  showPages: boolean;
}

export default defineComponent<PaginationProps>({
  name: 'PaginationWrapper',
  props: {
    showPages: {
      required: false,
      type: Boolean,
      default: false,
    },
  },
  emits: ['clickLeft', 'clickRight'],
  setup (props, { emit }) {
    const onClickLeftButton = () => {
      alert('clicked Left pagination')
      emit('clickLeft');
    }

    return {
      onClickLeftButton
    };
  },
});
</script>

I'm also using Vite-Plugin-Checker (^0.3.4) with this config:

import Checker from 'vite-plugin-checker'

export default {
  plugins: [Checker({ vueTsc: true })],
  css: {
    preprocessorOptions: {
      scss: {
          // https://vitejs.dev/config/#css-postcss
         // example : additionalData: `@import "./src/design/styles/variables";`
         // You dont need to include .scss extension.
         // this only seems to include the referenced file and NOT the dependencies of that file
         // - so include ALL files, not root files.
         additionalData: `
          @import "./assets/scss/base/responsive-breakpoints";
          @import "./assets/scss/base/font-vars";
          @import "./assets/scss/partials/_colors";
         `
     },
    },
  }
}

Description

I'm using Nuxt bridge with Vite enabled, but when I assign an event handler (e.g. @click) and create a function to call alert('test'), it doesn't fire. I've tried emitting an event and handling it, but it doesn't work even if I remove the emit and just use the local handler to console.log.

I'm using SSR: true in nuxt.config. What's interesting is that I see these items logged to the server console when I refresh the page. But it looks liek the events handlers aren't being assigned on the content that reaches the client.

If I switch back to Nitro, it works fine, which I've done for now.

I feel like I might be missing something really obvious, but I've checked my browser debugger for console filters, it's in verbose mode and there are no event handlers assigned to the element, and the fact it works with Nitro is a clue.

FieldMarshallVague commented 2 years ago

In case it's of use, here's my package.json:

{
  "name": "example.com",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxi dev",
    "build": "nuxi build",
    "start": "nuxi preview",
    "generate": "nuxi generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "npm run lint:js",
    "test": "jest"
  },
  "dependencies": {
    "@nuxtjs/applicationinsights": "^1.2.2",
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/gtm": "^2.4.0",
    "@nuxtjs/strapi": "^0.3.1",
    "@vueuse/head": "^0.7.2",
    "core-js": "^3.15.1",
    "graphql": "^14.7.0",
    "graphql-tag": "^2.12.6",
    "nuxt-edge": "latest",
    "vue-router": "^3.5.3"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.14.7",
    "@babel/plugin-proposal-optional-chaining": "^7.16.0",
    "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
    "@nuxt/bridge": "npm:@nuxt/bridge-edge@^3.0.0-27374015.eb14eca",
    "@nuxt/kit": "npm:@nuxt/kit-edge@^3.0.0-27386644.9444647",
    "@nuxt/types": "^2.15.7",
    "@nuxtjs/eslint-config-typescript": "^6.0.1",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/google-fonts": "^1.3.0",
    "@nuxtjs/style-resources": "^1.2.1",
    "@vue/runtime-dom": "^3.2.27",
    "@vue/test-utils": "^1.2.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^27.0.5",
    "eslint": "^7.29.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^8.3.0",
    "fibers": "^5.0.0",
    "hookable": "^5.1.1",
    "jest": "^27.0.5",
    "prettier": "^2.3.2",
    "sass": "^1.40.1",
    "sass-loader": "^10.2.0",
    "ts-jest": "^27.0.3",
    "typescript": "4.4.3",
    "vite-plugin-checker": "^0.3.4",
    "vue-jest": "^3.0.4",
    "vue-template-babel-compiler": "^1.0.7",
    "vue-tsc": "^0.31.1"
  }
}

danielroe commented 2 years ago

I'm going to close this as there's not a lot to trace down from here. But feel free to raise a minimal reproduction and I'll happily reopen.

nuxt / bridge