search

11ty / eleventy-plugin-vue

Use Vue.js templates and Vue.js single file components in Eleventy.
196 stars 11 forks source link

Does not work in @11ty/eleventy 2.0.1 #49

Open Maximvdw opened 1 month ago

Maximvdw commented 1 month ago

Using version 0.8.0 Using tested node versions 16, 20

Error on startup when .vue file present: Using cross-env ELEVENTY_EXPERIMENTAL=true eleventy --serve

[11ty] Problem writing Eleventy templates: (more in DEBUG output)
[11ty] The "id" argument must be of type string. Received undefined (via TypeError)
[11ty]
[11ty] Original error stack trace: TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received undefined
[11ty]     at Module.require (node:internal/modules/cjs/loader:1304:3)
[11ty]     at require (node:internal/modules/helpers:179:18)
[11ty]     at EleventyVue.getComponent (D:\Data\workspace\...\node_modules\@11ty\eleventy-plugin-vue\EleventyVue.js:528:21)   
[11ty]     at Object.getInstanceFromInputPath (D:\Data\workspace\...\node_modules\@11ty\eleventy-plugin-vue\.eleventy.js:190:26)
[11ty]     at CustomEngine.getExtraDataFromFile (D:\Data\workspace\...\node_modules\@11ty\eleventy\src\Engines\Custom.js:143:33)
[11ty]     at async D:\Data\workspace\...\node_modules\@11ty\eleventy\src\TemplateContent.js:280:27
[11ty] Wrote 0 files in 0.09 seconds (v2.0.1)

Troubleshooting:

  1. The path returned by getJavaScriptComponentFile is undefined while localVuePath is defined as the .vue file. The vue file is not compiled to the cache and is not present in the mapping of vueFileToJavaScriptFilenameMap.

  2. When I rename the vue file to something else and start eleventy with serve - then change it back to a vue file - it will throw the error. After the error is thrown the files are compiled and added to vueFileToJavaScriptFilenameMap but too late.

  3. Compile https://github.com/11ty/eleventy-plugin-vue/blob/0.x/.eleventy.js#L224 is never called. The getInstanceFromInputPath is called before the compile function is executed

Assumption of issue: runBundle is executed at the start. However, the listed files are empty https://github.com/11ty/eleventy-plugin-vue/blob/0.x/.eleventy.js#L145-L163 because changedVueFilesOnWatch is empty as it only populates these files after file changes on the inital start.

Maximvdw commented 1 month ago

To clarify : I get the same issue when using npm run sample in this repository.