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.

[LoaderB0T]

We have the same issue after enabling "verbatimModuleSyntax" in our project.
diagram-js seems to be the only dependency that produces these errors in our project and it would be great if the type imports are marked as such in the code.
Would you accept a PR enabling the verbatimModuleSyntax flag in diagram-js's tsconfig file with the fixed imports/exports?

It would be 100% backwards compatible afaik.

[nikku]

@LoaderB0T Happy to inspect a PR with such a change.