Skip to content

Fix missing `backbone.marionette` dependency when Vue server side rendering (SSR) in production

Fix missing backbone.marionette dependency when Vue server side rendering (SSR) in production

Fix https://gitlab.com/gitlab-org/gitter/webapp/issues/2156

Moves all of our frontend deps from devDependencies to dependencies so they can be found when we server-side render some Vue on our Node.js server. I didn't catch this when running the production build locally because all node_modules are available in my local instance already.

Previously, our frontend assets were built and could be served without needing to be run on the server. Just serve the JS that we built before in the handlebars template we server-side render.

Previous Vue left-menu v1 MR: https://gitlab.com/gitlab-org/gitter/webapp/merge_requests/1360

`output/assets/js/vue-ssr-server-bundle.json` snippet for reference
{
  "entry": "server-bundle.js",
  "files": {
    "server-bundle.js": "..."
  },
  "maps": {
    "server-bundle.js": {
      "version": 3,
      "sources": [
        "webpack:///webpack/bootstrap",
        "webpack:///external \"vuex\"",
        "webpack:///./public/js/vue/left-menu/constants.js",
        "webpack:///./node_modules/css-loader/dist/runtime/api.js",
        "webpack:///./node_modules/vue-style-loader/lib/addStylesServer.js",
        "webpack:///./node_modules/vue-style-loader/lib/listToStyles.js",
        "webpack:///external \"vue\"",
        "webpack:///external \"gitter-web-client-context\"",
        "webpack:///external \"underscore\"",
        "webpack:///./public/js/vue/left-menu/components/menu-bar-item.vue?1ee0",
        "webpack:///./public/js/vue/left-menu/components/menu-bar-body.vue?0917",
        "webpack:///./public/js/vue/components/loading-spinner.vue?215a",
        "webpack:///./public/js/vue/left-menu/components/search-body.vue?e71a",
        "webpack:///./public/js/vue/left-menu/components/list-item.vue?4020",
        "webpack:///./public/js/vue/left-menu/components/index.vue?b19b",
        "webpack:///./public/js/utils/appevents.js",
        "webpack:///external \"gitter-realtime-client/lib/sorts-filters\"",
        "webpack:///./node_modules/handlebars/dist/cjs/handlebars/utils.js",
        "webpack:///./node_modules/handlebars/dist/cjs/handlebars/exception.js",
+        "webpack:///external \"backbone.marionette\"",
        ....

Closes #2156 (closed)

Edited by Eric Eastwood

Merge request reports