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

Unauthenticated fetch requests throw Illegal invocation error #443

@Dexagod

Description

@Dexagod

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions