Multiple Typescript Errors

[mark-todd]

Hi there,

My project uses typescript, so checks all files for errors - when it reaches this package it returns a few errors. Here is my stack trace for npx tsc --noEmit:

node_modules/mathjax-full/js/core/MmlTree/MmlFactory.d.ts:3:70 - error TS2344: Type 'MmlNodeClass' does not satisfy the constraint 'FactoryNodeClass<MmlNode>'.
  Types of parameters 'factory' and 'factory' are incompatible.
    Type 'Factory<MmlNode, FactoryNodeClass<MmlNode>>' is missing the following properties from type 'MmlFactory': MML, defaultKind, nodeMap, node

3 export declare class MmlFactory extends AbstractNodeFactory<MmlNode, MmlNodeClass> {
                                                                       ~~~~~~~~~~~~

node_modules/mathjax-full/js/core/Tree/WrapperFactory.d.ts:4:123 - error TS2344: Type 'C' does not satisfy the constraint 'FactoryNodeClass<W>'.
  Type 'WrapperClass<N, W>' is not assignable to type 'FactoryNodeClass<W>'.
    Types of parameters 'factory' and 'factory' are incompatible.
      Property 'wrap' is missing in type 'Factory<W, FactoryNodeClass<W>>' but required in type 'WrapperFactory<N, W, WrapperClass<N, W>>'.

4 export interface WrapperFactory<N extends Node, W extends Wrapper<N, W>, C extends WrapperClass<N, W>> extends Factory<W, C> {
                                                                                                                            ~

  node_modules/mathjax-full/js/core/Tree/WrapperFactory.d.ts:5:5
    5     wrap(node: N, ...args: any[]): W;
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    'wrap' is declared here.

node_modules/mathjax-full/js/core/Tree/WrapperFactory.d.ts:7:152 - error TS2344: Type 'C' does not satisfy the constraint 'FactoryNodeClass<W>'.
  Type 'WrapperClass<N, W>' is not assignable to type 'FactoryNodeClass<W>'.
    Types of parameters 'factory' and 'factory' are incompatible.
      Property 'wrap' is missing in type 'Factory<W, FactoryNodeClass<W>>' but required in type 'WrapperFactory<N, W, WrapperClass<N, W>>'.

7 export declare abstract class AbstractWrapperFactory<N extends Node, W extends Wrapper<N, W>, C extends WrapperClass<N, W>> extends AbstractFactory<W, C> implements WrapperFactory<N, W, C> {
                                                                                                                                                         ~

  node_modules/mathjax-full/js/core/Tree/WrapperFactory.d.ts:5:5
    5     wrap(node: N, ...args: any[]): W;
          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    'wrap' is declared here.

node_modules/mathjax-full/js/output/common/WrapperFactory.d.ts:6:364 - error TS2344: Type 'C' does not satisfy the constraint 'WrapperClass<MmlNode, W>'.
  Type 'CommonWrapperClass<J, W, C, CC, DD, FD>' is not assignable to type 'WrapperClass<MmlNode, W>'.
    Types of parameters 'factory' and 'factory' are incompatible.
      Type 'WrapperFactory<MmlNode, W, WrapperClass<MmlNode, W>>' is missing the following properties from type 'CommonWrapperFactory<J, W, C, CC, DD, FD>': jax, Wrappers, defaultKind, nodeMap, node

6 export declare class CommonWrapperFactory<J extends CommonOutputJax<any, any, any, W, CommonWrapperFactory<J, W, C, CC, DD, FD>, FD, any>, W extends CommonWrapper<J, W, C, CC, DD, FD>, C extends CommonWrapperClass<J, W, C, CC, DD, FD>, CC extends CharOptions, DD extends DelimiterData, FD extends FontData<CC, any, DD>> extends AbstractWrapperFactory<MmlNode, W, C> {
                                                                                                                                                                                                                                                                                                                                                                             ~


Found 4 errors in 3 files.

Errors  Files
     1  node_modules/mathjax-full/js/core/MmlTree/MmlFactory.d.ts:3
     2  node_modules/mathjax-full/js/core/Tree/WrapperFactory.d.ts:4
     1  node_modules/mathjax-full/js/output/common/WrapperFactory.d.ts:6

Cheers,
Mark

[dpvc]

It looks like you are compiling the .d.ts files in the js directory. Those should not be compiled (they are the results of the files in the ts directory being compiled). In fact, you should not have to compile the mathjax-full files at all, as they js directory already includes all the compiled versions. The only reason to recompile them is if you have changed the MathJax source code. Perhaps your tsconfig.json file needs to be modified to exclude the js directories (or the node_modules/mathjax-full directory, or the entire node_modules directory, depending on the packages you have installed).

[mark-todd]

So the thing is we've already excluded the node modules folder in tsconfig, here's the config:

{
  "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"]
}

The error also only occurs on import - it could be because typescript recursively checks all import dependencies I suppose (we're using a module called "better-react-mathjax" on top of mathjax-src, not importing it directly)

[mark-todd]

#22 - This issue is possibly related, we have strict enabled in our repo

[mark-todd]

I found from here that it can be resolved by adding "skipLibCheck" which prevents checking of d.ts files, but this is not really ideal, as this applies to all d.ts files. I would suggest the typescript errors could just be resolved - there's only 4 of them

https://stackoverflow.com/questions/45267500/exclude-node-modules-from-problems
https://www.typescriptlang.org/tsconfig/#skipLibCheck

[dpvc]

You are right that these are being generated due to the strict setting. While there are only 4 involved in the code you are loading in your project, turning on strict mode for MathJax as a whole produces over 1000. There are a number of code cleanup that we would like to do in the future, and support for strict more is one of them. Unfortunately, we may not get to that for a while.

The next release does include the inclusion of more complete generics in the core and output subdirectories, and it looks like that should improve the situation for you. We are hoping to have a beta version out at the beginning of September.

[skyhos]

I have similar problem with [email protected].

node_modules/mathjax-full/js/adaptors/browserAdaptor.d.ts:13:55 - error TS2344: Type 'HTMLElement' does not satisfy the constraint 'MinHTMLElement<HTMLElement, Text>'.
  Types of property 'nodeValue' are incompatible.
    Type 'string | null' is not assignable to type 'string'.
      Type 'null' is not assignable to type 'string'.

13 export declare function browserAdaptor(): HTMLAdaptor<HTMLElement, Text, Document>;
                                                         ~~~~~~~~~~~

node_modules/mathjax-full/js/input/tex/base/BaseItems.d.ts:32:5 - error TS2416: Property 'checkItem' in type 'SubsupItem' is not assignable to the same property in base type 'BaseItem'.
  Type '(item: StackItem) => CheckType | null' is not assignable to type '(item: StackItem) => CheckType'.
    Type 'CheckType | null' is not assignable to type 'CheckType'.
      Type 'null' is not assignable to type '[(MmlNode | StackItem)[], boolean]'.

32     checkItem(item: StackItem): CheckType | null;
       ~~~~~~~~~


Found 2 errors in 2 files.

Errors  Files
     1  node_modules/mathjax-full/js/adaptors/browserAdaptor.d.ts:13
     1  node_modules/mathjax-full/js/input/tex/base/BaseItems.d.ts:32

And my tsconfig.json is as following:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es5",
    "lib": ["es2015", "dom"],
    "declaration": true,
    "outDir": "lib",
    "sourceMap": true,
    "strictNullChecks": true,
    "resolveJsonModule": true
  },
  "files": ["src/index.ts"],
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src/**/*"
  ]
}

I've also tried to use [email protected], but I got more error messages related nullable type.
Hope this issue would be fixed in time.

As the issue #22 that @mark-todd mentioned, I got compile success by removing strictNullChecks option from tsconfig.json file, this could be a temporary workaround. FYI.

[dpvc]

@skyhos, you are right, compiling MathJax with strictNullChecks will throw errors. It is on our to-do list to be able to do that, but it is not high priority. I'm surprised you only get these two errors, as I suspect that there are many more places where this is an issue.

I'm not sure, however, why you are needing to compile MathJax with a different tsconfig.json file than the one it comes with. If you are modifying MathJax itself, then you should do so in a clone of the MathJax-src repository, and use its tsconfig.json and build workflow. If you are using MathJax as a library for your own project, then you should not need to compile it at all, as the npm mathjax-full package includes the compiled files that you can simply import into your own project directly.

Can you say more about why you need to do this?

If you are going to want to compile MathJax v4, then you will need additional values in your tsconfig.json file (e.g., you need ES2020 in the lib array, and will need to include the paths and excludes values from the tsconfig/cjs.json file).

[dpvc]

@skyhos, I see that the error is coming from compiling the .d.ts file, not the MathJax source .ts files themselves. In that case, you might need to use the skipLibCheck option, as @mark-todd suggested, and can ignore what I said above about npm packages.

[skyhos]

I'm not sure, however, why you are needing to compile MathJax with a different tsconfig.json file than the one it comes with. If you are modifying MathJax itself, then you should do so in a clone of the MathJax-src repository, and use its tsconfig.json and build workflow. If you are using MathJax as a library for your own project, then you should not need to compile it at all, as the npm mathjax-full package includes the compiled files that you can simply import into your own project directly.

Can you say more about why you need to do this?

@dpvc Hi, Davide, I was busy, excuse me for delayed reply.
I am currently making a web editor which would also be a module itself. The MathJax is used to convert latex source to svg. The following is the only part where the mathjax-full be used.

// math-tools/domain.ts
import { mathjax } from 'mathjax-full/js/mathjax';
import { TeX } from 'mathjax-full/js/input/tex';
import { SVG } from 'mathjax-full/js/output/svg';
import { AllPackages } from 'mathjax-full/js/input/tex/AllPackages';
import { browserAdaptor } from 'mathjax-full/js/adaptors/browserAdaptor';
import { RegisterHTMLHandler } from 'mathjax-full/js/handlers/html';

export const ATTR_DATA_TEX_SOURCE = 'data-tex-source';

const adaptor = browserAdaptor();
RegisterHTMLHandler(adaptor);

const mathjaxDocument = mathjax.document('', {
  InputJax: new TeX({ packages: AllPackages }),
  OutputJax: new SVG({ fontCache: 'local' }),
});

export const getSvgOuterHTML = (latexSource: string, isInline: boolean = false): string => {
  const node = mathjaxDocument.convert(latexSource, {
    display: !isInline,
    em: 16,
    ex: 8,
    containerWidth: 1280,
  });
  return adaptor.innerHTML(node);
};

Since the documentation of MathJax is too hard to read, I referred to an example by searching in Google: mathjax/MathJax#2385 (comment)

If I am going wrong, can you please improve the above code by using the the compiled files included in mathjax-full that you mentioned?

I see that the error is coming from compiling the .d.ts file, not the MathJax source .ts files themselves. In that case, you might need to use the skipLibCheck option, as @mark-todd suggested, and can ignore what I said above about npm packages

I will try the option, thank you.