[next] <style src=""></style> issue on first render

[JounQin]

Version

15.0.0-beta.7

Reproduction link

https://github.com/JounQin/vue-ssr/blob/master/src/views/Articles/ArticleItem.vue#L24-L26

Steps to reproduce

<style >
@import '~highlight.js/styles/github-gist.css';
</style>

change it to:

<style src="highlight.js/styles/github-gist.css"></style>

run yarn dev and visit http://localhost:4000/article/1 .

What is expected?

Do not throw error and work with SSR

What is actually happening?

It does not throw error on building, but when we visit the page like, it will throw an error Cannot find module 'highlight.js/styles/github-gist.css?vue&type=style&index=0&lang=css', but refresh the page, there will be no error any more. However, styles SSR for it is not working neither.

[yyx990803]

This is because <style src="xxx.css"> is imported with additional resourceQuery strings at the end, e.g. highlight.js/styles/github-gist.css?vue&type=style&index=0&lang=css

So in your server config, the external's whitelist /\.css$/ misses this request and excludes it from the server build.

To fix the externals:

  externals: nodeExternals({
    // do not externalize CSS files in case we need to import it from a dep
    whitelist: [/\.css$/, /\?vue&type=style/],
  }),

We should probably add this to the upgrade guide.