home

Diagnostics

LUM1008: <script> in a Markdown file

A Markdown file imported as a component contains a <script> element.

Severity: error · Category: file format (1xxx)

Reported by: the Vite plugin (lumiose({ md })), in lumiose dev and builds, at the <script> tag's line.

#What it means

Markdown imports are content only: the component renders the file's text and markup, and nothing in it runs. Raw HTML is allowed in Markdown, but <script> is not, whatever its type (a module, a classic script, JSON-LD). Only .html imports run their scripts. Script tags inside code spans, fenced or indented code blocks and HTML comments are text, and are fine.

#Example

md
# Counter

<button id="count">0</button>

<script type="module">
  document.querySelector("#count").onclick = (e) => e.target.textContent++;
</script>

#How to fix it

Move the markup and its script to an .html file, which runs its scripts as client modules, and import that instead (or import it next to the Markdown):

html
<button id="count">0</button>
<script type="module">
  document.querySelector("#count").onclick = (e) => e.target.textContent++;
</script>

Or keep the Markdown as content and put the behaviour in a component that renders it, such as an island in a .stsx route:

stsx
import Post from "../content/post.md";
import { Counter } from "../components/counter.stsx";

export default function Page() {
  return (
    <article>
      <Post />
      <Counter client:load />
    </article>
  );
}