javascripthtmlnode.jsmodulenode-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.