solid-ui-react icon indicating copy to clipboard operation
solid-ui-react copied to clipboard

Unauthenticated fetch requests throw Illegal invocation error

Open Dexagod opened this issue 4 years ago • 1 comments

Search terms you've used

fetch, window, invocation error

Bug description

The unauthenticated fetch function causes an error in the useThing hook: Failed to execute 'fetch' on 'Window': Illegal invocation (I expect this is a problem for all exposed components

To Reproduce

  1. setup the sample project at https://docs.inrupt.com/developer-tools/javascript/react-sdk/application/
  2. Create a custom Test component
  3. change the /pages/index.jsx file to include the new component instead of the profile view

/pages/index.jsx:

import { useSession } from "@inrupt/solid-ui-react";
import Test from "../components/test";

export default function Home() {
  const { session } = useSession();
  return (
    <div>
      <h1>Demo</h1>
      <Test />
    </div>
  );
}

/components/test/index.jsx


import { useState } from "react";
import { useThing } from "@inrupt/solid-ui-react";
import { Container, TextField } from "@material-ui/core";


export default function Test() {
  const [value, setValue] = useState('')
  const {thing, error} = useThing(value, value)
  console.log(thing)

  function mapDataset (quads) { return(Array.from(quads).map(q => `s:${q.subject.value}-p:${q.predicate.value}-o:${q.object.value}\n`)) } 
  return (
    <Container fixed>
      <TextField value={value} onChange={(e) => setValue(e.target.value)} style={{width: "100%"}}/>
      <p>{thing ? mapDataset(thing.quads.values()) : (error ? "Error was thrown" : "Loading ...")}</p>
      <p style={{color: 'red'}}>Error: { error && error.message}</p>

    </Container>
  );
}

Expected result

The Thing object of the currently queries item should be retrieved when it exists

Actual result

The internal fetch function in the useThing() hook fails with the error: Failed to execute 'fetch' on 'Window': Illegal invocation

Environment

Please run

npx envinfo --system --npmPackages --binaries --npmGlobalPackages --browsers

in your project folder and paste the output here:

$ npx envinfo --system --npmPackages --binaries --npmGlobalPackages --browsers
 System:
    OS: Linux 5.4 Manjaro Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-7440HQ CPU @ 2.80GHz
    Memory: 2.71 GB / 15.52 GB
    Container: Yes
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 16.7.0 - /usr/bin/node
    Yarn: 1.22.11 - /usr/bin/yarn
    npm: 7.21.0 - /usr/bin/npm

I got the issues with the packages exactly as in the demo.
I tried updating them afterwards but got some compilation issues for which I currently do not have time :sweat_smile: 


Additional information

Dexagod avatar Sep 10 '21 14:09 Dexagod

Hi @Dexagod , I'm sorry this issue was never replied to. We are deprecating this library, so unfortunately we will not address the open issues.

NSeydoux avatar Dec 16 '24 22:12 NSeydoux