Error when adding different Lightning Web Components to the Playground

Question

I'm using the Salesforce LIGHTNING WEB COMPONENTS PLAYGROUND to build a prototype in LWC:

https://developer.salesforce.com/docs/component-library/tools/playground/

However when I add an additional LWC not already in use on the HTML page, such as:

<lightning-input-field field-name="FirstName"></lightning-input-field>

I get the following compilation error message:

"Could not load /api/runtime/lwc-components/1.0.25-alpha/src/aura// (imported by /api/runtime/lwc-components/1.0.25-alpha/src/lightning/lookupDesktop/): LWC1016: Expected an object with files to be compiled."

Am I missing any step here?

Answer 1

The core issue here is that the:

<lightning-input-field></lightning-input-field>

expects to have data via a

<lightning-record-edit-form></lighting-record-edit-form>

Since the playground is not backed by a Salesforce Org there is inherently no Record data.

The documentation says:

To create a record create layout, use this component with lightning-record-edit-form and pass in the object API name of the record you're creating. You don't need additional Apex controllers or Lightning Data Service as data refresh happens automatically.

While docs don't explicitly call out that you can't use this on it's own this is the case.

You can use a

<lightning-input></lightning-input>

There are some pre-made examples in the playground.