still issue with no build version #4840

roycw · 2025-07-11T15:27:40Z

roycw
Jul 11, 2025

Struggling here with the no build version

Here is my index,html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo App</title>
</head>
<body>
    <div id="app"></div>
    <script type="importmap">
	{
		"imports": {
			"preact": "https://esm.sh/[email protected]",
			"preact/": "https://esm.sh/[email protected]/",
			"@preact/signals": "https://esm.sh/@preact/[email protected]?external=preact",
			"htm/preact": "https://esm.sh/[email protected]/preact?external=preact",
            "preact-iso/router": "https://esm.sh/preact-iso/router"
		}
	}
</script>
    <script type="module" src="./main.js"></script>
</body>
</html>

here is my main.js

import { h, render } from "preact";
import { useState } from "preact/hooks";
import {html} from "htm/preact";
import { Router, Route, LocationProvider, } from "preact-iso/router";


const Home = () => {
    const [tasks, setTasks] = useState([]);
    const [task, setTask] = useState("");

    const addTask = () => {
        if (task) {
            setTasks([...tasks, { text: task, completed: false }]);
            setTask("");
        }
    };

    const toggleTask = (index) => {
        const newTasks = tasks.slice();
        newTasks[index].completed = !newTasks[index].completed;
        setTasks(newTasks);
    };

    const deleteTask = (index) => {
        setTasks(tasks.filter((_, i) => i !== index));
    };

    return html`
        <div>
            <h1>Todo App</h1>
            <input type="text" value=${task} onInput=${e => setTask(e.target.value)} placeholder="Add a new task" />
            <button onClick=${addTask}>Add</button>
            <ul>
                ${tasks.map((task, index) => html`
                    <li key=${index} style=${task.completed ? "text-decoration: line-through;" : ""}>
                        ${task.text}
                        <button onClick=${() => toggleTask(index)}>Toggle</button>
                        <button onClick=${() => deleteTask(index)}>Delete</button>
                    </li>
                `)}
            </ul>
            <Link href="/about">About</Link>
        </div>
    `;
};

const About = () => html`
    <div>
        <h1>About this App</h1>
        <p>This is a simple Todo application built with Preact.</p>
        <Link href="/">Home</Link>
    </div>
`;

const App = () => html`
    <${LocationProvider}>
        <${Router}>
            <${Route} path="/" component=${Home} />
            <${Route} path="/about" component=${About} />
        </${Router}>
    </${LocationProvider}>
`;

 render(html`<${App} />`, document.getElementById('app'));

What am i doing woring

Answered by rschristian

Jul 11, 2025

don't use /router in your imports from preact-iso. This is deprecated & unnecessary.
you must append ?external=preact to every URL for a package that depends on Preact -- you're missing this for preact-iso.

View full answer

rschristian · 2025-07-11T15:33:42Z

rschristian
Jul 11, 2025
Maintainer

don't use /router in your imports from preact-iso. This is deprecated & unnecessary.
you must append ?external=preact to every URL for a package that depends on Preact -- you're missing this for preact-iso.

0 replies

roycw · 2025-07-11T15:35:11Z

roycw
Jul 11, 2025
Author

You saved me! kudos for your amazing support.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

still issue with no build version #4840

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Select a reply

Uh oh!

Uh oh!

still issue with no build version #4840

Uh oh!

roycw Jul 11, 2025

Replies: 2 comments

Uh oh!

rschristian Jul 11, 2025 Maintainer

Uh oh!

Uh oh!

roycw Jul 11, 2025 Author

roycw
Jul 11, 2025

rschristian
Jul 11, 2025
Maintainer

roycw
Jul 11, 2025
Author