React demo can't resolve dependencies

[Joshua Comeau]

Hi there!

Thanks so much for this awesome project :)

I'm running into some trouble trying to render React. I followed the instructions in the README, and it appears to successfully load the @pika/react module, but then try and fail to load react. Here's a screenshot of my network tab:

Walking through the "initiator" sequence, it looks like this:

• @pika/react-dom@latest redirects to @pika/react-dom@16.13.1
• @pika/react-dom@16.13.1 redirects to @pika/react@16.13.1/source.production.js
• source.production.js starts with this code:

import React from "https://unpkg.com/react@^16.0.0?module";

That line tries to pull the package from unpkg, and it fails, since there is no ESM module for it. When I visit in-browser:

Package react@16.14.0 does not contain an ES module

I'm guessing this is more of a Pika issue than a Playground issue, though yeah I'm curious if you've found a workaround? I had settled on using Preact, but I'm realizing a lot of the dependencies I want to use depend on React, and I don't know how to alias it in this situation, given the lack of a bundler.

Appreciate any ideas you have!

Reproduction instructions

• Go to https://blog.agney.dev/introducing-playground/
• Scroll down and copy the example React code
• Paste it into the demo at the top

[Agney Menon]

Hi @joshwcomeau

Love reading your blog 💙 Thanks for raising this issue.

May be something has changed has on unpkg end, Haven't looked into it. But meanwhile you can use the skypack CDN for it:

import React, { createElement } from 'https://cdn.skypack.dev/react';
import ReactDOM from 'https://cdn.skypack.dev/react-dom';

ReactDOM.render(
  createElement('div', {}, 'Hello World'),
  document.getElementById('app')
);

[Joshua Comeau]

Ah! This is awesome :) thanks so much!

Let me know if you want me to open a quick PR to update the docs!

[Agney Menon]

That would be great. Thank you