Skip to content
This repository has been archived by the owner on Dec 18, 2024. It is now read-only.

Unauthenticated fetch requests throw Illegal invocation error #443

Open
Dexagod opened this issue Sep 10, 2021 · 1 comment
Open

Unauthenticated fetch requests throw Illegal invocation error #443

Dexagod opened this issue Sep 10, 2021 · 1 comment
Labels
bug Something isn't working

Comments

@Dexagod
Copy link

Dexagod commented Sep 10, 2021

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 Dexagod added the bug Something isn't working label Sep 10, 2021
@NSeydoux
Copy link
Contributor

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants