[vue-server-renderer] Bug failing when using a reference of process - related to SSRClientWebpackPlugin

[AlexandreBonaventure]

Version

2.5.21

Reproduction link

https://github.com/AlexandreBonaventure/repro-vue-ssr-bug

Steps to reproduce

1. yarn install
2. yarn run ssr:build && yarn ssr:start
3. go to localhost:8000

What is expected?

to serve / correctly

What is actually happening?

error 500:

TypeError: Cannot read property 'replace' of undefined
    at normalizeFile (.../node_modules/vue-server-renderer/build.js:8183:27)

---

Hi, I came across this weird bug when I was trying to retrieve a global variable (eg. global.localenv.PUBLIC_URL) in App.vue to populate a meta tag (using vue-meta).
I stumble upon the bug, and narrowed it down to referencing process being the cause here.
Another weird thing is that if you remove the component Icons import in the minimal repro, it works fine!

The error stack is initiated by TemplateRenderer.renderPreloadLinks which makes me think that maybe it is a bug in the webpack SSRClientPlugin which inject preload links for every assets.

[tkjaergaard]

+1

I'm experiencing the same issue TypeError: Cannot read property 'replace' of undefined.

Downgrading to [email protected], [email protected] and [email protected] made my application run again.

2.5.18-2.5.21 make my application break with the TypeError:

TypeError: Cannot read property 'replace' of undefined
    at normalizeFile (.../node_modules/vue-server-renderer/build.js:8176:27)

[sebkolind]

I had this error too when building my client webpack config. It turns out that I forgot to delete VueSSRServerPlugin() and had both the server and client plugin. As soon as I removed the server plugin from the client config it works.

I am not sure if it's related but someone else might have the same issue.

[laure-at-irun]

For me, the error was caused by a malformed vue-ssr-client-manifest.json : in the modules section, some modules were mapped to indexes -1. As a result, at runtime, the vue-server-renderer was unable to load the file.

To fix it, I just enabled the source maps for css files. In vue.config.js, add to your client config :

css: {
     sourceMap: true,
},

Tested with version 2.6.9.

I hope this will help.

[AlexandreBonaventure]

@laure-at-irun yep! that was my issue as well

[OliverJEvans]

@laure-at-irun This fixed the issue for me too. But why!?

[laure-at-irun]

The vue client plugin receives from webpack compilation stats a list of files that includes css maps, even when css maps are not emitted. The list is provided by webpack though stats.chunks.files. The stats.assets doesn't contain the css map files.

However, I am not sure why webpack is doing this.

Anyway, the client plugin is not robust to webpack inconsistent data.

[lovetingyuan]

#9488 (comment)

[lovetingyuan]

The vue client plugin receives from webpack compilation stats a list of files that includes css maps, even when css maps are not emitted. The list is provided by webpack though stats.chunks.files. The stats.assets doesn't contain the css map files.

However, I am not sure why webpack is doing this.

Anyway, the client plugin is not robust to webpack inconsistent data.

Maybe souceMap in chunks is set by option: devtool.