So, you ran into this error and are wondering what to do about it?

How to fix the error depends on where it occurred.

When working in the console, wrap the code you are trying to run in this helper, which takes care of loading:

What does this helper do? It uses Scrivito.load to load all data your code requires. And it uses Javascript’s await operator to wait for the result.

Note that, when using Scrivito.load, your code should be “pure” (meaning: free of side-effects).

This example shows how to print the root Obj onto the browser console:

See also: Working in the Browser Console

Are you using a simple functional React component? Or a class-based React component, and the error is thrown in the render method?

You should connect the component to Scrivito by wrapping it with Scrivito.connect. A connected component will load all the required CMS data automatically, and the error will go away.

If the error is thrown inside a React component but outside of render, e.g., in an effect hook like useEffect or in an event handler such as onClick, see the next section.

If the error is thrown somewhere inside your application, it probably tries to access Scrivito data that needs to be loaded first.

If the error pops up as a React component is being rendered, Scrivito.load is not needed. It’s much easier to use Scrivito.connect (see above).

If the error occurs in an event handler or effect hook, check if accessing the CMS data is inexpensive or done unconditionally. If it is, consider hoisting data access to the render block, and using Scrivito.connect (see above).

Otherwise, wrap the code that accesses CMS content into Scrivito.load(), and use the returned Promise to perform asynchronous actions, like so:

As you can see, your code is typically split into two parts:

• Accessing CMS data
• Using the result

An example:

Why do you need to split the code? The code block passed into Scrivito.load needs to be “pure” in the sense that it must not have any side effects. This is because the code may be executed multiple times by Scrivito.load, so changing state while performing I/O would be a bad idea. You can also think of it like this: The code inside Scrivito.load should only read data, not write or modify anything.

Any code with side effects (like changing state, interacting with the browser, performing network requests) needs to be run asynchronously, i.e. after awaiting the Promise returned by Scrivito.load.

Keep in mind that Scrivito.load is not needed for rendering. When rendering, it’s much easier to use Scrivito.connect (see above).