Pika CLI-compatible React version? about snowpack HOT 11 CLOSED

@FredKSchott Got it working with the following steps:

• npm install -P react@npm:@reactesm/react
• npm install -P react-dom@npm:@reactesm/react-dom
• Add react and react-dom to webDependencies if present

And it works!

from snowpack.

Thanks for all your work on this @sdegutis! Note with instructions is now in the Readme

from snowpack.

• If you're using Pika CDN: Just rely on https://www.npmjs.com/package/@pika/react &
  https://www.npmjs.com/package/@pika/react-dom, all react components on the CDN are also importing these so you'll all share one version.
• If you're using @pika/web: That's a bit trickier, React isn't written in ESM so you're asking to do something that it's not really ready for yet. But, you could theoretically use an alias to install our package in place of react in your node_modules tree: npm install react@npm:@pika/react

Try those and see how they work

from snowpack.

Thanks @FredKSchott!

The second option works, using the alias. There's only one issue to be worked around:

At the top of node_modules/react-dom/dist-es2019/react-dom.min.js, it says import React from "@pika/react"; which Pika (probably via Rollup) then inlines into the final web_modules/react-dom.js file as a full minified const React=(function(){/*super long minified React*/}());.

If I change that like to import React from "react"; right before running npm install (with your fancy prepare script hook enabled), then it does output import React from './react.js'; instead. So I've applied this change locally for the time being, but I don't know a less "unstable" long term solution to this plan. Otherwise this sounds like the right path moving forward until React gets ESM working (why is it that hard? I don't get it.)

Besides this, everything works great. React-Router-Dom installed great and works fine, so I assume in general everything else will. (Styled-Components didn't but only because their package.json's module key points to a non-browser version of their ESM code.)

from snowpack.

Oh interesting. Those packages were meant for our CDN specifically, where we actually do want the import to point to @pika/react, so we can't change that in the code.

Does it work to install @pika/react into both places, or someone link them together via a symlink? I don't know if there is a solution, just spitballing ideas.

from snowpack.

With your first suggestion of installing @pika/react into both node_modules/{react,@pika/react}, I can get web_modules/react-dom.js to point to import React from './@pika/react.js'; instead of inlining it.

However, this has the same problem that inlining it does: some modules pull in ./@pika/react.js and some pull in ./react.js, so that there still results in two versions of React being imported.

The concrete issue I have when I try this is that my sample code (which uses the useState hooks) breaks, throwing an exception that points to this page: https://reactjs.org/docs/error-decoder.html/?invariant=321

I'm guessing that this is caused by React having some imperative code that it runs only once when it loads, to initialize hooks or something, and therefore loading React from two sources at the same time.

Because of the nature of this issue, I'm not sure using symlinks will fix this either, because what we ultimately want to do is get react-dom to say import React from './react.js'; at the top after Pika is done turning it into a web_modules file.

I'm guessing the only way to do this is to have two separate versions of @pika/react{,-dom}, one intended for CDN and one intended for NPM & Pika/web.

from snowpack.

Yea, you might be right. At the end of the day React still isn't built as ESM, so we're fighting against the ecosystem here.

1. You may have some luck with preact & preact-compat
2. Feel free to grab my react/react-dom packages and publish them yourself, with the imports fixed.

from snowpack.

So if I were to do your second plan, and fork your two @pika/react{,-dom} repos, and only change the import line of react-dom to point to just 'react', and publish this to NPM, that should be enough of a change to get this working, right?

I'm thinking I might do that and put the links in this issue for posterity (or so you can link them however you want). Then, all people need to do to get a Pika-compatible React installed for local web_modules use would be:

$ npm install react@npm:@whatever/react
$ npm install react-dom@npm:@whatever/react-dom

from snowpack.

That makes sense to me! And then If enough people want this, we can take another look at adding this via official support (maybe ship both versions of the file inside of @pika/react-dom).

from snowpack.

Alternatively @FredKSchott, it looks like half the work is already done in the CDN versions of these libraries: they already have the correct React resolved, and they actually import that from https://cdn.pika.dev/_/react/v16 ... so what if Pika/web just "downloaded" these versions of any libraries we want to install, subtituting the CDN-based import for its local equivalent, e.g. "https://cdn.pika.dev/_/react/v16" -> "./react"?

from snowpack.

The CDN is actually a less efficient version of what @pika/web gets you. Since @pika/web knows exactly what dependencies you need, it can combine shared deps into common shared chunks. The CDN doesn't know what exactly you're loading, so it can't be that smart.

from snowpack.