preactjs / preact-compat

ATTENTION: The React compatibility layer for Preact has moved to the main preact repo.
http://npm.im/preact-compat
MIT License
950 stars 148 forks source link

README "without webpack" suggested usage doesn't work #544

Closed ihenckel closed 4 years ago

ihenckel commented 4 years ago

These instructions recommend:

<script src="//unpkg.com/preact"></script>
<script src="//unpkg.com/prop-types/prop-types.min.js"></script>
<script src="//unpkg.com/preact-compat"></script>
<script>
    var React = preactCompat,
        ReactDOM = preactCompat;
    ReactDOM.render(<h1>Hello!</h1>, document.body);
</script>

However, this yields

Uncaught TypeError: Cannot read property 'prototype' of undefined
    at index.js:56
    at preact-compat.js:4
    at preact-compat.js:5
(anonymous) @ index.js:56
(anonymous) @ preact-compat.js:4
(anonymous) @ preact-compat.js:5

Uncaught ReferenceError: preactCompat is not defined

See https://jsfiddle.net/jLf2mdpe/1/

marvinhagemeister commented 4 years ago

Mixing Preact 10 with preact-compat which was written for Preact 8.x won't work as suggested by the opening paragraph in the README:

:rotating_light: Note: This module is for Preact 8.x and prior - Preact X includes compat by default. For Preact X, please uninstall preact-compat and replace your aliases with preact/compat.

In either case unpkg doesn't follow the resolution standard correctly (see: https://github.com/preactjs/preact/issues/2564 ) so you'll be better of with more modern CDNs that do. https://pika.dev or https://npm.reversehttp.com are both an excellent choice.

Example with the latter:

<script type="module">
  import * as React from "https://npm.reversehttp.com/preact@10.4/compat";

  const app = React.createElement("div", null, "Hello World!");

  React.render(app, document.getElementById("app"));
</script>