[BUG] Type 'Promise<typeof import("...highlight.js/es/languages/sql")>' is not assignable to type 'Promise<{ default: LanguageFn; }>'. #4365
Description
Describe the issue/behavior that seems buggy
We wrote a custom loader for importing the different highlighting languages.
When running the project, we get several issues of the type:
ERROR in /workspace/frontend/project/js/lit-elements/utils/highlight-loader.ts
./frontend/project/js/lit-elements/utils/highlight-loader.ts 15:12-55
[tsl] ERROR in /workspace/frontend/project/js/lit-elements/utils/highlight-loader.ts(15,13)
TS2322: Type 'Promise<typeof import("/workspace/node_modules/highlight.js/es/languages/python")>' is not assignable to type 'Promise<{ default: LanguageFn; }>'.
Type 'typeof import("/workspace/node_modules/highlight.js/es/languages/python")' is not assignable to type '{ default: LanguageFn; }'.
The types returned by 'default(...)' are incompatible between these types.
Type '{ name: string; aliases: string[]; unicodeRegex: boolean; keywords: { $pattern: RegExp; keyword: string[]; built_in: string[]; literal: string[]; type: string[]; }; illegal: RegExp; contains: any[]; }' is not assignable to type 'Language'.
Type '{ name: string; aliases: string[]; unicodeRegex: boolean; keywords: { $pattern: RegExp; keyword: string[]; built_in: string[]; literal: string[]; type: string[]; }; illegal: RegExp; contains: any[]; }' is not assignable to type 'Partial<Mode>'.
Types of property 'keywords' are incompatible.
Type '{ $pattern: RegExp; keyword: string[]; built_in: string[]; literal: string[]; type: string[]; }' is not assignable to type 'string | string[] | Record<string, string | string[]> | undefined'.
Type '{ $pattern: RegExp; keyword: string[]; built_in: string[]; literal: string[]; type: string[]; }' is not assignable to type 'Record<string, string | string[]>'.
Property '$pattern' is incompatible with index signature.
Type 'RegExp' is not assignable to type 'string | string[]'.
@ ./frontend/project/js/lit-elements/components/code-block/index.ts 13:0-85 45:30-44 46:41-61
@ ./frontend/project/js/lit-elements/apps/code-block-app.ts 1:0-34
@ ./frontend/project/js/app.ts 17:36-80
ERROR in /workspace/frontend/project/js/lit-elements/utils/highlight-loader.ts
./frontend/project/js/lit-elements/utils/highlight-loader.ts 17:13-53
[tsl] ERROR in /workspace/frontend/project/js/lit-elements/utils/highlight-loader.ts(17,14)
TS2322: Type 'Promise<typeof import("/workspace/node_modules/highlight.js/es/languages/sql")>' is not assignable to type 'Promise<{ default: LanguageFn; }>'.
Type 'typeof import("/workspace/node_modules/highlight.js/es/languages/sql")' is not assignable to type '{ default: LanguageFn; }'.
The types returned by 'default(...)' are incompatible between these types.
Type '{ name: string; case_insensitive: boolean; illegal: RegExp; keywords: { $pattern: RegExp; keyword: any; literal: string[]; type: string[]; built_in: string[]; }; contains: any[]; }' is not assignable to type 'Language'.
Type '{ name: string; case_insensitive: boolean; illegal: RegExp; keywords: { $pattern: RegExp; keyword: any; literal: string[]; type: string[]; built_in: string[]; }; contains: any[]; }' is not assignable to type 'Partial<Mode>'.
Types of property 'keywords' are incompatible.
Type '{ $pattern: RegExp; keyword: any; literal: string[]; type: string[]; built_in: string[]; }' is not assignable to type 'string | string[] | Record<string, string | string[]> | undefined'.
Type '{ $pattern: RegExp; keyword: any; literal: string[]; type: string[]; built_in: string[]; }' is not assignable to type 'Record<string, string | string[]>'.
Property '$pattern' is incompatible with index signature.
Type 'RegExp' is not assignable to type 'string | string[]'.
@ ./frontend/project/js/lit-elements/components/code-block/index.ts 13:0-85 45:30-44 46:41-61
@ ./frontend/project/js/lit-elements/apps/code-block-app.ts 1:0-34
@ ./frontend/project/js/app.ts 17:36-80
ERROR in /workspace/frontend/project/js/lit-elements/utils/highlight-loader.ts
./frontend/project/js/lit-elements/utils/highlight-loader.ts 18:14-60
[tsl] ERROR in /workspace/frontend/project/js/lit-elements/utils/highlight-loader.ts(18,15)
TS2322: Type 'Promise<typeof import("/workspace/node_modules/highlight.js/es/languages/plaintext")>' is not assignable to type 'Promise<{ default: LanguageFn; }>'.
Type 'typeof import("/workspace/node_modules/highlight.js/es/languages/plaintext")' is not assignable to type '{ default: LanguageFn; }'.
The types returned by 'default(...)' are incompatible between these types.
Type '{ name: string; aliases: string[]; disableAutodetect: boolean; }' is not assignable to type 'Language'.
Property 'contains' is missing in type '{ name: string; aliases: string[]; disableAutodetect: boolean; }' but required in type 'LanguageDetail'.
@ ./frontend/project/js/lit-elements/components/code-block/index.ts 13:0-85 45:30-44 46:41-61
@ ./frontend/project/js/lit-elements/apps/code-block-app.ts 1:0-34
@ ./frontend/project/js/app.ts 17:36-80
3 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.
webpack 5.88.1 compiled with 3 errors in 71090 ms
ERROR: "build:keyword" exited with 1.Sample Code or Instructions to Reproduce
This is the function:
import type { HLJSApi, LanguageFn } from 'highlight.js';
let hljsInstance!: HLJSApi;
export const languageImports: Record<
string,
() => Promise<{ default: LanguageFn }>
> = {
cpp: () => import('highlight.js/lib/languages/cpp'),
go: () => import('highlight.js/lib/languages/go'),
java: () => import('highlight.js/lib/languages/java'),
js: () => import('highlight.js/lib/languages/javascript'),
json: () => import('highlight.js/lib/languages/json'),
md: () => import('highlight.js/lib/languages/markdown'),
py: () => import('highlight.js/lib/languages/python'),
shell: () => import('highlight.js/lib/languages/shell'),
sql: () => import('highlight.js/lib/languages/sql'),
text: () => import('highlight.js/lib/languages/plaintext'),
ts: () => import('highlight.js/lib/languages/typescript'),
xml: () => import('highlight.js/lib/languages/xml'),
yaml: () => import('highlight.js/lib/languages/yaml'),
};Expected behavior
It should not report any error on building, or linting.
Additional context
Solved with workaround highlight-js-shims.d.ts:
/* eslint-disable no-duplicate-imports */
declare module 'highlight.js/lib/languages/python' {
import { LanguageFn } from 'highlight.js';
const language: LanguageFn;
export default language;
}
declare module 'highlight.js/lib/languages/sql' {
import { LanguageFn } from 'highlight.js';
const language: LanguageFn;
export default language;
}
declare module 'highlight.js/lib/languages/plaintext' {
import { LanguageFn } from 'highlight.js';
const language: LanguageFn;
export default language;
}