Missing one .js resource from .nuxt/dist/client folder after yarn build

Question

I'm trying to deploy my Nuxt project using apache and pm2.

The nuxt project will be the front-end, and it has a backend api that is on a different domain. I got the virtual host setup fine, I can access the login page but for some reasons, it always returns a 404 on one .js file that's supposed to be generated after I ran yarn build inside .nuxt/dist/client folder.

Some odd thing that's worth noting though is that when I use an invalid API_URL, like if I use a non-existent url https://xxx.xxx/api/1 instead of the correct url https://xxx.xxx/api/v1. The error will disappear after retrying yarn build and pm2 restart

Here's the error:

My setup:

OS: Debian 11
Server: Apache2 & pm2

My nuxt.config.js

    import colors from "vuetify/es5/util/colors";

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    titleTemplate: "%s - " + process.env.APP_NAME,
    title: process.env.APP_NAME,
    htmlAttrs: {
      lang: "en",
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
      { name: "format-detection", content: "telephone=no" },
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
  },

  watchers: {
    webpack: {
      aggregateTimeout: 300,
      poll: 1000,
    },
  },

  auth: {
    strategies: {
      laravelPassport: {
        provider: "laravel/passport",
        endpoints: {
          userInfo: process.env.API_URL + "/me",
        },
        url: process.env.API_SERVER,
        clientId: process.env.PASSPORT_CLIENT_ID,
        clientSecret: process.env.PASSPORT_CLIENT_SECRET,
      },
      local: {
        endpoints: {
          login: {
            url: "/user/login",
            method: "post",
            propertyName: "data.access_token",
          },
          logout: { url: "/user/logout", method: "post" },
          user: { url: "/me", method: "get", propertyName: "data" },
        },
        token: {
          property: "data.access_token",
        },
        user: {
          property: "data",
        },
        tokenRequired: true,
        tokenType: "Bearer",
        autoFetchUser: true,
      },
      customStrategy: {
        scheme: "~/schemes/customScheme",
        endpoints: {
          login: {
            url: "/user/login",
            method: "post",
            propertyName: "data.access_token",    
          },
          logout: { url: "/user/logout", method: "post" },
          user: { url: "/me", method: "get", propertyName: "data" },
        },
        tokenRequired: true,
        tokenType: "Bearer",
        autoFetchUser: true,
      },
    },
    redirect: {
      login: "/",
      logout: "/",
      home: "/admin",
    },
  },

  router: {
    middleware: ["auth"],
  },

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

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: ["~plugins/vue-api-query"],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/vuetify
    "@nuxtjs/vuetify",
  ],

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

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
  vuetify: {
    customVariables: ["~/assets/variables.scss"],
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
        },
      },
    },
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    maxChunkSize: 300000,
    extend(config, ctx) {
      config.performance.maxAssetSize = 700 * 1024;
    },
  },

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseURL: process.env.API_SERVER || "https://xxx.xxx",
    apiUrl: process.env.API_URL || "https://xxx.xxx/api/v1",
    headers: {
      common: {
        Platform: "web",
      },
    },
  },
};

So, `yarn generate` or `npm run build`? Quite different commands. — kissu, Jul 04 '22 at 11:40
@kissu so sorry I meant yarn build or npm run build. I tried both, I tend to interchange the terms, I'm sorry for the confusion — Ian Jay, Jul 05 '22 at 00:57
You need to use only one, `generate`for SSG and `build` for SSR. — kissu, Jul 05 '22 at 05:24
@kissu, thank you so much for responding. When I said both, I meant I tried "npm run build" and "yarn build" separate times trying to deploy it. — Ian Jay, Jul 05 '22 at 05:31
Same, use either NPM or Yarn, not both at the same time or you can get some issues. — kissu, Jul 05 '22 at 05:32
So, can you reproduce the issue locally? Or is it broken only in production? — kissu, Jul 05 '22 at 05:33
That's the other thing. I can't reproduce it locally. and the issue also disappears when I use an invalid api_url. — Ian Jay, Jul 05 '22 at 06:01
I already did npm cache clean --force but the same thing happens. When I use an invalid api_url, nuxt generates all the files, but when I use the correct one, the error comes back, only one .js file is not generated. — Ian Jay, Jul 05 '22 at 06:39
More of a generated hash on the built files, not the `node_modules`. So, your deployed app is probably not taking new updates into account. — kissu, Jul 05 '22 at 07:15
what can I do to clear cache on the built files? So sorry I'm not really a pro when it comes to nuxt and I really appreciate you trying to help. — Ian Jay, Jul 05 '22 at 07:20

Ian Jay · Answer 1 · 2022-07-06T23:11:42.253

After searching for answers for days, I couldn't find the solution to my problem. Only to find out that it's a pm2 issue somehow stopping yarn to generate some files. It turns out that when I stopped pm2 processes, it was still running on the background.

Here's how you can check if you have the same problem:

Stop pm2 process with pm2 stop --name or pm2 stop all (if you have no other processes running)
Delete the process using pm2 delete --name or pm2 delete all (if you have no other processes running)
Run pm2 ls to confirm that there is no other process running
Log your current user out and login using a different user
Run pm2 ls. If there are still processes running, stop them.
Redeploy with yarn build and pm2 start

Missing one .js resource from .nuxt/dist/client folder after yarn build

1 Answers1