Displayes error for every file: An error occurred

[supinder-cf]

An error occurred We're sorry, but for some reason we can't open this for you.

It doesn't work with the demo files which are included in the project.

Node version: 16 "dependencies": { "@cyntler/react-doc-viewer": "^1.2.0", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^13.3.0", "@testing-library/user-event": "^13.5.0", "@types/jest": "^27.5.2", "@types/node": "^16.11.41", "@types/react": "^18.0.14", "@types/react-dom": "^18.0.5", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "typescript": "^4.7.4", "web-vitals": "^2.1.4" },

[aaron-0406]

I have the same problem, Can someone help us?

[cyntler]

@supinder-cf @aaron-0406 Have you xlsx file/files by external url or by import/require locally? Can I get the file/files? Maybe I would be able to reproduce and fix it.

[supinder-cf]

@cyntler thanks for responding back. Please find the attached files that I am trying. I am requiring these files locally. Here is the code for the same.

import React from 'react';
import DocViewer, { DocViewerRenderers } from "@cyntler/react-doc-viewer";
import './App.css';

const App = () => {
  const docs = [
    { uri: require("./test-excelaki.xlsx") },
    { uri: require("./test-doc.docx") }
  ];

  return (
    <div className="App" >
      <DocViewer pluginRenderers={DocViewerRenderers} documents={docs} />
    </div>
  );
}

export default App;

test-doc.docx test-excelaki.xlsx

[rnwalker7]

This may shed a little light into it...it appears that the issue may have to do with Tracking Prevention. Seems to happen on Word docs when trying to pull down data from Microsoft's servers.

[cyntler]

@supinder-cf @rnwalker7 The problem is probably because this library is using "Office Web Viewer" by Microsoft and it requires public available URL to the file. Localhost is not public. But after all, that's my guess and I'm not sure. I have to check this problem yet.

[rnwalker7]

@cyntler Good point. I'm looking at workarounds as well, but may need to push to remote for testing purposes.

[rnwalker7]

So I just thought of something...I'm wondering if the distant end requires CORS and throws the error if the web server doesn't return a CORS header. I'll investigate.

[ironcracker]

So I just thought of something...I'm wondering if the distant end requires CORS and throws the error if the web server doesn't return a CORS header. I tried checking that by running chrome without CORS and it doesn't appear to be the case here (at least not for me). Also clicking on the learn more link generates a 404 error

[ibrahimalkatip]

how can i make the local file as public , I am facing the same problem

[qidasheng369]

I also have the same problem

devScripts.js:6523 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. at LoadingTimeout (http://localhost:8000/mf-dep_vendors-node_modules_cyntler_react-doc-viewer_dist_esm_index_js-node_modules_react-is_index_js.945e8de5.async.js:218:23) at Contents

[SidWML]

@cyntler https://static-sq-chat.s3.amazonaws.com/uploads/98820cea/D_Strange-Girl_Meets_Boy_Penguin_Readers-1-min.pdf?AWSAccessKeyId=adghakdehaoyKLKHSnKLhljKLDHklabdx&Signature=fsdfDsfsfsfsfsfD&Expires=1704870237
<DocViewer documents={[{uri:'/movies100.pdf'}]} pluginRenderers={DocViewerRenderers} prefetchMethod="GET" /> Iam not able to load from the above path but files from local are working fine

[SatamSai]

The react-doc-viewer uses Office Web Apps viewer. However, when it attempt to use signed URLs from Amazon S3, it fails because these URLs contain tokens as query parameters. This issue causes the Office viewer to not work properly. To overcome this, you can mask the original link and pass the masked link as the URI to react-doc-viewer. refer below stackoverflow link: https://stackoverflow.com/questions/59798131/amazon-s3-signed-url-is-not-working-with-office-web-apps-viewer-encodeuricompon