Vue component file naming convention ?

[Daandelange]

Hello. I'm running in a weird naming convention issue on kirbyup v2.1.3 and Kirby 3.9.0
I have a regular component named PercentageFieldPreview.vue which throws a syntax error when I'm importing it in my src/index.js file.

import PercentageFieldPreview from "./components/PercentageFieldPreview.vue";

Renaming the component file (and import) to PercentagePreview.vue (or anything not *FieldPreview.vue) fixes the issue.

So now I'm wondering if there might be some kind of naming convention for KirbyUp ? Maybe this has todo with auto import features ? (which I'm not using).

Note: My kirbyup configuration is a bit weird as I'm on osx 10.12 which isn't supported anymore by esbuild so I'm using esbuild-wasm with an npm override, but I don't think it's related.

// in Package.json
"overrides": {
  "esbuild": "npm:esbuild-wasm@latest"
},

[jonaskuske]

There isn't a mandatory convention afaik – and I can't reproduce the problem, I can import both PercentagePreview and PercentageFieldPreview components. Can you provide a repro and the error you're seeing?

[Daandelange]

Ok, thanks for your quick answer. I'll try to reproduce it in a pluginkit but there's a chance it's related to my setup.

[Daandelange]

I'm unable to reproduce this issue in a clean pluginkit, or even in the same project-repo freshly cloned in new starterkit, so it's probably something related to my npm folder-specific configuration.

Still it's very weird, I have never run into such syntax errors. They were always throwing at the end of a line without many information « unexpected XXX on line xxx » or « unclosed XXX on line xxx ». Randomly somewhere in the <template> code. When removing the erroneous lines, a next syntax error appeared on another random line before or after the previous one. When no <template> code left it moved on to lines in <script>. I'd say something related to .vue syntax detection failing. Nvm.