Typescript Errors importing Mathlive

[anisabboud]

Description

Hi Arno,
Thank you for building Mathlive - it looks awesome!

I'm trying to integrate it into an Angular project (Typescript) following the guide ("Using NPM" section):

However, simply importing mathlive as mentioned above results in 5 compilation errors:

Error: node_modules/mathlive/dist/public/commands.d.ts:5:38 - error TS2307: Cannot find module '../editor/virtual-keyboard-utils' or its corresponding type declarations.

5 import { VirtualKeyboardTheme } from '../editor/virtual-keyboard-utils';
                                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/mathlive/dist/public/mathfield.d.ts:5:48 - error TS2307: Cannot find module '../editor/virtual-keyboard-utils.js' or its corresponding type declarations.

5 import { CombinedVirtualKeyboardOptions } from '../editor/virtual-keyboard-utils.js';
                                                 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/mathlive/dist/public/mathlive.d.ts:21:35 - error TS7016: Could not find a declaration file for module '../mathlive'. '.../node_modules/mathlive/dist/mathlive.js' implicitly has an 'any' type.

21 import { AutoRenderOptions } from '../mathlive';
                                     ~~~~~~~~~~~~~


Error: node_modules/mathlive/dist/public/mathlive.d.ts:29:15 - error TS7016: Could not find a declaration file for module '../mathlive'. '.../node_modules/mathlive/dist/mathlive.js' implicitly has an 'any' type.

29 export * from '../mathlive';
                 ~~~~~~~~~~~~~


Error: node_modules/mathlive/dist/public/options.d.ts:6:53 - error TS2307: Cannot find module '@cortex-js/compute-engine/dist/math-json.min.esm.js' or its corresponding type declarations.

6 import type { ErrorCode as MathJsonErrorCode } from '@cortex-js/compute-engine/dist/math-json.min.esm.js';
                                                      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Further insights

• To address the last error, I tried npm i @cortex-js/compute-engine since MathJsonErrorCode is imported from there (see options.ts), but that just changes the last error from Cannot find module '@cortex-js/compute-engine/... to Could not find a declaration file for module '@cortex-js/compute-engine/...:

  Error: node_modules/mathlive/dist/public/options.d.ts:6:53 - error TS7016: Could not find a declaration file for module '@cortex-js/compute-engine/dist/math-json.min.esm.js'. '.../node_modules/@cortex-js/compute-engine/dist/math-json.min.esm.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/cortex-js__compute-engine` if it exists or add a new declaration (.d.ts) file containing `declare module '@cortex-js/compute-engine/dist/math-json.min.esm.js';`
  
  6 import type { ErrorCode as MathJsonErrorCode } from '@cortex-js/compute-engine/dist/math-json.min.esm.js';

• I've found that setting "strict": false instead of true in tsconfig.json reduces the number of errors from 5 to 2-3.
  (Hides the two Could not find a declaration file for module '../mathlive'. errors, and hides the @cortex-js/compute-engine error if @cortex-js/compute-engine is installed.)

• As a temporary workaround, I've found that setting "skipLibCheck": true in tsconfig.json "hides" all 5 errors.

Environment: Angular 13 (latest) + Quill.js + Mathlive 0.73.4 (latest).

Will update over the next few days if I have more findings. In the meantime, if you have any insights please let me know. Thanks!

[anisabboud]

Thank you for the quick response, Arno! Amazing.

The updated version 0.76.6 solves 4 of the 5 errors I mentioned, except this one:

Error: node_modules/mathlive/dist/public/mathlive.d.ts:21:35 - error TS7016: Could not find a declaration file for module '../mathlive'. '.../node_modules/mathlive/dist/mathlive.js' implicitly has an 'any' type.

21 import { AutoRenderOptions } from '../mathlive';

Suggested solution

Perhaps line 21 in src/public/mathlive.ts should import from './options' instead of '../mathlive':

Or even better, removing that line and adding AutoRenderOptions to line 29:

import { AutoRenderOptions, RemoteVirtualKeyboardOptions, TextToSpeechOptions } from './options';