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

Preact-compat + htm without bundler? #549

Closed kodeFant closed 2 years ago

kodeFant commented 2 years ago

Hi!

I wish to run preact-compat on the browser without a bundler with the help of htm.

Both React and Preact works fine with skypack packages, but I can't seem to get preact-compat working. Is this possible in some way without a bundler? Using specifically Skypack is not a hard requirement.

The reason I want this, is because I want to also use React-specific libraries that won't work with Preact.

I was not sure if htm or preact-compat is the correct repo to address, so forgive and correct me if this wasn't the right one to address :)

Here is a reproducible example. It just fails silently.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preact not working</title>
</head>

<body>
    <div id="app"></div>
    <script type="module">
        import { html } from "https://cdn.skypack.dev/htm/preact";
        import preactCompat from "https://cdn.skypack.dev/preact-compat";

        const React = preactCompat,
            ReactDOM = preactCompat;

        function App() {
            React.useEffect(() => {
                console.log("Hello hooks");
            }, []);

            return html`<div>Hello preact-compat</div>`;
        }

        const appElement = document.getElementById("app");

        ReactDOM.render(html`<${App} />`, appElement);
    </script>
</body>

</html>
kodeFant commented 2 years ago

Oh, god I feel dumb. It was as simple as replacing

import preactCompat from "https://cdn.skypack.dev/preact-compat";

with

import preactCompat from "https://cdn.skypack.dev/preact/compat"; 

As you stated in your readme.