Not able to install a "Preact-Compat" Alisas in Config file (leads to bugs)

[albertocevallos]

Hi all,

In the Preact docs, once you have your dependencies installed, you can configure your build system to redirect any imports/requires looking for react or react-dom with preact-compat.

Link: https://preactjs.com/guide/v8/switching-to-preact/#how-to-alias-preact-compat

However, the docs (link above) doesn't have instructions for doing this with roll up.

As a result, you will encounter issues working with libraries that use React. I'm having issues importing Material UI for example and getting this error:

Uncaught SyntaxError: The requested module '/@modules/react-is/index.js' does not provide an export named 'Memo'

Please let me know if there's a known fix or if there are any work arounds!

[rschristian]

The WMR template comes with the alias, though that's a good point that's it's not in the docs. Would be a good addition.

The page you linked to is actually Preact 8's docs, which are not quite up-to-date with build tooling. v10 does in fact have instructions for Rollup: https://preactjs.com/guide/v10/getting-started#aliasing-in-rollup. WMR isn't your standard Rollup though, so I'm not sure that this is applicable here.

[developit]

Yep this should just work out of the box. Not sure why the v8 docs come up still on google search.

Maybe we could warn folks who try to alias preact-compat with X?

[developit]

(FWIW I don't know if MUI's usage of react-is works with WMR + Preact/compat right now - they rely on some gnarly CommonJS compatibility behaviour that is difficult for us to emulate - see #109)

[rschristian]

Didn't even notice it was preact-compat on top of that. Whoops.

I think a warning could definitely be useful. I didn't notice the package name myself; the hyphen is easy to miss even when you know which is the package you should be using. Add in some funky IDE autocomplete and it's really easy to use the wrong one.

v8 docs are linked in a lot of places/threads which I'm sure is keeping them alive.

[albertocevallos]

Thanks so much for the quick reply!

The v8 docs are definitely the first to come up on Google, my bad there.

Totally agree @rschristian the alias in the template should work out of the box, so no need for the v10 Rollup instructions.

I reckon it'd be good to add that in the docs or the WMR md (maybe in the config section?).

@developit I think that's it, MUI's usage of react-is doesn't support Preact/compat specifically.

Would switching to cjs-module-lexer fix this in the future?

[albertocevallos]

@developit forgot to ask, but do you know if there are any known React-based UI frameworks that are compatible with WMR?

[developit]

I've been using RMWC. Here's a demo:
https://glitch.com/edit/#!/preact-rmwc?path=public%2Fapp.js%3A1%3A0

(Note the resolutions field in the package.json - rmwc doesn't work with the material components lib version 6+, have to lock it to 5)

FWIW I would like to get MUI working in WMR, it just didn't happen in time for launch.

[albertocevallos]

Thanks @developit for the alpha. Confirmed, RMWC v5.7.2 runs perfectly on WMR!

Hats off to you and the team, I'm sure MUI support will come soon ).

[developit]

Ionic also works super well too, and is ridiculously fast to develop against because the components don't need to be imported (just import the single bundle).

[albertocevallos]

Just trying it now, pretty easy and fast to prototype....had issues developing offline (while in airplane), seems to be a 500 error with the /@npm/htm package.

Does WMR come with an offline service worker?