Grommet Starter has Errors with hot-update.js

Question

I'm working through the starter example for Grommet and hitting this error when I add in the <AppBar> tag:

defaultValidatorFn is not a function
TypeError: defaultValidatorFn is not a function
    at shouldForwardProp (http://localhost:3000/main.c6cdacb143c3e873b1fb.hot-update.js:4491:12)
    at http://localhost:3000/main.c6cdacb143c3e873b1fb.hot-update.js:11014:142
    at D (http://localhost:3000/main.c6cdacb143c3e873b1fb.hot-update.js:11023:6)
    at renderWithHooks (http://localhost:3000/static/js/bundle.js:31049:22)
    at updateForwardRef (http://localhost:3000/static/js/bundle.js:33620:24)
    at beginWork (http://localhost:3000/static/js/bundle.js:35667:20)
    at HTMLUnknownElement.callCallback (http://localhost:3000/static/js/bundle.js:20641:18)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/static/js/bundle.js:20685:20)
    at invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:20742:35)
    at beginWork$1 (http://localhost:3000/static/js/bundle.js:40616:11)

On further inspection, the console shows a bunch of warnings like the following:

styled-components: it looks like an unknown prop "full" is being sent through to the DOM, which will likely trigger a React console error

I tried yarn add @emotion/is-prop-valid but that didn't make any difference. What am I doing wrong here?

score 4 · Answer 1 · answered Jul 07 '23 at 21:04

4

One of the steps is to add styled-components to the dependencies. The newest major version is 6, but Grommet is currently only compatible with 5. I changed the version to ^5.3.11 in package.json and that solved the problem.

answered Jul 07 '23 at 21:04

ngreen

1,559
13
22

Grommet Starter has Errors with hot-update.js

1 Answers1