command/CommandHandler.ts import bug

[huang-long]

Describe the Bug

TypeScript compiler reports an error if I compile bpmn-js with verbatimModuleSyntax:

[PRJ]/diagram-js/lib/features/outline/OutlineProvider.spec.ts:
    6:10  error   'Element' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled. ​typescript(1484)
    8:8   error   'OutlineProvider' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled. ​typescript(1484)
    8:27  error   'Outline' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled. ​typescript(1484)

Steps to Reproduce

• Configure verbatimModuleSyntax in tsconfig.json.
• npm run check-types

Expected Behavior

• Building works with that setting, too.

[nikku]

@huang-long What exactly is your feature request?

[huang-long]

@huang-long What exactly is your feature request?
When I use "diagram-js" in my project, and run "npm run build:prod", typescript checks error in the file "command/CommandHandler.ts", error message: [This import is never used as a value and must use 'import type' because 'importsNotUsedAsValues' is set to 'error'].

[nikku]

@huang-long I tried to reproduce locally but found that you're using an old (ancient?) TypeScript version (<= 5.0).

Can you reproduce the issue with TypeScript@5?

[huang-long]

I tried using TypeScript@5.0.4, but got the same error.I read the content of file “/diagram-js/lib/command/CommandHandler.ts”,the module “ElementLike、CommandContext” should be type.
So I modified the file “/diagram-js/lib/command/CommandHandler.ts” as first commented, build success.

import type { ElementLike } from "../core/Types"; import type { CommandContext } from "./CommandStack";

[nikku]

I believe you have verbatimModuleSyntax enabled, right? Enabling it in diagram-js leads to similar issues during type checking:

[PRJ]/diagram-js/lib/features/outline/OutlineProvider.spec.ts:
    6:10  error   'Element' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled. ​typescript(1484)
    8:8   error   'OutlineProvider' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled. ​typescript(1484)
    8:27  error   'Outline' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled. ​typescript(1484)

[huang-long]

No,I did not use this “verbatimModuleSyntax” in the tsconfig.This is my project ruoyi-web-vue3-ts

[nikku]

You use TypeScript@5 with deprecation warnings disabled, and importNotUsedAsValues. Later versions of @vue/tsconfig enable verbatimModuleSyntax.

We don't support that setting to date, but may investigate how to support it in the future.

[huang-long]

Thanks for answering.