vite/rollup tree shakes lib/common.js

[Trinovantes]

Describe the issue/behavior that seems buggy

I investigated a few issues (e.g. highlightjs/vue-plugin#44) reported in the vue-plugin repo where production builds are stripping out import 'highlight.js/lib/common'; side effect imports

Turns out vite (which uses rollup internally) tree shakes side effect imports if the files themselves are not marked as side effect in package.json

Sample Code or Instructions to Reproduce

npm create vite@latest
npm install highlight.js

Then inside src/main.ts, add:

import 'highlight.js/lib/common'
import hljs from 'highlight.js/lib/core'
console.log(hljs.listLanguages())

In debug builds npm run dev, it should list all languages registered inside highlight.js/lib/common

However in production builds npm run build && npm run preview, it will print an empty array.

Expected behavior

Should print all languages in both debug/production builds

Additional context

This package.json should be updated to:

  "sideEffects": [
    "./es/common.js",
    "./lib/common.js",
    "*.css",
    "*.scss"
  ],

[joshgoebel]

What if you instead do:

import hljs from 'highlight.js/lib/common'

Does that work?

[Trinovantes]

That works as well

However, it'll only work as long as the hljs variable is used/referenced the current file. I still think it's a good idea to mark that file as side effect to prevent production builds from "randomly" breaking if that variable ever stops being referenced.