Broken output when using Deno+Vite+CDN import

[chaosharmonic]

I'm running into snags attempting to render Markdown in a React app using Vite and Deno. In brief, I'm getting an error about objects not being valid React children.

This is happening across a couple different places in my codebase, but here's the simplest representation:

import Markdown from 'https://esm.sh/[email protected]'

const About = () => {
    const content = '## Hey! Listen!'

    console.log({content, type: typeof(content)})
    // logs string

    return (
        <section>
            <Markdown>
                {content}
                /* seen as object */
            </Markdown>
        </section>
    )
}

export default About

Relevant error logging:

react-dom.development.js:18704 The above error occurred in the <L> component:

at L (https://esm.sh/[email protected]/es2022/react-markdown.mjs:2:1840)
at section
at About
at RenderedRoute (http://localhost:5173/.vite/deps/react-router-dom.js?v=50a31158:4026:5)
at Routes (http://localhost:5173/.vite/deps/react-router-dom.js?v=50a31158:4465:5)
at main
at Skeleton
at RenderedRoute (http://localhost:5173/.vite/deps/react-router-dom.js?v=50a31158:4026:5)
at RenderErrorBoundary (http://localhost:5173/.vite/deps/react-router-dom.js?v=50a31158:3986:5)
at DataRoutes (http://localhost:5173/.vite/deps/react-router-dom.js?v=50a31158:5145:5)
at Router (http://localhost:5173/.vite/deps/react-router-dom.js?v=50a31158:4408:15)
at RouterProvider (http://localhost:5173/.vite/deps/react-router-dom.js?v=50a31158:4960:5)
at App

Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props}). If you meant to render a collection of children, use an array instead.

at throwOnInvalidObjectType (http://localhost:5173/.vite/deps/chunk-KWA4SU3M.js?v=50a31158:9932:17)
at reconcileChildFibers2 (http://localhost:5173/.vite/deps/chunk-KWA4SU3M.js?v=50a31158:10562:15)
at reconcileChildren (http://localhost:5173/.vite/deps/chunk-KWA4SU3M.js?v=50a31158:14288:37)
at mountIndeterminateComponent (http://localhost:5173/.vite/deps/chunk-KWA4SU3M.js?v=50a31158:14984:13)
at beginWork (http://localhost:5173/.vite/deps/chunk-KWA4SU3M.js?v=50a31158:15912:22)
at beginWork$1 (http://localhost:5173/.vite/deps/chunk-KWA4SU3M.js?v=50a31158:19751:22)
at performUnitOfWork (http://localhost:5173/.vite/deps/chunk-KWA4SU3M.js?v=50a31158:19196:20)
at workLoopSync (http://localhost:5173/.vite/deps/chunk-KWA4SU3M.js?v=50a31158:19135:13)
at renderRootSync (http://localhost:5173/.vite/deps/chunk-KWA4SU3M.js?v=50a31158:19114:15)
at recoverFromConcurrentError (http://localhost:5173/.vite/deps/chunk-KWA4SU3M.js?v=50a31158:18734:28)

Some additional details:

• This is specific to the CDN imports. The same problem persists when I use JSDelivr instead of esm.sh
• I can also reproduce the error on scaffolding a new Vite template for Deno, so I assume this doesn't have much to do with Vite's version or plugins.
• It also persists with different react-markdown versions. For a while I was getting working output just using 8.x instead of 9.x, but that doesn't seem to be the root issue, since it's suddenly started breaking on me again.
• If I use npm:react-markdown, the result will vary. Running my existing setup, I get a different error under this setup, about Vite externalizing modules. If I run a similar setup under Node, it works without issue... but I'm not trying to migrate everything to a different JS runtime for this.

Is there something obvious I might be missing here, or is it possible I just ran across a bug?

[remcohaszing]

Basically the error reads as: Expected a React element, but got a React element instead.

You’re likely pulling in multiple versions of React somehow.

[wooorm]

So?

Use one or the other. esmsh or npm

[chaosharmonic]

It looks like pulling it into an import map with everything else in deno.json and using a specifier (on Vite 6) resolved this though. It also appears to work with both packages

[remcohaszing]

You don’t need an import map. I strongly suggest you try to understand the problem and the tools you’re using and make informed decisions. Otherwise you’ll keep running into issues like this. The problem itself has nothing to do with React or react-markdown.

[chaosharmonic]

Right, what I'm saying is it could have been something to do with the nonstandard Vite config, and/or possibly that the bundler was encountering an issue with handling a direct https import vs a named package.

Of note here, the Deno plugin for Vite does specifically add support for handling those things -- package name resolution using deno.json in place of package.json, as well as resolving https imports -- and appears from a look at the release history to be new as of Deno v2. (I'm not sure why it's not getting them at the file level, but that's maybe a separate question.)

To be honest, I'm not entirely sure when it broke, because I've been tied up in a separate (part of the same) project for a few weeks, and it's entirely possible that I just didn't notice this on upgrading to Deno 2. (One of the handful of things I didn't try was checking it against an old version.)

[wooorm]

Chaos, you're talking to maintainers of a specific markdown project about your generic debugging experience. It's not something broken here, or related to us. Talking to vite or deno people is better