Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unauthenticated fetch requests throw Illegal invocation error #443

Open
Dexagod opened this issue Sep 10, 2021 · 0 comments
Open

Unauthenticated fetch requests throw Illegal invocation error #443

Dexagod opened this issue Sep 10, 2021 · 0 comments
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant