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 a life-cycle method like componentDidMount or in an event handler like 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.

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

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. using the then method of 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).