Fresh Nuxt 2 and Bridge giving errors in components when using v-on events - `defineComponent is not defined`

Jamiewarb commented 2 years ago

Environment

Nuxt CLI v3.0.0-27333388.c824905 16:10:20 RootDir: /Users/jamie/Sites/bignight/define-component 16:10:20 Nuxt project info: 16:10:20

Operating System: Darwin
Node Version: v16.13.0
Nuxt Version: 2.16.0-27332655.777a4b7f
Package Manager: yarn@1.22.17
Bundler: Webpack
User Config: head, css, plugins, components, buildModules, modules, build
Runtime Modules: -
Build Modules: @nuxtjs/stylelint-module@4.1.0, @nuxt/bridge@3.0.0-27333388.c824905

Reproduction

Please see this repo for a full reproduction: https://github.com/Jamiewarb/repro-define-component

Describe the bug

When adding a component that handles an event with v-on, I'm sometimes getting the error defineComponent is not defined.

In the reproduction, this occurs when there are two elements in the component that both have a v-on. Later investigation shows that this also occurs when either or both of those elements are simple html comments  as well.

Additional context

To get the error:

Run yarn dev and open localhost:3000 in a browser.
Observe the error "defineComponent is not defined".

To circumvent the error:

Remove either the entire <input> element or the entire <button> element.
Open localhost:3000 in a browser.
Observe the error no longer displays.

The docs say you can also import from #imports directly, but this gives another error:

Add import { defineComponent } from '#imports'; inside the <script> tag
Observe Module parse failed: Identifier 'defineComponent' has already been declared (10:9) error in terminal

However, importing it under an alias successfully circumvents this problem entirely:

Add import { defineComponent as dC } from '#imports'.
Replace the component definition with export default dC({ ... }).
Observe that it works again.

Logs

ERROR  [worker] defineComponent is not defined                                                                                   16:05:32

  at Module../node_modules/unplugin/dist/webpack/loaders/transform.js?!./node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./node_modules/unplugin/dist/webpack/loaders/transform.js?!./node_modules/unplugin/dist/webpack/loaders/transform.js?!./components/Test.vue?vue&type=script&lang=js& (.nuxt/dist/server/server.js:6838:30)
  at __webpack_require__ (.nuxt/dist/server/server.js:27:30)
  at Module../components/Test.vue?vue&type=script&lang=js& (.nuxt/dist/server/server.js:2700:390)
  at __webpack_require__ (.nuxt/dist/server/server.js:27:30)
  at Module../components/Test.vue (.nuxt/dist/server/server.js:2666:92)
  at __webpack_require__ (.nuxt/dist/server/server.js:27:30)
  at Module../.nuxt/components/index.js (.nuxt/dist/server/server.js:367:78)
  at __webpack_require__ (.nuxt/dist/server/server.js:27:30)
  at Module../.nuxt/components/plugin.js (.nuxt/dist/server/server.js:817:64)
  at __webpack_require__ (.nuxt/dist/server/server.js:27:30)

Jamiewarb commented 2 years ago

@danielroe I don't think it's related, but I see the same error is mentioned in nuxt/nuxt.js#13077 when discussing vue test utils

Jamiewarb commented 2 years ago

Another strange occurrence: if I change the component template to this (replace the <button> element with a HTML comment) it still happens:

<template>
  <div>
    <input @change="test" />
    <!-- test -->
  </div>
</template>

<script>
export default defineComponent({
  name: 'BaseButton',
  methods: {
    test() {
      console.log('test')
    },
  },
})
</script>

And even if it's just two comments:

<template>
  <div>
    <!-- test -->
    <!-- test -->
  </div>
</template>

<script>
export default defineComponent({
  name: 'BaseButton',
})
</script>

rvmourik commented 2 years ago

@Jamiewarb I am experiencing the same, did you find any other solutions besides importing it with an alias.

rodrigogs commented 2 years ago

Same here :/

rodrigogs commented 2 years ago

Working example here: https://github.com/rodrigogs/juquinha/blob/master/modules/web/pages/dashboard.vue

To make it break, just remove the defineComponent alias.

Tyraxaes commented 2 years ago

Same problem here, without alias is not possible to work around it. Any solutions?

danielroe commented 2 years ago

cc: @antfu

janvacek commented 1 year ago

any news on this issue please?

nuxt / bridge