Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.
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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions