EXCEPTION: mammoth is not defined

Question

I am trying to integrate mammoth npm library with meteor.

When using the import command, import { mammoth } from "mammoth"; was getting

Uncaught TypeError: Cannot read property 'bind' of undefined

When using the command, declare var mammoth: any; was getting

EXCEPTION: mammoth is not defined

The code I am using is

this.readFileInputEventAsArrayBuffer(event, function(arrayBuffer) {
      mammoth
        .convertToHtml({ arrayBuffer: arrayBuffer })
        .then(function(result: any) {
          var html = result.value; // The generated HTML
          var messages = result.messages; // Any messages, such as warnings during conversion
          // console.log('html: ' + html);
          document.getElementById("output").innerHTML = html;
          var elements = document.getElementById("output").children;
          console.log(elements);
          console.log(JSON.stringify(elements));
          console.log(elements.length);
          for (var i = 0; i < elements.length; i++) {
            console.log(i + " --- ");
            console.log(elements[i]);
            var data = elements[i].innerHTML;
            // elements[i].setAttribute("draggable","true");
          }
        })
        .done();
      console.log(
        "event in fileUpload-readFileInputEventAsArrayBuffer" + event
      );
    });

 readFileInputEventAsArrayBuffer(event, callback) {
    var file = event.target.files[0];

    var reader = new FileReader();

    reader.onload = function(loadEvent: any) {
      var arrayBuffer = loadEvent.target.result;
      console.log("arrayBuffer: ");
      console.log(arrayBuffer);
      callback(arrayBuffer);
    };

    reader.readAsArrayBuffer(file);
  }

When using the import

declare var mammoth: any;

getting the error

ReferenceError: mammoth is not defined
at app.component.ts:75
at FileReader.reader.onload (app.component.ts:109)
at ZoneDelegate.invoke (modules.js:22723)
at Object.onInvoke (modules.js:57096)
at ZoneDelegate.invoke (modules.js:22722)
at Zone.runGuarded (modules.js:22607)
at FileReader.<anonymous> (modules.js:22585)

Uncaught ReferenceError: mammoth is not defined
at app.component.ts:75
at FileReader.reader.onload (app.component.ts:109)
at ZoneDelegate.invoke (modules.js:22723)
at Object.onInvoke (modules.js:57096)
at ZoneDelegate.invoke (modules.js:22722)
at Zone.runGuarded (modules.js:22607)
at FileReader.<anonymous> (modules.js:22585)

When using the import

import { mammoth } from "mammoth";

getting the error

Uncaught TypeError: Cannot read property 'bind' of undefined
at meteorInstall.node_modules.mammoth.lib.docx.files.js (modules.js?hash=cd1f432…:83272)
at fileEvaluate (modules-runtime.js?hash=637cb12…:191)
at require (modules-runtime.js?hash=637cb12…:116)
at meteorInstall.node_modules.mammoth.lib.docx.docx-reader.js (modules.js?hash=cd1f432…:82091)
at fileEvaluate (modules-runtime.js?hash=637cb12…:191)
at require (modules-runtime.js?hash=637cb12…:116)
at meteorInstall.node_modules.mammoth.lib.index.js (modules.js?hash=cd1f432…:81954)
at fileEvaluate (modules-runtime.js?hash=637cb12…:191)
at require (modules-runtime.js?hash=637cb12…:116)
at meteorInstall.client.imports.app.app.component.js (app.component.ts:12)
at fileEvaluate (modules-runtime.js?hash=637cb12…:191)
at require (modules-runtime.js?hash=637cb12…:116)
at meteorInstall.client.imports.app.index.js (index.ts:1)
at fileEvaluate (modules-runtime.js?hash=637cb12…:191)
at require (modules-runtime.js?hash=637cb12…:116)
at meteorInstall.client.main.js (main.ts:5)
at fileEvaluate (modules-runtime.js?hash=637cb12…:191)
at require (modules-runtime.js?hash=637cb12…:116)
at demo.collection.ts:4

Please help in this.

P.S.: When running as a angular project, it is working fine. Facing the issue, when doing it in angular-meteor project.

Answer 1

Try and see if this works: import 'mammoth/mammoth.browser'; (browser build)

Or if you can may want to do this on the front-end, then you can use then include the following scripts onto your html page and do it on runtime. (Converting doc to html and rendering)

• As, also shown in this article -> https://mike.zwobble.org/projects/mammoth/

Script to be included:

• demo.js -> https://mike.zwobble.org/static/projects/mammoth/demo.js
• mammoth.browser.min.js -> https://mike.zwobble.org/static/projects/mammoth/mammoth.browser.min.js

Hope this helps.

Answer 2

If you look at the source code of the mammoth npm package, you will see that there is no 'mammoth' nor default exported. It does, however, export each of the methods, so you can do it like this:

import {convertToHtml} from "mammoth";

convertToHtml({path: "path/to/document.docx"})
    .then(function(result){
        var html = result.value; // The generated HTML 
        var messages = result.messages; // Any messages, such as warnings during conversion 
    })
    .done();

That should do the trick :)

Answer 3

Try to import like this: import {convertToHtml} from 'mammoth/mammoth.browser';

Inside componet.ts file:

import {convertToHtml} from "mammoth/mammoth.browser";
                   

convertToHtml({ arrayBuffer: arrayBuffer })
.then(function(result){
    var html = result.value; // The generated HTML
    var messages = result.messages; // Any messages, such as warnings during conversion
})
.done();

Above code worked for me in angular 9.