React component not showing only on dev

[davidvpe]

Astro Info

Astro                    v4.7.0
Node                     v18.17.1
System                   macOS (arm64)
Package Manager          yarn
Output                   static
Adapter                  none
Integrations             @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

I am porting a website from NextJS to Astro. So far I was able to do most of it but there is one library that I use React Social Media Embed. And I use it like so:

--
import { InstagramEmbed } from 'react-social-media-embed';
interface Props {
  reelURL: string;
};
const { reelURL } = Astro.props;
--

<div>
    <p>I am visible<p>
    <InstagramEmbed
        client:only="react"
        className="reels__video"
        url={reelURL ?? 'https://www.instagram.com/p/C4i1FBOLPHV/'}
    />
</div>

This works fine when I run astor build and astro preview but when I do astro dev the InstagramEmbed component does not show, also I get some errors on the browser console.

[Error] Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
	printWarning (chunk-YQUJFRB2.js:136)
	error (chunk-YQUJFRB2.js:120)
	createElementWithValidation (chunk-YQUJFRB2.js:1586)
	(anonymous function) (@astrojs_react_client__js.js:125)
	(anonymous function) (localhost:31:6299)
	(anonymous function) (localhost:31:6514)
	(anonymous function) (localhost:31:4593)

[Error] Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
	createFiberFromTypeAndProps (chunk-DIVDBM4P.js:20439:222)
	createFiberFromElement (chunk-DIVDBM4P.js:20460)
	reconcileSingleElement (chunk-DIVDBM4P.js:11801)
	reconcileChildFibers2 (chunk-DIVDBM4P.js:11838)
	reconcileChildren (chunk-DIVDBM4P.js:14294)
	updateHostRoot (chunk-DIVDBM4P.js:14775)
	callCallback2 (chunk-DIVDBM4P.js:3674)
	dispatchEvent
	invokeGuardedCallbackDev (chunk-DIVDBM4P.js:3699)
	invokeGuardedCallback (chunk-DIVDBM4P.js:3733)
	beginWork$1 (chunk-DIVDBM4P.js:19761)
	performUnitOfWork (chunk-DIVDBM4P.js:19194)
	workLoopConcurrent (chunk-DIVDBM4P.js:19185)
	renderRootConcurrent (chunk-DIVDBM4P.js:19160)
	performConcurrentWorkOnRoot (chunk-DIVDBM4P.js:18674)
	workLoop (chunk-DIVDBM4P.js:197)
	flushWork (chunk-DIVDBM4P.js:176)
	performWorkUntilDeadline (chunk-DIVDBM4P.js:384)
	
[Error] Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
	performConcurrentWorkOnRoot (chunk-DIVDBM4P.js:18688)
	workLoop (chunk-DIVDBM4P.js:197)
	flushWork (chunk-DIVDBM4P.js:176)
	performWorkUntilDeadline (chunk-DIVDBM4P.js:384)

In dev the rendered html is:

<div class="reels" data-astro-cid-vv3nzqci=""
  data-astro-source-file="C:/Projects/page/src/components/reels.astro"
  data-astro-source-loc="29:20">
  <style>
    astro-island,
    astro-slot,
    astro-static-slot {
      display: contents
    }
  </style>
  <script>(() => { var e = async t => { await (await t())() }; (self.Astro || (self.Astro = {})).only = e; window.dispatchEvent(new Event("astro:only")); })();; (() => { var A = Object.defineProperty; var g = (a, o, i) => o in a ? A(a, o, { enumerable: !0, configurable: !0, writable: !0, value: i }) : a[o] = i; var l = (a, o, i) => (g(a, typeof o != "symbol" ? o + "" : o, i), i); { let a = { 0: t => y(t), 1: t => i(t), 2: t => new RegExp(t), 3: t => new Date(t), 4: t => new Map(i(t)), 5: t => new Set(i(t)), 6: t => BigInt(t), 7: t => new URL(t), 8: t => new Uint8Array(t), 9: t => new Uint16Array(t), 10: t => new Uint32Array(t) }, o = t => { let [h, e] = t; return h in a ? a[h](e) : void 0 }, i = t => t.map(o), y = t => typeof t != "object" || t === null ? t : Object.fromEntries(Object.entries(t).map(([h, e]) => [h, o(e)])); class f extends HTMLElement { constructor() { super(...arguments); l(this, "Component"); l(this, "hydrator"); l(this, "hydrate", async () => { var b; if (!this.hydrator || !this.isConnected) return; let e = (b = this.parentElement) == null ? void 0 : b.closest("astro-island[ssr]"); if (e) { e.addEventListener("astro:hydrate", this.hydrate, { once: !0 }); return } let c = this.querySelectorAll("astro-slot"), n = {}, p = this.querySelectorAll("template[data-astro-template]"); for (let r of p) { let s = r.closest(this.tagName); s != null && s.isSameNode(this) && (n[r.getAttribute("data-astro-template") || "default"] = r.innerHTML, r.remove()) } for (let r of c) { let s = r.closest(this.tagName); s != null && s.isSameNode(this) && (n[r.getAttribute("name") || "default"] = r.innerHTML) } let u; try { u = this.hasAttribute("props") ? y(JSON.parse(this.getAttribute("props"))) : {} } catch (r) { let s = this.getAttribute("component-url") || "<unknown>", v = this.getAttribute("component-export"); throw v && (s += ` (export ${v})`), console.error(`[hydrate] Error parsing props for component ${s}`, this.getAttribute("props"), r), r } let d, m = this.hydrator(this); d = performance.now(), await m(this.Component, u, n, { client: this.getAttribute("client") }), d && this.setAttribute("client-render-time", (performance.now() - d).toString()), this.removeAttribute("ssr"), this.dispatchEvent(new CustomEvent("astro:hydrate")) }); l(this, "unmount", () => { this.isConnected || this.dispatchEvent(new CustomEvent("astro:unmount")) }) } disconnectedCallback() { document.removeEventListener("astro:after-swap", this.unmount), document.addEventListener("astro:after-swap", this.unmount, { once: !0 }) } connectedCallback() { if (!this.hasAttribute("await-children") || document.readyState === "interactive" || document.readyState === "complete") this.childrenConnectedCallback(); else { let e = () => { document.removeEventListener("DOMContentLoaded", e), c.disconnect(), this.childrenConnectedCallback() }, c = new MutationObserver(() => { var n; ((n = this.lastChild) == null ? void 0 : n.nodeType) === Node.COMMENT_NODE && this.lastChild.nodeValue === "astro:end" && (this.lastChild.remove(), e()) }); c.observe(this, { childList: !0 }), document.addEventListener("DOMContentLoaded", e) } } async childrenConnectedCallback() { let e = this.getAttribute("before-hydration-url"); e && await import(e), this.start() } async start() { let e = JSON.parse(this.getAttribute("opts")), c = this.getAttribute("client"); if (Astro[c] === void 0) { window.addEventListener(`astro:${c}`, () => this.start(), { once: !0 }); return } try { await Astro[c](async () => { let n = this.getAttribute("renderer-url"), [p, { default: u }] = await Promise.all([import(this.getAttribute("component-url")), n ? import(n) : () => () => { }]), d = this.getAttribute("component-export") || "default"; if (!d.includes(".")) this.Component = p[d]; else { this.Component = p; for (let m of d.split(".")) this.Component = this.Component[m] } return this.hydrator = u, this.hydrate }, e, this) } catch (n) { console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`, n) } } attributeChangedCallback() { this.hydrate() } } l(f, "observedAttributes", ["props"]), customElements.get("astro-island") || customElements.define("astro-island", f) } })();</script>
  <astro-island uid="ZsoX5u" component-url="/node_modules/.vite/deps/react-social-media-embed.js?v=6bdd89dd"
    component-export="InstagramEmbed" renderer-url="/node_modules/.vite/deps/@astrojs_react_client__js.js?v=c8de8c0f"
    props="{&quot;className&quot;:[0,&quot;reels__video&quot;],&quot;url&quot;:[0,&quot;https://www.instagram.com/p/C4i1FBOLPHV/&quot;],&quot;data-astro-cid-vv3nzqci&quot;:[0,true]}"
    client="only" before-hydration-url="/@id/astro:scripts/before-hydration.js"
    opts="{&quot;name&quot;:&quot;InstagramEmbed&quot;,&quot;value&quot;:&quot;react&quot;}"
    client-render-time="0.800000011920929"></astro-island>
</div>

What's the expected result?

The component should show like when doing astro preview

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-8mhcdp?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

Tasks

Beta Give feedback

No tasks being tracked yet.

[matthewp]

What happens if you exclude the client:only?

[davidvpe]

What happens if you exclude the client:only?

I get this error on the console

And also the component doesn't load correctly, it shows, but my guess is that some things fail internally because it shows a loading message

[matthewp]

This is unfortunately caused by Vite handling ESM differently on the server vs the client. On the client the component is on the default object. this version works: https://stackblitz.com/edit/github-8mhcdp-bc1xzd?file=src%2Fpages%2Findex.astro