Cannot load markdown.md inside index.js

JavaScript
#1

I am building markdown previewer and I want to add a placeholder for my element.

Placeholder is written in markdown and I am trying to import it to my index.js file

import placeholder from './sample.md'; // Importing from the local folder


const $ = document.querySelectorAll.bind(document);

marked.setOptions({
    breaks: true
});

let renderer = new marked.Renderer();
renderer.link = function(href, title, text) {
    return `<a target="_blank" href="${href}">${text}` + `</a>`
}

let txtArea = $('textarea')[0];
txtArea.addEventListener('input', event => {
    $('.prev-text')[0].innerHTML = marked(event.target.value, {renderer: renderer})
});

I want to use the content of the “sample.md” and save it to a variable “placeholder” so that I can set it as a default text inside my .

Right now I cannot load the “sample.md”, browser is throwing this error:“Failed to load module script: The server responded with a non-JavaScript MIME type of “text/markdown”. Strict MIME type checking is enforced for module scripts per HTML spec.”

Here is my HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
    <title>Markdown Previewer</title>
</head>
<body>
    <div class="container">
        <div class="editor">
            <div id="ed-navbar" class="navbar">
                EDITOR
            </div>
            <textarea name="markdown"></textarea>
        </div>
        <div class="preview">
            <div id="pr-navbar" class="navbar">
                PREVIEW
            </div>
            <div class="prev-text">
                
            </div>
        </div>
    </div>
    <script type="module" src="./index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</body>
</html>
#2

It’s not a JavaScript file. You can import JS (and you will soon be able to import JSON & going forwards I assume a few other things – WebGL shaders for example), but you can’t just import other stuff. That’s not how JS (or any other programming language) works. A JS engine executes JS, it doesn’t understand random text files. The browser has a level of protection above that, so if the file has a mime type that isn’t JS it will prevent it even loading (hence the error), but even if you got past that (eg you managed to spoof it to make the browser think it was a JS file), the code is just going to fall over because there’s no JS there.

You have to import a .js file, there isn’t any choice here.

1 Like
#3

Since this markdown file will be stored on the server with the other files for this project I think you could use fetch to get it from the server and then text() on the response object it returns to get the text in the file.

Example

1 Like
#4

I like this idea I am going to give it a try.

#5

Well now I get that I can’t import anything beside JS inside JS, which is logical but I couldn’t figure lol. Well I mean the most basic solution would be to just copy the entire content of my markdown file and paste it inside of my JS file and assign it to a variable.
And paste the content between the quotes to make it a string, just like inside of example project. But I figure since I am using VS Code i could separate that placeholder into another file to make my code look cleaner and to make me less noob.

#6

I don’t know if this applies here (depends on what you’ve tried), but what doesn’t help is that loads of tutorials/articles/guides for JS, particularly React-based stuff do show import being used with CSS, images etc. Which comes from tools used to build the end code, rather than JS.

1 Like
#7

I can’t thank You enough Sir, it works, I finally done it after many hours of searching for the solution and it is so simple.

const mrk = new Request('sample.md')

fetch(mrk)
    .then(data => data.text())
    .then(text => {
        $('textarea')[0].innerHTML = text;
        $('.prev-text')[0].innerHTML = marked(text, {renderer: renderer})
    });
2 Likes
#8

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.