Multiple errors with module

[mark-todd]

Hi there,

First of all I'm very pleased this module exists - I was looking for something that could do this. Unfortunately, I get multiple errors when I try to run your demo (I've added the script section to my template). My type checker also raises there when I inspect the index.tsx file. A couple of errors I solved by just adding import React from "react" - is it just that the module is out of date, or am I doing something wrong?

All the best, Mark

ERROR in node_modules/desmos-react/index.tsx
3:55-59
[tsl] ERROR in node_modules/desmos-react/index.tsx(3,56)
      TS2345: Argument of type 'null' is not assignable to parameter of type 'Calculator'.

ERROR in node_modules/desmos-react/index.tsx
40:49-60
[tsl] ERROR in node_modules/desmos-react/index.tsx(40,50)
      TS2345: Argument of type 'HTMLDivElement | undefined' is not assignable to parameter of type 'HTMLElement'.
  Type 'undefined' is not assignable to type 'HTMLElement'.

ERROR in node_modules/desmos-react/index.tsx
58:5-27
[tsl] ERROR in node_modules/desmos-react/index.tsx(58,6)
      TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

ERROR in node_modules/desmos-react/index.tsx
58:28-33
[tsl] ERROR in node_modules/desmos-react/index.tsx(58,29)
      TS2322: Type 'Calculator | undefined' is not assignable to type 'Calculator'.
  Type 'undefined' is not assignable to type 'Calculator'.

ERROR in node_modules/desmos-react/index.tsx
59:7-10
[tsl] ERROR in node_modules/desmos-react/index.tsx(59,8)
      TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

ERROR in node_modules/desmos-react/index.tsx
59:11-14
[tsl] ERROR in node_modules/desmos-react/index.tsx(59,12)
      TS2322: Type 'MutableRefObject<HTMLDivElement | undefined>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.

ERROR in node_modules/desmos-react/index.tsx
75:8-16
[tsl] ERROR in node_modules/desmos-react/index.tsx(75,9)
      TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'ExpressionState'.
  No index signature with a parameter of type 'string' was found on type 'ExpressionState'.

ERROR in node_modules/desmos-react/index.tsx
75:21-35
[tsl] ERROR in node_modules/desmos-react/index.tsx(75,22)
      TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'ExpressionState'.
  No index signature with a parameter of type 'string' was found on type 'ExpressionState'.

ERROR in node_modules/desmos-react/index.tsx
76:6-15
[tsl] ERROR in node_modules/desmos-react/index.tsx(76,7)
      TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ type?: "expression" | undefined; latex?: string | undefined; color?: string | undefined; lineStyle?: "POINT" | "OPEN" | "CROSS" | "SOLID" | "DASHED" | "DOTTED" | undefined; lineWidth?: string | ... 1 more ... | undefined; ... 18 more ...; labelOrientation?: "ABOVE" | ... 4 more ... | undefined; }'.
  No index signature with a parameter of type 'string' was found on type '{ type?: "expression" | undefined; latex?: string | undefined; color?: string | undefined; lineStyle?: "POINT" | "OPEN" | "CROSS" | "SOLID" | "DASHED" | "DOTTED" | undefined; lineWidth?: string | ... 1 more ... | undefined; ... 18 more ...; labelOrientation?: "ABOVE" | ... 4 more ... | undefined; }'.

ERROR in node_modules/desmos-react/index.tsx
76:18-26
[tsl] ERROR in node_modules/desmos-react/index.tsx(76,19)
      TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'ExpressionState'.
  No index signature with a parameter of type 'string' was found on type 'ExpressionState'.

ERROR in node_modules/desmos-react/index.tsx
86:37-39
[tsl] ERROR in node_modules/desmos-react/index.tsx(86,38)
      TS2322: Type 'string | undefined' is not assignable to type 'string'.
  Type 'undefined' is not assignable to type 'string'.

ERROR in node_modules/desmos-react/index.tsx
121:37-48
[tsl] ERROR in node_modules/desmos-react/index.tsx(121,38)
      TS2345: Argument of type 'HTMLDivElement | undefined' is not assignable to parameter of type 'HTMLElement'.
  Type 'undefined' is not assignable to type 'HTMLElement'.

ERROR in node_modules/desmos-react/index.tsx
141:7-10
[tsl] ERROR in node_modules/desmos-react/index.tsx(141,8)
      TS2686: 'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

ERROR in node_modules/desmos-react/index.tsx
141:11-14
[tsl] ERROR in node_modules/desmos-react/index.tsx(141,12)
      TS2322: Type 'MutableRefObject<HTMLDivElement | undefined>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.
  Type 'MutableRefObject<HTMLDivElement | undefined>' is not assignable to type 'RefObject<HTMLDivElement>'.
    Types of property 'current' are incompatible.
      Type 'HTMLDivElement | undefined' is not assignable to type 'HTMLDivElement | null'.
        Type 'undefined' is not assignable to type 'HTMLDivElement | null'.

ERROR in node_modules/desmos-react/index.tsx
163:4-18
[tsl] ERROR in node_modules/desmos-react/index.tsx(163,5)
      TS2532: Object is possibly 'undefined'.

ERROR in node_modules/desmos-react/index.tsx
163:58-72
[tsl] ERROR in node_modules/desmos-react/index.tsx(163,59)
      TS2532: Object is possibly 'undefined'.

16 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.73.0 compiled with 16 errors in 7745 ms

[mark-todd]

I've been doing a bit more digging - I found if in the tsconfig I use: "jsx": "react-jsx" instead of: "jsx": "react" Some of the errors disappear. Is it possible that this is occurring because I've defined a tsconfig at the app level that differs from yours in some way?

Here is my original tsconfig:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "jsx": "react",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["es5", "es6", "DOM.Iterable", "dom", "esnext"],
    "strict": true,
    "sourceMap": true,
    "target": "esnext"
  },
  "include": ["./src/js", "index.tsx"],
  "exclude": ["node_modules"]
}

[ysulyma]

Hi! First, you are correct about the React error, you can fix that either by adding

import React from "react";
// or this depending on your tsconfig.json
// import * as React from "react";

or by setting "jsx": "react-jsx" in tsconfig.json. For more explanation see JSX Transform - React blog, React JSX Factories - TypeScript blog.

I will fix the other errors!

[ysulyma]

also, these are just TypeScript errors, the demo should still work when run

[mark-todd]

also, these are just TypeScript errors, the demo should still work when run

Ok thanks - I think our setup might be such that if there are any typescript errors the app won't work

[ysulyma]

Just published desmos-react@1.1.1, see if it works now

[mark-todd]

Perfect - all fixed!