Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

umd build of preact/compat not working in standalone html file #2719

Closed
JohnDDuncanIII opened this issue Aug 26, 2020 · 4 comments
Closed

umd build of preact/compat not working in standalone html file #2719

JohnDDuncanIII opened this issue Aug 26, 2020 · 4 comments

Comments

@JohnDDuncanIII
Copy link

JohnDDuncanIII commented Aug 26, 2020 •
edited
Loading

I am working on a minimal index.html preact/preact-compat/htm example using Suspense and Lazy that should work in a standalone index.html file.

While it is easy to get this to work in an es6 module (see preactjs/preact-compat#544 (comment)), I cannot seem to get it to work in a standalone index.html file.

Reproduction / Steps to reproduce

<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<title>Example</title>
	
	<script src="https://unpkg.com/htm@latest/dist/htm.js"></script>
	<script src="https://npm.reversehttp.com/preact@latest/dist/preact.min.js"></script>
	<script src="https://npm.reversehttp.com/preact@latest/compat/dist/compat.umd.js"></script>
</html>

errors out with

compat.umd.js:1 Uncaught TypeError: Cannot set property 'preactCompat' of undefined

since e.preactCompat is undefined in

https://npm.reversehttp.com/preact@latest/compat/dist/compat.umd.js

Screen Shot 2020-08-26 at 1 50 44 AM

<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<title>Example</title>
	
	<script src="https://unpkg.com/htm@latest/dist/htm.js"></script>
	<script src="https://unpkg.com/preact@latest/dist/preact.min.js"></script>
	<script src="https://unpkg.com/preact@latest/compat/dist/compat.umd.js"></script>
</html>

errors out with

Uncaught TypeError: Cannot read property 'useState' of undefined

since useState is undefined in

https://unpkg.com/preact@latest/compat/src/index.js

Screen Shot 2020-08-26 at 1 53 09 AM

I also tried

<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<title>Example</title>

	<script src="https://unpkg.com/htm@latest/dist/htm.js"></script>
	<script src="https://npm.reversehttp.com/preact@latest/dist/preact.umd.js"></script>
	<script src="https://npm.reversehttp.com/preact@latest/compat/dist/compat.umd.js"></script>
</html>

as well as

<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<title>Example</title>
	
	<script src="https://unpkg.com/htm@latest/dist/htm.js"></script>
	<script src="https://npm.reversehttp.com/preact@latest/dist/preact.min.js"></script>
	<script src="https://npm.reversehttp.com/preact@latest/hooks/dist/hooks.umd.js"></script>
	<script src="https://npm.reversehttp.com/preact@latest/compat/dist/compat.umd.js"></script>
</html>

since I didn't see useHooks in the preact global var, but ran into similar errors for both.

While I understand that the optimal way to use preact/preact-compat/htm is inside of an es6 module, given that this is a lightweight react alternative, I was hoping that I could just import it as a umd global without needing to use a bundler nor define an es6 module.

Expected Behavior

react-compat should load successfully

Actual Behavior

react-compat fails to load successfully

Thanks for your time!

Similar issues:
preactjs/preact-compat#544
#2564
#2571
@JohnDDuncanIII
Copy link
Author

JohnDDuncanIII commented Aug 26, 2020 •
edited
Loading

I was actually able to get this to work with

<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<title>Example</title>
	
	<script src="https://unpkg.com/htm@latest/dist/htm.js"></script>
	<script src="https://unpkg.com/preact@latest/dist/preact.umd.js"></script>
	<script src="https://unpkg.com/preact@latest/hooks/dist/hooks.umd.js"></script>
	<script src="https://unpkg.com/preact@latest/compat/dist/compat.umd.js"></script>
</html>

Screen Shot 2020-08-26 at 2 51 23 AM

It seems as if hooks/dist/hooks.umd.js is a hard requirement to use compat/dist/compat.umd.js, which I did not realize.

Curiously,

<!DOCTYPE html>
<html lang="en">
	<meta charset="UTF-8">
	<title>Example</title>

	<script src="https://npm.reversehttp.com/htm@latest/dist/htm.js"></script>
	<script src="https://npm.reversehttp.com/preact@latest/dist/preact.umd.js"></script>
	<script src="https://npm.reversehttp.com/preact@latest/hooks/dist/hooks.umd.js"></script>
	<script src="https://npm.reversehttp.com/preact@latest/compat/dist/compat.umd.js"></script>
</html>

does not work.

Screen Shot 2020-08-26 at 2 50 59 AM

@developit
Copy link
Member

Hi @JohnDDuncanIII - npm.reversehttp.com should only really be used for ES Modules, I'm not sure that it will successfully serve UMD bundles since it tries to convert everything to ESM.

The two options are:

1. Use UMD from unpkg: (as you discovered)

<script src="https://unpkg.com/htm@latest/dist/htm.js"></script>
<script src="https://unpkg.com/preact@latest/dist/preact.umd.js"></script>
<script src="https://unpkg.com/preact@latest/hooks/dist/hooks.umd.js"></script>
<script src="https://unpkg.com/preact@latest/compat/dist/compat.umd.js"></script>
<script>
    const React = preactCompat,
        ReactDOM = preactCompat;
    const html = htm.bind(preact.h);
    function App () {
        const [c, add] = React.useReducer(x => x+1, 0);
        return html`<button onClick=${add}>${c}</button>`;
    }
    ReactDOM.render(html`<${App} />`, document.body);
</script>

2. Use ESM from npm.reversehttp.com:

This has the benefit of delivering all your dependencies in a single optimized bundle.

<script type="module">
    import { html, render, preactCompat as React } from 'https://npm.reversehttp.com/preact,preact/compat,htm/preact';
    function App () {
        const [c, add] = React.useReducer(x => x+1, 0);
        return html`<button onClick=${add}>${c}</button>`;
    }
    render(html`<${App} />`, document.body);
</script>

@developit
Copy link
Member

I'll close this issue out since it seems like everything's working.

@JohnDDuncanIII
Copy link
Author

Thanks for the response, @developit! Your examples were helpful.

All good on my end 👍

@grefl grefl mentioned this issue Nov 9, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@developit @JohnDDuncanIII