highcharts / highcharts/highcharts-angular
provideHighcharts() fails with vitest 4.1.0+
- 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
Assessment
This issue has not been assessed yet.