Short
Happens only in production build (SSR). Working in development mode.
err: ReferenceError: document is not defined
at js/index.f9ac44f3.js:1:1647
at new Promise (<anonymous>)
at Function.i.e (webpack/bootstrap:50:27)
at i (webpack:/src/views lazy ^\.\/.*\.vue$ namespace object:74:0)
at js/index.f9ac44f3.js:8:7266
at .../node_modules/vue-router/dist/vue-router.common.js:1768:17
at .../node_modules/vue-router/dist/vue-router.common.js:1795:66
at Array.map (<anonymous>)
at .../node_modules/vue-router/dist/vue-router.common.js:1795:38
at Array.map (<anonymous>)
at flatMapComponents (.../node_modules/vue-router/dist/vue-router.common.js:1794:26)
Long
I've configured SSR for Vue (vue-cli) app. It is working in development mode for me. My commands for generating vue-ssr-client-manifest.json and vue-ssr-server-bundle.json:
"dev-client": "vue-cli-service serve --ssr --client --no-clean",
"dev-server": "vue-cli-service build --watch --mode development --ssr --no-clean",
--ssr and --client are my flags that change some settings for SSR. At this step (dev-mode) I get all the CSS inserted into HTML.
<head>
<style>
ALL 300 KB of CSS HERE
</style>
</head>
I hoped that when I switch to production mode all this CSS will become a separate file with a link to it. Commands used for production:
"ssr:client": "vue-cli-service build --ssr --client",
"ssr:server": "vue-cli-service build --ssr --no-clean",
I didn't write any changes for dev/prod builds in my vue.config.js. The only change - it is now --mode production.
I've found such lines in a generated file:
a=document.getElementsByTagName(\"link\"),c=0;
var f=document.getElementsByTagName(\"style\");
var h=document.getElementsByTagName(\"head\")[0];
What is responsible for writing these lines? What to do to remove them in production build?
Related
SSR build says "document is not defined" for a Vuejs cli3 SPA app using a Vue cli3 library
