highcharts / highcharts/highcharts-angular

provideHighcharts() fails with vitest 4.1.0+

Open
#450 0 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
444
Forks
121
PR merge metrics
No merged PRs in 30d

Description

> For general tech support, please see www.highcharts.com/support.
> Please report only issues about `highcharts-angular` wrapper or content of this repository.
> For general issues with Highcharts and TypeScript the correct repository to report such issues is [main Highcharts repository](https://github.com/highcharts/highcharts/issues).

### Describe the bug

When using vitest 4.1.0 with a spec.ts which uses `provideHighcharts()`, the import of highcharts fails:
```
Error: Cannot find module '.../node_modules/highcharts/esm/highcharts' imported from .../node_modules/highcharts-angular/fesm2022/highcharts-angular.mjs
Did you mean to import "highcharts/esm/highcharts.js"?
❯ finalizeResolution node:internal/modules/esm/resolve:275:11
❯ moduleResolve node:internal/modules/esm/resolve:865:10
❯ defaultResolve node:internal/modules/esm/resolve:991:11
❯ ModuleLoader.#cachedDefaultResolve node:internal/modules/esm/loader:719:20
❯ ModuleLoader.#resolveAndMaybeBlockOnLoaderThread node:internal/modules/esm/loader:736:38
❯ ModuleLoader.resolveSync node:internal/modules/esm/loader:765:52
❯ ModuleLoader.#resolve node:internal/modules/esm/loader:701:17
❯ ModuleLoader.getOrCreateModuleJob node:internal/modules/esm/loader:621:35
❯ onImport.tracePromise.__proto__ node:internal/modules/esm/loader:650:32
❯ TracingChannel.tracePromise node:diagnostics_channel:350:14
```

This was working with vitest up to version 4.0, but now fails. from the backlog, it relies on node.js, which requires the extension ( https://nodejs.org/api/esm.html#mandatory-file-extensions )

### Fix

So the fix is to simply add the `.js` suffix to the import statement in `highcharts-angular.mjs`.

### Work-arounds

The work-around is to provide a vitest.config.ts (and register it via angular.json) to inline `highcharts-angular`:
```
import { defineConfig } from 'vitest/config';

export default defineConfig({
test: {
server: {
deps: {
inline: ['highcharts-angular']
}
}
}
});
```

The other work-around is to provide the instance in the spec file (here it works with or without the '.js' suffix):
```
provideHightcharts({
instance: () => import('highcharts/esm/highcharts').then(m => m.default)
})
```

### Expected behavior

Given angular is focusing on vitest, it should run without any work-arounds.

### Demo

1. Create an angular app with vitest test runner
2. add `provideHighcharts()` the the providers in the testbed configuration

### Setup used

Angular CLI : 21.2.7
Angular : 21.2.8
Node.js : 24.14.1
Package Manager : npm 11.11.0
Operating System : linux x64

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.