javascript html node.js module node-modules

How to fix MIME type of "text/html"?

i wanted to make docx file through html and js, also i'm using Docx Library and Filesaver

but i got next error:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

I'm using next html code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=chrome">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <nav></nav>
    <section>
        <button>
            <input type="file" id="input">
            <button style="display: block; margin-top: 5em;" id="generate">Create custom DOCX type from XL document</button>
        </button>
    </section>
    <footer></footer>
    <script type="module" src="js/script.js"></script>
</body>
</html>

and js:

import { Document, Packer } from "../node_modules/docx/build/index"
import { saveAs } from "../node_modules/file-saver/dist/FileSaver"

document.getElementById("generate").addEventListener(
    "click",
    function (event) {
        generateWordDocument(event)
    },
    false
)
function generateWordDocument(event) {
    event.preventDefault()
    // Create a new instance of Document for the docx module
    let doc = new Document()
    // Call saveDocumentToFile with the document instance and a filename
    saveDocumentToFile(doc, "New Document.docx")
}
function saveDocumentToFile(doc, fileName) {
    // Create new instance of Packer for the docx module
    const packer = new Packer()
    // Create a mime type that will associate the new file with Microsoft Word
    const mimeType =
        "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
    // Create a Blob containing the Document instance and the mimeType
    packer.toBlob(doc).then(blob => {
        const docblob = blob.slice(0, blob.size, mimeType)
        // Save the file using saveAs from the file-saver package
        saveAs(docblob, fileName)
    })
}

const inputElement = document.getElementById("input");
inputElement.addEventListener("change", handleFiles, false);
let fileList = inputElement.files
function handleFiles() {
    fileList = this.files; /* now you can work with the file list */
    console.log(fileList[0].name)
}

i download docx and file-saver next way:

npm install docx

npm install file-saver

and http-server

I'm using http-server to test my code

http-server -c-1

how to fix MIME type of text/html in this code?

I tried to change path to docx and file-saver like "../package.json/docx" "docx" "../node_modules/docx" and etc but it didn't work i also tried to use another server as http-server and live server in vscode but nothing is working

Solution

The error has nothing to do with your DOCX stuff. It's complaining about the MIME type on the response for js/script.js it gets when requesting your module. Apparently, http-server is returning text/html as the content-type for that, which isn't allowed; it has to be a valid JavaScript MIME type (such as text/javascript, though application/javascript and a few others are okay).

The http-server documentation says you can pass --mimetypes to specify a .types file containing the MIME types to use, telling it to use text/javascript as the MIME type (possibly with a charset). They have an example file here (thank you turbolocust). Or you might consider another server that has common file types pre-configured.