Build not working with nuxtServerInit

[Nvironmental]

Hi there,

I am trying deploy website on to Vercel, the static works fine, however whenever I try to do a server setup it fails with this message.

What I am trying to do is invoke an api call via nuxtServerInit

Here is what config I am trying: vercel.json config

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": { "serverFiles": ["package.json"] }
    }
  ],
  "routes": [
    {
      "src": "/_nuxt/.+",
      "headers": { "Cache-Control": "public, max-age=31557600" }
    },
    {
      "src": "/sw.js",
      "dest": "/_nuxt/static/sw.js",
      "headers": {
        "Cache-Control": "public, max-age=43200, immutable",
        "Service-Worker-Allowed": "/"
      }
    },
    { "src": "^/(.*)", "dest": "/" }
  ]
}

package.json file

{
  "name": "thelatitude",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.6",
    "@nuxtjs/vercel-builder": "^0.21.3",
    "@tailwindcss/line-clamp": "^0.2.1",
    "core-js": "^3.9.1",
    "gsap": "^3.6.0",
    "nuxt": "^2.15.3",
    "smoothscroll-polyfill": "^0.4.4",
    "swiper": "5.x",
    "vue-awesome-swiper": "^4.1.1",
    "vue-multiselect": "^2.1.6",
    "vue-phone-number-input": "^1.1.10",
    "vue-select": "^3.11.2",
    "vuelidate": "^0.7.6"
  },
  "devDependencies": {
    "@nuxtjs/google-fonts": "^1.3.0",
    "@nuxtjs/moment": "^1.6.1",
    "@nuxtjs/tailwindcss": "^4.0.1",
    "nuxt-font-loader": "^1.1.3",
    "nuxt-gsap-module": "^1.3.1",
    "postcss": "^8.2.8"
  }
}

nuxt.config.js file

export default {
  // Target: https://go.nuxtjs.dev/config-target
  target: "server",
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: "OneLatitude",
    htmlAttrs: {
      lang: "en"
    },
    meta: [
      { charset: "utf-8" },
      {
        name: "viewport",
        content:
          "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
      },
      {
        hid: "description",
        name: "description",
        content:
          "Guided Self Drive Expeditions. Small Groups. Experiential Luxury."
      },
      {
        property: "og:type",
        content: "website"
      },
      {
        property: "og:url",
        content: "https://onelatitude.in"
      },
      {
        property: "og:title",
        content: "OneLatitude"
      },
      {
        property: "og:description",
        content:
          "Guided Self Drive Expeditions. Small Groups. Experiential Luxury."
      },
      {
        property: "og:image",
        content: "https://onelatitude.in/onelatitudebanner.jpg"
      },
      {
        property: "twitter:card",
        content: "summary_large_image"
      },
      {
        property: "twitter:url",
        content: "https://onelatitude.in"
      },
      {
        property: "twitter:title",
        content: "OneLatitude"
      },
      {
        property: "twitter:description",
        content:
          "Guided Self Drive Expeditions. Small Groups. Experiential Luxury."
      },
      {
        property: "twitter:image",
        content: "https://onelatitude.in/onelatitudebanner.jpg"
      }
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },
      {
        rel: "stylesheet",
        href:
          "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
      }
    ],
    script: [
      {
        src:
          "https://unpkg.com/smoothscroll-polyfill@0.4.4/dist/smoothscroll.min.js"
      }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: "~/plugins/swiper", mode: "client" },
    { src: "~/plugins/validate", mode: "all" },
    { src: "~/plugins/select", mode: "all" },
    { src: "~/plugins/phone", mode: "all" }
  ],

  tailwindcss: {
    jit: true
  },

  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/tailwindcss
    "@nuxtjs/tailwindcss",
    [
      "@nuxtjs/google-fonts",
      {
        families: {
          "DM+Sans": {
            wght: [100, 200, 300, 400, 500, 600, 700, 800, 900]
          }
        },
        display: "auto",
        download: true
      }
    ],
    "nuxt-font-loader",
    "nuxt-gsap-module",
    "@nuxtjs/moment"
  ],

  fontLoader: {
    /* module options */
    url: "/fonts/font-face.css"
  },

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    "@nuxtjs/axios"
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {},

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: ["gsap"]
  },

  pageTransition: {
    name: "pageTrans",
    mode: "out-in",
    css: false,
    beforeEnter(el) {

      this.$gsap.set(el.firstElementChild, {
        y: 0,
        background: "#CF9B2A",
        visibility: "visible"
      });
      this.$gsap.set(el.firstElementChild.firstElementChild, {
        scale: 0.5,
        color: "black"
      });
    },
    enter(el, done) {
      const tl = this.$gsap.timeline({ delay: 0.15, onComplete: done });
      tl.to(el.firstElementChild, {
        y: "100%",
        duration: 0.8,
        ease: "power3.inOut"
      }).to(el.firstElementChild, {
        visibility: "hidden",
        duration: 0.1
      });

    },
    beforeLeave(el) {
      this.$gsap.set(el.firstElementChild.firstElementChild, {
        scale: 1,
        color: "white"
      });
      this.$gsap.set(el.firstElementChild, {
        background: "#2e2e2e",
        visibility: "visible"
      });
    },
    leave(el, done) {
      const tl = this.$gsap.timeline({ onComplete: done });
      // tl.to(el.firstElementChild.nextElementSibling.nextElementSibling, {
      //   "-webkit-filter": "grayscale(1)",
      //   filter: "grayscale(1)",
      //   duration: 0.3,
      //   ease: "power3.out"
      // })
      tl.to(
        el.firstElementChild,
        {
          y: 0,
          duration: 0.8,
          ease: "power3.inOut"
        },
        "-=0.1"
      )
        .to(el.firstElementChild.firstElementChild, {
          scale: 0.5,
          color: "black",
          duration: 0.6,
          ease: "power3.out"
        })
        .to(
          el.firstElementChild,
          {
            background: "#CF9B2A",
            duration: 0.6,
            ease: "power3.out"
          },
          "-=0.6"
        );
    }
  }
};

Trip Store file

import axios from "axios";
// import _ from "lodash";

export const state = () => ({
  trips: {
    india: [],
    international: [],
    all: []
  }
});

export const mutations = {
  /**
   * Take the payload (data) and add it to the global state of destinations
   * @param {object} state
   * @param {object} payload
   */
  setTrips(state, payload) {
    // return (state.destinations = payload);

    state.trips.india = payload.filter(i => i.acf.domain === "India");
    state.trips.international = payload.filter(
      i => i.acf.domain === "International"
    );
    // state.trips.all = _.orderBy(payload, "menu_order", "asc");
    state.trips.all = payload;
  }
};

export const actions = {
  //fetch all products
  async fetchTrips({ commit }) {
    try {
      // change localhost to env variable
      let url = process.env.BASE_URL;
      let response = await axios.get(
        "https://xxxxxxxxxx.com/wp-json/wp/v2/trips?_embed"
//hidden the url on purpose
      );
      commit("setTrips", response.data);
    } catch (e) {
      console.log(e);
    }
  }
};

Store Index file where nuxtServerInit is called

export const state = () => ({});
export const getters = {};
export const actions = {
  async nuxtServerInit({ dispatch }) {
    await dispatch("trips/fetchTrips");
  }
};

After trips are fetched trips pages are fetched like

pages
- trips
- - index.vue
- - _slug.vue

I have tried many times and also gone through previous issues but couldnt find anything how I could resolve my issue. Kindly help.

[danielroe]

@Nvironmental What do your Vercel runtime logs say?

[Nvironmental]

My apologies, I couldnt find Runtime Logs.

However, I found this, I don't know if this is the same

Following is my build logs

21:09:19.419 | Cloning github.com/Nvironmental/thelatitude (Branch: staging, Commit: 5fc2961)
-- | --
21:09:20.757 | Cloning completed: 1.338s
21:09:20.793 | Analyzing source code...
21:09:20.801 | Warning: Due to `builds` existing in your configuration file, the Build and Development Settings defined in your Project Settings will not apply. Learn More: https://vercel.link/unused-build-settings
21:09:22.219 | Installing build runtime...
21:09:25.203 | Build runtime installed: 2.984s
21:09:27.988 | Looking up build cache...
21:09:28.438 | Build cache found. Downloading...
21:09:33.476 | Build cache downloaded [84.44 MB]: 5038.143ms
21:09:34.584 | [log] Running with @nuxt/vercel-builder version 0.21.3
21:09:34.584 | [log]  ----------------- Prepare build -----------------
21:09:34.584 | [log] Downloading files...
21:09:34.584 | [log] Working directory: /vercel/path0
21:09:34.587 | [log] Using yarn
21:09:34.588 | [info] Prepare build took: 4.155229 ms
21:09:34.588 | [log]  ----------------- Install devDependencies -----------------
21:09:34.588 | [log] Using cached node_modules_dev
21:09:34.951 | yarn install v1.22.10
21:09:35.035 | [1/5] Resolving packages...
21:09:35.480 | success Already up-to-date.
21:09:35.484 | Done in 0.54s.
21:09:35.496 | [info] Install devDependencies took: 908.202491 ms
21:09:35.497 | [log]  ----------------- Nuxt build -----------------
21:09:35.708 | [log] Running nuxt build --standalone --no-lock --config-file "nuxt.config.js" /vercel/path0
21:09:35.896 | [warn] postcss@8.2.8 is installed but ^7.0.32 is expected
21:10:08.036 | [info] Nuxt build took: 32539.362763 ms
21:10:08.036 | [log]  ----------------- Install dependencies -----------------
21:10:08.036 | [log] Using cached node_modules_prod
21:10:08.280 | yarn install v1.22.10
21:10:08.358 | [1/5] Resolving packages...
21:10:08.894 | [2/5] Fetching packages...
21:10:08.964 | [3/5] Linking dependencies...
21:10:08.965 | warning " > @tailwindcss/line-clamp@0.2.1" has unmet peer dependency "tailwindcss@>=2.0.0".
21:10:08.966 | warning " > vue-awesome-swiper@4.1.1" has unmet peer dependency "vue@2.x".
21:10:08.967 | warning "vue-phone-number-input > style-helpers > stylelint-order@4.1.0" has unmet peer dependency "stylelint@^10.0.1 \|\| ^11.0.0 \|\| ^12.0.0 \|\| ^13.0.0".
21:10:08.967 | warning " > vue-select@3.11.2" has unmet peer dependency "vue@2.x".
21:10:09.602 | [4/5] Building fresh packages...
21:10:09.841 | [5/5] Cleaning modules...
21:10:10.255 | Done in 1.98s.
21:10:10.269 | [info] Install dependencies took: 2233.249615 ms
21:10:10.270 | [log]  ----------------- Collect artifacts -----------------
21:10:15.164 | [info] Collect artifacts took: 4893.813294 ms
21:10:16.068 | Uploading build outputs...
21:10:16.340 | Deploying build outputs...
21:10:23.761 | Build completed. Populating build cache...
21:10:23.762 | [log]  ----------------- Collect cache -----------------
21:10:29.724 | [info] 261 files collected from .nuxt
21:10:37.133 | [info] 27351 files collected from .vercel_cache
21:10:44.160 | [info] 26252 files collected from node_modules_dev
21:10:50.326 | [info] 5811 files collected from node_modules_prod
21:10:50.331 | [info] Collect cache took: 26568.804834 ms
21:11:08.407 | Uploading build cache [84.43 MB]...
21:11:11.859 | Build cache uploaded: 3.451s
21:11:12.380 | Done with "nuxt.config.js"

[danielroe]

@Nvironmental That's the one! Looks like you'll need to update your lockfile (try deleting yarn.lock and reinstalling). Indeed, I strongly suspect you would have the same issue building & running locally.

[Nvironmental]

Thanks a lot @danielroe ... deleting yarn.lock and reinstalling did work for me.

It however introduces a new errors. One is that it reads Cold Start and the important one is that its unable to find any static assets (from static folder) and on the site these static images/videos arent displayed.

Should I be adding static folder explicitly in the vercel.json like :

  "config": { "serverFiles": ["package.json", "static/**"] }

Would this be correct ?

[danielroe]

@Nvironmental You shouldn't need to add your static folder to the deployment. Cold start is telling you how long it took to load your serverless function. You could try clicking into those logs to see why it's failing, but I can't tell from the screenshot...