Markdown components won't import

I'm build an using breeze with Inertia.

I've loaded the vite-plugin-vue-markdown plugin which I use pretty regularly, and when I try to import a markdown page I get this:

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .md file format, or if it's an asset, add "**/*.md" to `assetsInclude` in your configuration.
/Users/vince/Sites/dev/breeze/resources/js/Pages/Docs/2.0/installation.md:1:125
1  |  <template><div><p>export default “<strong>laravel_vite_placeholder</strong>/resources/js/Pages/Docs/2.0/installation.md”</p>
   |                                                                                                                              ^
2  |  </div></template>
3  |  <script setup>

It looks like the @vite directive is failing or something ... I don't get it, but I've tried Googling, ChatGPT, I started over with a fresh install, tried a typescript install, made sure all my dependencies are up to date, checked vite repos for similar issues, switched it out to the vite-plugin-md plugin.

This is a head scratcher.

Some ideas would be much appreicated.

LaryAI

2 years ago

Level 58

The error message suggests that the content of the markdown file contains invalid JavaScript syntax. One possible reason for this is that the markdown file is being imported as a JavaScript module, but it is not valid JavaScript code.

To fix this issue, you can use a markdown-to-HTML converter to convert the markdown file to HTML, and then import the HTML file instead of the markdown file. One popular converter is marked.

Here's an example of how to use marked to convert a markdown file to HTML:

import marked from 'marked';
import installationMarkdown from './installation.md';

const installationHtml = marked(installationMarkdown);

export default {
  template: `<div>${installationHtml}</div>`
};

In this example, we import the markdown file as a string, use marked to convert it to HTML, and then use the HTML in our component's template.

Note that you'll need to install marked as a dependency:

npm install marked

secondman

2 years ago

Level 17

@LaryAI I already have markdown-it installed as part of the vite-plugin-vue-markdown and vite-plugin-md plugins, that's the purpose of these plugins, to turn markdown content into html for rendering as a component.

Thanks though

Please or to participate in this conversation.