No Renderer for file type application/vnd.openxmlformats-officedocument.wordprocessingml.document

[Gusyavo]

Hello!

I am getting this message when I try to use this library:

This is my code:

Am I doing anything wrong? Thanks in advance for your answer!

import React from 'react' import DocViewer from 'react-doc-viewer'

function Viewer() {

// const path = './Sample1.docx'

const docs = [ // { uri: path }, // Local File { uri: require('./Interview.docx') }, // Local File ]

return (

) }

export default Viewer

[mattmogford-alcumus]

Apologies for the late reply. Even though I created this repo, I didn't get notifications. I'm now watching it.

You must make sure you supply <DocViewer> with pluginRenderers. https://github.com/Alcumus/react-doc-viewer#included-renderers

import DocViewer, { DocViewerRenderers } from "react-doc-viewer";

<DocViewer
  pluginRenderers={DocViewerRenderers}
  {/* ... */}
/>;

DocViewerRenderers includes the MSDocRenderer. Or if you don't need the other renderers you can use it like this...

import DocViewer, { MSDocRenderer } from "react-doc-viewer";

<DocViewer
  pluginRenderers={[ MSDocRenderer ]}
  {/* ... */}
/>;

[mattmogford-alcumus]

@Gusyavo If you are still having issues, respond here and I will gladly help out.

[Gusyavo]

@Gusyavo If you are still having issues, respond here and I will gladly help out.

Hey Matt!

Thank you very much for taking the time to answer, I really apreciate it.

I did as you adviced and added the pluginRenderers, this is the code:

the url is a url to an s3 bucket that contains a .docx file. I verified it and it works.

But I get this error:

[mattmogford-alcumus]

I believe when fetching the file extension aws returns xml instead of the actual filetype extension. Do you know the fileType extension in advance? If so could you provide it to the docs array object?

const { url, extension } = props
const docs = [{uri: url, fileType: extension}]

[Gusyavo]

You were right!!! It now looks like this:

It renders the doc, but it shows the urlson top of it too. Am I doing anything wrong?

And, to adjust the height, I guess I have to create a custom renderer and add use css in it, right?

[mattmogford-alcumus]

1. The Header EDIT If you update to 0.1.1 - the header will be fixed for you.

~~Is separate from the custom renderers for file types. You have a few options for the header, I will add more in the future. https://github.com/Alcumus/react-doc-viewer#config a) disableHeader: true - Then Create your own header/file name display wherever you want. But this will remove file navigation if you plan on using multiple files. b) disableFileName: true - Will keep the header, and the multi-file navigation, but hide the file name. c) https://github.com/Alcumus/react-doc-viewer#overriding-header-component - You can override the whole header with whatever you want, as long as it is a valid React Component.~~

2. The Height Without seeing your code exactly I can only guess. But I'm almost certain you just need to add a height to the main component. So you can try one of the following from https://github.com/Alcumus/react-doc-viewer#styling - a) Adding a className to the <DocViewer> component like you would any other React component then having a css class with height as a property in a css file. b) In a css file override the main component id styles with #react-doc-viewer { height: 900px } c) Inline style - style={{width: 500, height: 500}} d) Styled Component

[mattmogford-alcumus]

@Gusyavo I would also recommend hiding the access key etc. in your screenshot just in-case.

[Gusyavo]

1. The Header EDIT If you update to 0.1.1 - the header will be fixed for you.

~Is separate from the custom renderers for file types. You have a few options for the header, I will add more in the future. https://github.com/Alcumus/react-doc-viewer#config a) disableHeader: true - Then Create your own header/file name display wherever you want. But this will remove file navigation if you plan on using multiple files. b) disableFileName: true - Will keep the header, and the multi-file navigation, but hide the file name. c) https://github.com/Alcumus/react-doc-viewer#overriding-header-component - You can override the whole header with whatever you want, as long as it is a valid React Component.~

2. The Height Without seeing your code exactly I can only guess. But I'm almost certain you just need to add a height to the main component. So you can try one of the following from https://github.com/Alcumus/react-doc-viewer#styling - a) Adding a className to the <DocViewer> component like you would any other React component then having a css class with height as a property in a css file. b) In a css file override the main component id styles with #react-doc-viewer { height: 900px } c) Inline style - style={{width: 500, height: 500}} d) Styled Component

Matt, I can't thank you enough for your help! It was really kind of you telling me what to do. And this library works beautifully!!!

[Gusyavo]

One last thing: everything works perfectly but I am getting these warnings, I do not know if they are normal:

[mattmogford-alcumus]

One last thing: everything works perfectly but I am getting these warnings, I do not know if they are normal:

This is an old but common issue with JQuery. I guess you are using JQuery? Or a library that is using jquery.

This is outside of the scope of react-doc-viewer, but I have read that this can solve your issue

jQuery.event.special.touchstart = {
  setup: function( _, ns, handle ){
    if ( ns.includes("noPreventDefault") ) {
      this.addEventListener("touchstart", handle, { passive: false });
    } else {
      this.addEventListener("touchstart", handle, { passive: true });
    }
  }
};
jQuery.event.special.touchmove = {
  setup: function( _, ns, handle ){
    if ( ns.includes("noPreventDefault") ) {
      this.addEventListener("touchmove", handle, { passive: false });
    } else {
      this.addEventListener("touchmove", handle, { passive: true });
    }
  }
};

Although I'm not sure where that code needs to go. Maybe at the end of the jquery file?? I haven't used JQuery for a long time. You may need to clone more of those blocks of code to get rid of mousewheel warnings too, and any others that are still happening.