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

[Jamiewarb]

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: [email protected]
• Bundler: Webpack
• User Config: head, css, plugins, components, buildModules, modules, build
• Runtime Modules: -
• Build Modules: @nuxtjs/[email protected], @nuxt/[email protected]

---

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]

@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]

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]

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

[rodrigogs]

Same here :/

[rodrigogs]

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]

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

[danielroe]

cc: @antfu

[janvacek]

any news on this issue please?