Item update in Admin UI fails to show toast message + errors in console

[rubenvar]

Bug report

Describe the bug

Every time I try to update an item using the admin UI, the toast message that used to appear after clicking "Save" fails to do so, and an error appears in the console:

Uncaught (in promise) ReferenceError: React is not defined
    at toastItemSuccess (util.js:40:5)
    at _callee$ (index.js:223:21)
    at tryCatch (runtime.js:63:15)
    at Generator.invoke [as _invoke] (runtime.js:294:1)
    at Generator.next (runtime.js:119:1)
    at asyncGeneratorStep (main.5038e4a099fa9664fade.bundle.js:109450:103)
    at _next (main.5038e4a099fa9664fade.bundle.js:109452:194)

util.js:40

The item is updated in the db, but subsequent tries to update the item fail with the same error shown. The solution is to refresh the page. I did a clean install of keystone-5 following the docs and this happens in the starter app too.

I tracked the bug to this file in the @keystone/app-admin-ui package. I replaced line 3:

import { useState, useEffect } from 'react';

with

import React, { useState, useEffect } from 'react';

manually in the node_modules folder file and it fixed the bug.

To Reproduce

Steps to reproduce the behaviour:

1. Clean install npm init keystone-5-app my-app.
2. Follow the steps: provide a db connection string, check the connection, choose a starter (this bug appears with any starter that uses the admin UI).
3. Update any item using the admin UI. It doesn't have to be a custom List, trying to update the initial user created by the install throws the error too.
4. See error in the console.

Expected behaviour

The item should be updated and a toast message shown, success or error one depending on data inputed.

Additional context

I know Keystone 5 is in maintenance mode, but I think many people still use it and this bug makes really inconvenient working with it.

I don't have experience working with monorepos, but would be happy to send a PR if that will help fix it. Thank you!

[Sylchi]

My workaround for this is following

When initializing the admin UI app you can define a path for admin UI react hooks. The type of this should be string.

for me it looks like this:

  new AdminUIApp({
    name: PROJECT_NAME,
    enableDefaultRoute: false,
    authStrategy: passwordAuthStrategy,
    hooks: require.resolve('./admin-hooks/hooks.js'),
  })

then my hooks file looks like this

 import React from "react"

export default {
  logo: () => {
    console.log("Logo hooks loaded")
  },
  pages: () => {
    console.log("Pages hooks loaded")
    window.React = React;
    return []
    }
}

[rubenvar]

Thank you for this workaround @Sylchi, it works perfectly