Missing style after packaging

[597038837]

[597038837]

The left side is the dev environment effect, and the right side is the deployment effect after packaging

[joshgoebel]

Not immediately clear this is a problem with the plugin vs your setup/packaging? Can you confirm if this is a JS or CSS issue at least?

[xiaomaiyun]

I have temporarily solved this problem. The reason is that webpack did not pack the unused code when packing, so quotes it here.

import 'highlight.js/styles/atom-one-dark.css'
import hljsCommon from 'highlight.js/lib/common'
import hljsVuePlugin from '@highlightjs/vue-plugin'
. . . 
const app = createApp(App)
. . .
// 注意：解决Vue使用highlight.js build打包发布后样式消失问题，原因是webpack在打包的时候没有把未被使用的代码打包进去，因此，在此处引用一下，看似无意义实则有用
hljsCommon.highlightAuto('<h1>Highlight.js has been registered successfully!</h1>').value
app.use(hljsVuePlugin)
. . .

https://github.com/highlightjs/vue-plugin/issues/38#issuecomment-1356383004

[joshgoebel]

The reason is that webpack did not pack the unused code when packing, so quotes it here.

HLJS is not unused, it's imported then used... or are you referring just to the CSS?

[xiaomaiyun]

The reason is that webpack did not pack the unused code when packing, so quotes it here.

HLJS is not unused, it's imported then used... or are you referring just to the CSS?

意思就是，仅仅使用“import hljsCommon from 'highlight.js/lib/common'” 把highlight.js/lib/common导入到项目的话，在打包的时候webpack 会认为该依赖没有被使用会被优化掉，不会把该依赖打包到项目中，这样部署到服务器就找不到该依赖，所以就在代码中使用

hljsCommon.highlightAuto('<h1>Highlight.js has been registered successfully!</h1>').value

用一下它，这样打包的时候就不会被优化，就会把该依赖一起打包

[joshgoebel]

I can only read English.

[xiaomaiyun]

I can only read English.

That means, if you just use "import hljsCommon from 'highlight.js/lib/common'" to import highlight.js/lib/common into the project, webpack will think that the dependency is not used and will be optimized when packaging. The dependency will not be packaged into the project, so that the dependency cannot be found when deployed to the server, so it is used in the code

hljsCommon.highlightAuto('<h1>Highlight.js has been registered successfully!</h1>').value

Use it, so that it will not be optimized when packaging, and the dependencies will be packaged together

[joshgoebel]

Would this just be a docfix then to say that in some cases you may need to use the module to make sure it isn't tree-stripped?

[ash-financial-com]

I have the same problem using it with Vue3 + Vite.

Locally (npm run dev) everything seems in order. The distribution build (npm run build) however does not render the language key/class.

After changing: import 'highlight.js/lib/common' to import hljsCommon from 'highlight.js/lib/common'

and adding the line: hljsCommon.highlightAuto('<h1>Highlight.js has been registered successfully!</h1>').value

to my main.js it works.

i am not really sure if this would be just a docfix since the current workaround is quite "hacky" ... but it does work (thanks @xiaomaiyun ).

[joshgoebel]

I wonder if we could just add a few more values to the sideEffects key in package.json?

[hybridwebdev]

I had the same issue, where my styling was also disappearing in my bundled files. If you take a look at the screen shot, the right side shows the bundled code block output, and the left side shows the same code block in "hosting" mode. As you can see, the output is entirely different for some reason.

I don't know if my issue is related, but xiaomaiyun's solution solved it for me. When I apply his solution, my bundled output ends up the same as when running in hosting mode.

The issue appears to be, that without his solution, something is causing the output code block to be different. The end result is that styling isn't applied, as the wrapper elements highlight.js applies are missing.