Problems loading <open-stories> and Next.js

[JamesIves]

I'm attempting to load the <open-stories> custom element with Next.js and I seem to be running into a few issues, primarily this is the error I'm getting that is preventing the element from displaying:

TypeError: Cannot set property src of #<OpenStoriesElement> which has only a getter

I'm loading the component client-side like so within a wrapper React component;

'use client'

export default function Stories() {
  return <open-stories src="/api/screenshots"></open-stories>
}

The endpoint resolves to a valid schema, when requested in the browser you get the following:

{"version":"https://jsonfeed.org/version/1.1","title":"Screenshots","_open_stories":{"version":"0.0.9"},"items":[{"id":"2605764403","content_text":"","authors":[{"name":"James","url":"https://jives.dev"}],"_open_stories":{"mime_type":"image/jpg","url":"https://steamuserimages-a.akamaihd.net/ugc/1635359675946958706/E517E16CA053E10ED3EED88E0083F157EBF860E6/","alt":""}}]}

I'm unsure if this error is directly related to Next.js or not. When I exclude the src property from the web component it loads correctly, and you can see the Shadow DOM mount. 🤔

Any help would be super appreciated!

[JamesIves]

Ah! Figured out my issue right after posting this. The src needs to be relative;

'use client'

export default function Stories() {
  return <open-stories src="./api/screenshots"></open-stories>
}

Edit: Ah turns out this is not strictly the case. Opened https://github.com/dddddddddzzzz/open-stories-element/pull/14 with a potential fix!