Override version of a dependency of another dependency with npm

I am using shiki-twoslash to highlight code snippets on my blog, and to provide type annotations for JavaScript and TypeScript code. I’ve been trying to write blocks of Svelte code, but highlighting was failing once I used Svelte’s features belong pure HTML elements, such as if blocks.

After several tries, I finally found that shiki-twoslash was using an old version of shiki, the tool that actually highlights code.

I’ve been able to tell shiki-twoslash to use the newest version of shiki thanks to overrides propery of package.json:

json
{
"devDependencies": {
// shiki-twoslash depends on shiki
"shiki-twoslash": "^3.0.2"
},
"overrides": {
// Override shiki version for all dependencies (and their children) that use it
"shiki": "^0.10.1",
// Or only override the version used by shiki-twoslash
"shiki-twoslash": {
"shiki": "^0.10.1"
}
}
}

Join my mailing list

Get monthly insights, personal stories, and in-depth information about what I find helpful in web development as a freelancer.

Email advice once a month + Free XState report + Free course on XState

Want to see what it looks like? View the previous issues.

I value your privacy and will never share your email address.