Skip to content

error when component uses context #1

Closed
@WickyNilliams

Description

i have some components using context, and when i try SSR in astro i get the following error logged in the CLI terminal:

ReferenceError: CustomEvent is not defined
    at dispatchEvent (file:///path/to/project/node_modules/atomico/src/element/set-prototype.js:112:20)
    at ref.<computed> (file:///path/to/project/node_modules/atomico/src/hooks/custom-hooks/use-event.js:11:13)
    at detectValueFromProvider (file:///path/to/project/node_modules/atomico/src/context.js:52:9)
    at file:///path/to/project/node_modules/atomico/src/hooks/hooks.js:19:23
    at setState (file:///path/to/project/node_modules/atomico/src/hooks/state.js:15:17)
    at new State (file:///path/to/project/node_modules/atomico/src/hooks/state.js:21:9)
    at file:///path/to/project/node_modules/atomico/src/hooks/hooks.js:17:21
    at useHook (file:///path/to/project/node_modules/atomico/src/hooks/create-hooks.js:41:18)
    at useState (file:///path/to/project/node_modules/atomico/src/hooks/hooks.js:15:12)
    at useConsumer (file:///path/to/project/node_modules/atomico/src/context.js:62:55)

which surfaces in the browser as an astro error:

{"message":"The value defined for prop 'offset' must be of type 'Number'","target":{"dataset":{},"_props":{"offset":0},"mounted":{},"unmounted":{},"updated":{}},"value":"0"}

where offset is a prop in my component that consumes the context.

my astro config looks like this:

import { defineConfig } from "astro/config";
import Atomico from "@atomico/astro";

// https://astro.build/config
export default defineConfig({
  integrations: [Atomico()],
});

and my astro page looks like:

---
import "./path/to/components.js"
---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>

  <body>
    <my-provider>
      <my-consumer></my-consumer>
    </my-provider>
  </body>
</html>

<script>
  import "./path/to/components.js"
</script>

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions