Cross-origin error when updating a state in React

[flosommerfeld]

Specification

• pywebview version: 3.5
• operating system: Ubuntu 20.04.3 LTS, Windows 11
• web renderer: QtWebEngine / QtWebKit, CEF Python

Description

Not too sure if my problem is coming from pywebview, webpack or React. So the context is the following: I am working on a project where I want to get data, more specifically a list/Array of Strings, from my pywebview js_api and display that list with React. I am getting the list and it looks completely fine. No undefined values, everything is a String and it really is an Array. So the retrieved data appears to be valid. After retrieving the data I want to set it as a state variable in React so that I can pass it to another component as a prop. BUT after setting it as a state variable I am getting a cross-origin error: Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://reactjs.org/docs/cross-origin-errors.html for more information. I've tried a couple of things, including what the React error page suggested. I also tried to simply set the innerHTML of <div id="test" /> to my data and it works just fine - the data is being rendered. This error is just thrown whenever I use the state hook.

I am actually bundleing my javascript modules with webpack... maybe its just a config issue. Since that might be the case, I consider switching to the Parcel bundler which you are also using in the pywwebview-react-boilerplate repo Do you have any idea what might be causing this? I know this might not really related to pywebview, so I really appreciate help.

Code snippet

As you can see below, I am fetching the data from the Python API in a useEffect hook and trying to set the state which shall rerender my component so that the child component will display the courses.

export default function Dashboard(props) {
    // some props etc. were removed to keep this snippet simple

    // the state variable which causes issues
    const [courses, setCourses] = React.useState([]);

    // get Data from Python API
    React.useEffect(()=>{
        getData();
    }, []);

    /**
     * Gets the needed data (login status, courses, username) by calling the Python API
     */
    function getData() {
      window.pywebview.api.foo().then((foo) => {
        // do stuff
      }).then(() => {
        // fetch the courses from the Python API
        window.pywebview.api.getCourses().then((response) => {
          // try to update the state variable
          setCourses(response); // <------- throws the error
        }).catch((response) => {console.log(response);
      });

    }

    return (
      <Box>
        <MainAppBar />
        <Grid container spacing={0}>
            <Grid item>
              <MenuList />
            </Grid>
            <Grid item>
              <CourseList courses={courses} /> {/* passing the courses to the CourseList component */}
            </Grid>
            <FloatingSyncButton />
          </Grid>
        </Box>
    )
  }

  export function CourseList({ courses }) {

    // logic...

    return (
      <List>
      {/* trying to list each course item */}
        {courses.map((courseName) => {
          return (
            <ListItem
              key={courseName}
              disablePadding
            >
              <ListItemButton>
              <Checkbox/>
                <ListItemAvatar>
                  <Avatar>{courseName}</Avatar>
                </ListItemAvatar>
                <ListItemText primary={courseName} />
              </ListItemButton>
            </ListItem>
          );
        })}
      </List>
    );
  }

I can also post my js_api but it appears to work just fine.

Practicalities

• YES I am willing to work on this issue myself.

• NO I am prepared to support this issue financially.

[r0x0r]

How do you load html? Using http server or local?

[flosommerfeld]

Locally via the path to the index.html file which includes the bundled react script.

[r0x0r]

Could you test if it makes any difference if you use the builtin http server?

[flosommerfeld]

I haven't looked much into it but with the http server I am getting the following error: TypeError: Function.prototype.apply was called on undefined, which is a undefined and not a function

But I still get the data and can also print it.

I have absolutely no clue how this is happening... will thoroughly debug this asap. Might also try to downgrade React just in case..

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[github-actions[bot]]

The message to post on the issue when closing it. If none provided, will not comment when closing an issue.