VUE: SFC - use markdown in <docs> tag - vite throwing eror

user_484025 0
Viewed 42

So I inherited an old (Vue 2) app that uses Styleguidist for creating style guide and documenting components...

It was running extra slow so my first task was to upgrade to using vite instead of webpack. Almost there... fixed almost all the issue, the one is outstanding though... this app uses this format of *.vue components

<template>...</template>
<script>...</script>
<style>...</style>
<docs>
  Example of usage
  ```jsx
  <MyComponent>...</MyComponent>
</docs>

where content inside is markdown, so one can write nicer documentation with code example

Now, vite is complaining that I am trying to use jsx (where I am not)...

this is the error

3:36:36 PM [vite] Internal server 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. Plugin: vite:import-analysis

So what am I to do? How do I tell VITE to ignore that part?

vite vuejs2
1 Answers

The solution, as posted here, is to create a small Vite plugin that ignores the <docs> blocks.

Add this to vite.config.js:

const vueDocsPlugin = {
    name: 'vue-docs',
    transform(code, id) {
        if (!/vue&type=docs/.test(id))
            return;
        return `export default ''`;
    }
};

Then add the plugin to the plugins array:

export default defineConfig({
    plugins: [
        // vue() will be here...
        vueDocsPlugin,
    ],
});
MrZebra_174400
Related