Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[2.7.14][class component][sfc][vite] Method names containing "export" and "default" break lifecycle hooks #12892

Closed
hmkrivoj opened this issue Dec 1, 2022 · 0 comments

Comments

@hmkrivoj
Copy link

hmkrivoj commented Dec 1, 2022

Version

2.7.14

Reproduction link

codesandbox.io

Steps to reproduce

  1. Create a typescript/vite/vue 2 app with these dependencies
{
  "dependencies": {
    "vue": "^2.7.14",
    "vue-class-component": "^7.2.6"
  },
  "devDependencies": {
    "@types/node": "^16.11.45",
    "@vitejs/plugin-legacy": "^2.0.0",
    "@vitejs/plugin-vue2": "^1.1.2",
    "@vue/tsconfig": "^0.1.3",
    "npm-run-all": "^4.1.5",
    "terser": "^5.14.2",
    "typescript": "~4.7.4",
    "vite": "^3.0.2",
    "vue-tsc": "^0.38.8"
  }
}
  1. Create a SFC class component and include it into your app. Add methods mounted(), exportieren() and defaultWert():
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
@Component({})
export default class HelloWorld extends Vue {
  test = "";
  mounted() {
    console.log("mounted!");
    this.test = "Hallo Welt!";
  }
  exportieren(): void {
    // do nothing
  }
  defaultWert(): void {
    // do nothing
  }
}
</script>

<template>
  <p>{{ test }}</p>
</template>

What is expected?

exportieren() and defaultWert() should not prevent lifecycle hooks from being called.

What is actually happening?

Lifecycle hook mounted() is not called. Renaming/rearranging/removing either exportieren() or defaultWert() fixes the issue.


I'm guessing it's a problem with the sfc-compiler, as I can't reproduce this bug with a plain js/ts component:

import Vue from "vue";
import Component from "vue-class-component";
@Component({
    template: "<p>{{ test }}</p>"
})
export default class HelloWorld extends Vue {
	test = "";
	mounted() {
	  console.log("mounted!");
	  this.test = "Hallo Welt!";
	}
	exportieren(): void {
	  // do nothing
	}
	defaultWert(): void {
	  // do nothing
	}
}

I'm just spitballing but it might be a problem with https://github.com/vuejs/vue/blob/main/packages/compiler-sfc/src/rewriteDefault.ts#L5. I pasted the regex into regexr: https://regexr.com/73ktb

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant