Uncaught TypeError: Cannot convert a Symbol value to a string #76
Description
Scope
for
Environment
macos
What is happening?
I have run into two issues where I get a “Uncaught TypeError: Cannot convert a Symbol value to a string” error in the console on Chrome 142.0.7444.162 (arm64), Safari 18.6 (20621.3.11.11.3), and Firefox 144.0.2 (aarch64), all running on macOS 15.6.1.
Issue 1 is using <tag *for="let x of xs">. If instead we use <tag *for="xs"> or <tag *for="let x in xs"> then it does work (i.e. no error in console), but these loop constructs do not allow access to the element as x in the loop body, instead we need to use $value for the former and xs[x] for the later.
Issue 2 is calling a fmt function on a Date object that has been wrapped/proxy’ied by the Mizu library. It works if in the fmt function we create a new (non-Proxy) date using e.g. new Date(date.getTime()).
Note that in both cases the template is actually rendered correctly and the warning appears after Mizu.render() has returned. Possibly some of the reactive stuff working in the background?
On that note, is it possible to completely disable all reactiveness and avoid context variables to be wrapped in Proxy objects?
Minimal reproduction example
<!DOCTYPE html>
<html>
<head>
<title>ESM</title>
<meta charset="UTF-8" />
</head>
<body>
<main *mizu>
<p *mustache>Today is {{ fmt(now) }}</p>
<ul>
<li *for="let item of items" *text="item"></li>
</ul>
</main>
<!-- Use the ESM version to manually control mizu -->
<script type="module">
import Mizu from "https://mizu.sh/client.mjs"
await Mizu.render(document.body, {
context: {
items: [ "foo", "bar", "baz" ],
now: new Date(),
fmt: (date) => {
const options = { day: 'numeric', month: 'short', year: 'numeric' }
return new Intl.DateTimeFormat("en-GB", options).format(date)
}
}
})
</script>
</body>
</html>I have searched for existing issues
Yes