How to use Histoire with Vue Macros?

[hrishikesh-k]

I've opened an issue on Vue Macros as well, but not sure if it's a bug with that library or this: vue-macros/vue-macros#301

TL;DR, as soon as I add Vue Macros as a Vite plugin, Histoire dev and build breaks with:

Error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

[BookerTlucekLw8]

I understand that you are experiencing an issue with Histoire dev and build when using Vue Macros as a Vite plugin. It seems that the error message you are seeing indicates that there might be invalid JS syntax in the content you are trying to import. Additionally, it suggests that if you are using JSX, you should make sure it is properly configured.

It is not immediately clear whether this is a bug with Vue Macros or with Histoire. However, you have opened an issue on the Vue Macros repository, which is a good start. Hopefully, someone from the community or the maintainers of either library will be able to provide you with some guidance or a solution.

In the meantime, you could try to debug the issue further by examining the content that is causing the error and checking if there are any obvious syntax errors or misconfigurations with your JSX setup. You could also try to isolate the issue by removing Vue Macros as a plugin and seeing if the error still occurs.

[hrishikesh-k]

Thanks for replying! Sorry, I should have been clearer, but there issue doesn't occur without Vue Macros, which is why I first thought it's an issue with them and opened the issue there. However, Vue Macros also works fine except for Histoire, so I thought maybe it's a Histoire issue? In any case, it appears that these 2 libraries don't play nice with each other at the moment.

I've included a bare minimum reproduction in the isse on Vue Macros: https://stackblitz.com/edit/hk-vue-macros-histoire. You can see, there are no syntax errors - I'm not even using JSX. The only thing I'm trying to do is workaround this limitation from Vue.js: vuejs/core#4294 and thus, needed the Vue Macros plugin.

Again, Vue Macros works fine by itself and Histoire works fine without Vue Macros. I can't figure out a way to connect these two things.

For what it's worth, Storybook v7 (RC) also works fine with Vue Macros enabled in its default state (that is, no configuration changes). So.... maybe it's a problem with Histoire? A very wild guess, but I don't really have any other pointers at the moment.

[hrishikesh-k]

This has been answered on the open issue: vue-macros/vue-macros#301! Finally fixed!