0

I have a copy of the sheetjs.js file and I would like to use it in my React TypeScript app.

I have entered a reference to the sheetjs in the HTML file found in public folder.

<script src="%PUBLIC_URL%/sheetjs.js"></script>

I have copied the file inside the public folder of the React application.

If I do the following:

React.useEffect(() => {
    let wb = new WorkBook();
}, []);

It throws this error:

Cannot find name 'WorkBook'.

How can I access sheetjs and its objects in component?

Tried this:

 const xlsx= XLSX.utils;

As stated in their documentation: const worksheet = XLSX.utils.json_to_sheet(rows);

It returns: Cannot find name 'XLSX'.

In the console it returns the following:

enter image description here

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
user20377051
  • 25
  • 5
  • What's wrong with the current solution? – Konrad Nov 29 '22 at 15:23
  • it throws: `Cannot find name 'WorkBook'.` – user20377051 Nov 29 '22 at 15:33
  • Did you import it? Where does Workbook come from? You're not providing enough code nor detail to help you. – possum Nov 29 '22 at 15:35
  • Is this helpful? https://stackoverflow.com/questions/45658200/how-do-i-use-include-third-party-libraries-in-react - or this since its TS https://stackoverflow.com/questions/70482114/how-to-import-types-from-a-third-party-library – Nikki9696 Nov 29 '22 at 15:41
  • I have updated my post. I have added the file in the public folder of the react app. My question is, how can I reference this js file so I can use it in my component? I am not sure how to do that. That's why I am asking. – user20377051 Nov 29 '22 at 15:42
  • Either the file doesn't load at all or you have wrong order of scripts in your html file. Open dev tools, click network tab and see if you are getting 200 response for sheetjs – Konrad Nov 29 '22 at 15:43
  • @konrad the file loads correctly. It returns a 200 status. – user20377051 Nov 29 '22 at 15:47
  • What does `WorkBook` prints when you write it in the console? – Konrad Nov 29 '22 at 16:40
  • it returns: {encode_col: ƒ, encode_row: ƒ, encode_cell: ƒ, encode_range: ƒ, decode_col: ƒ, …} – user20377051 Nov 29 '22 at 16:59
  • I updated my post above. Please see section: Update. – user20377051 Nov 29 '22 at 17:07
  • You're probably trying to access `WorkBook` before it has been downloaded and parsed. I recommend reading the answer to [Using a regular JavaScript library inside a React component](https://stackoverflow.com/q/42038327/215552) or [Import external JS library and use it inside React component](https://stackoverflow.com/q/66808111/215552) – Heretic Monkey Nov 29 '22 at 17:13
  • Heretic, they don't help. – user20377051 Nov 29 '22 at 18:39

0 Answers0