Giter Club home page Giter Club logo

Comments (2)

nvie avatar nvie commented on June 8, 2024

Hi @max-programming. Thanks for reaching out. We wrote up a troubleshooting guide about this a while ago, which explains why this error happens, what it means, and what you can do about it. Hope this helps!

I cannot get this error to show up when I try out our examples myself, so I'm not sure why this error is showing up for you. If you expand the error message further, TypeScript should show you the drill-down into the underlying reason why it thinks Layer isn't a valid JSON value. Maybe that will give some more insight?

If you have further questions, please let us know!

from liveblocks.

max-programming avatar max-programming commented on June 8, 2024

@nvie I think I now know why this happens to me. There is a difference in our types

Types in the example

export type RectangleLayer = {
  type: LayerType.Rectangle;
  x: number;
  y: number;
  height: number;
  width: number;
  fill: Color;
};

export type EllipseLayer = {
  type: LayerType.Ellipse;
  x: number;
  y: number;
  height: number;
  width: number;
  fill: Color;
};

export type PathLayer = {
  type: LayerType.Path;
  x: number;
  y: number;
  // Could be computed based on points
  height: number;
  // Could be computed based on points
  width: number;
  fill: Color;
  points: number[][];
};

export type Layer = RectangleLayer | EllipseLayer | PathLayer;

My types:

interface BaseLayer<L extends LayerType> {
  type: L;
  x: number;
  y: number;
  height: number;
  width: number;
  fill: Color;
}

export type RectangleLayer = BaseLayer<LayerType.Rectangle>

export type EllipseLayer = BaseLayer<LayerType.Ellipse>

export type PathLayer = BaseLayer<LayerType.Path> & {
  points: number[][];
};

export type Layer = RectangleLayer | EllipseLayer | PathLayer;

To be honest, it should not cause an issue because all I did was refactor the type into a reusable one BaseLayer<>
But this is the exact reason I get the error

Also no typescript does not give a deep reason to why Layer isn't JSON

from liveblocks.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.