after deploying a nuxt application to App engine with gcloud, it shows an error?

Question

I'm trying to deploy a Nuxtjs application to google cloud (app engine), But after deploying it when I browse it, it shows server error 500 (please visit: https://vetution.oa.r.appspot.com/), When I use gcloud app logs tail -s default command to log errors it gave me the response in the image below

I don't know how can I install this package on app engine to make it run with no errors.

Here is My Nuxt.config.js file:

import redirectSSL from 'redirect-ssl'
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

require('dotenv').config()

// const { NODE_ENV = 'production' } = process.env

// const isDev = NODE_ENV === 'development'
// here is update 
export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    titleTemplate: '%s | Vetution',
    title: 'Veterinary Online Marketplace',
    htmlAttrs: {
      lang: 'en',
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content:
          'Vetution is the online platform for veterinarians to explore and buy supplies and products in Egypt. Order your veterinary clinic or farm needs now!',
      },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.svg' }],
  },
  serverMiddleware: [
    redirectSSL.create({
      enabled: process.env.NODE_ENV === 'production',
    }),
  ],
  loading: {
    color: '#1776f2',
    height: '5px',
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    'vue-slick-carousel/dist/vue-slick-carousel.css',
    'vue-slick-carousel/dist/vue-slick-carousel-theme.css',
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: '~plugins/vue-slick', ssr: false },
    { src: '~plugins/vueSlickCarousel', ssr: false },
    { src: '~plugins/axios.js' },
    { src: '~plugins/validate.js', mode: 'client' },
    { src: '~plugins/vuex-persist.js', ssr: false },
    // { src: '~plugins/facebook-events.js', mode: 'client' },
  ],

  // https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap
  // 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/eslint
    // '@nuxtjs/eslint-module',

    [
      '@nuxtjs/google-analytics',
      {
        id: 'UA-162964146-1',
        ecommerce: {
          enabled: true,
        },
      },
    ],
  ],

  // gtm: {
  //   id: 'GTM-KNXFGQN',
  // },

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    '@nuxt/image',
    '@nuxtjs/vuetify',
    '@nuxtjs/axios',
    // '@nuxtjs/gtm',
    '@nuxtjs/sitemap',
    '@nuxtjs/robots',
    'nuxt-webfontloader',
    // [
    //   '@nuxtjs/google-adsense',
    //   {
    //     id: 'ca-pub-3060908587492903',
    //   },
    // ],
    ['@nuxtjs/dotenv', { filename: `.env.production` }],
    'nuxt-polyfill',
  ],
  image: {
    domains: ['https://vetution.online'],
  },
  webfontloader: {
    google: {
      families: ['Inter:300,400,500,600,700,800,900&display=swap'],
    },
  },
  polyfill: {
    features: [
      /* 
            Feature without detect:

            Note: 
              This is not recommended for most polyfills
              because the polyfill will always be loaded, parsed and executed.
        */
      {
        require: 'url-polyfill', // NPM package or require path of file
      },

      /* 
            Feature with detect:

            Detection is better because the polyfill will not be 
            loaded, parsed and executed if it's not necessary.
        */
      {
        require: 'intersection-observer',
        detect: () => 'IntersectionObserver' in window,
      },

      /*
            Feature with detect & install:

            Some polyfills require a installation step
            Hence you could supply a install function which accepts the require result
        */
      {
        require: 'smoothscroll-polyfill',

        // Detection found in source: https://github.com/iamdustan/smoothscroll/blob/master/src/smoothscroll.js
        detect: () =>
          'scrollBehavior' in document.documentElement.style &&
          window.__forceSmoothScrollPolyfill__ !== true,

        // Optional install function called client side after the package is required:
        install: (smoothscroll) => smoothscroll.polyfill(),
      },
    ],
  },

  // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: true,
    theme: {
      dark: false,
      iconfont: 'md',
      theme: {
        primary: '#1776F2',
        secondary: '#3D4759',
        accent: '#82B1FF',
        error: '#FF3D51',
        info: '#2196F3',
        success: '#4CAF50',
        warning: '#FFC107',
        grey: '#616161',
      },
    },
    defaultAssets: {
      icons: false,
    },
  },
  configureWebpack: {
    plugins: [
      new VuetifyLoaderPlugin({
        /**
         * This function will be called for every tag used in each vue component
         * It should return an array, the first element will be inserted into the
         * components array, the second should be a corresponding import
         *
         * originalTag - the tag as it was originally used in the template
         * kebabTag    - the tag normalized to kebab-case
         * camelTag    - the tag normalized to PascalCase
         * path        - a relative path to the current .vue file
         * component   - a parsed representation of the current component
         */
        match(originalTag, { kebabTag, camelTag, path, component }) {
          if (kebabTag.startsWith('core-')) {
            return [
              camelTag,
              `import ${camelTag} from '@/components/core/${camelTag.substring(
                4
              )}.vue'`,
            ]
          }
        },
      }),
    ],
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  

  build: {
    analyze: true,
    extractCSS: true,
    babel: {
      plugins: [['@babel/plugin-proposal-private-methods', { loose: true }]],
    },
  },
}

And here is my package.json file

    {
  "name": "vetution-nuxt-ssr",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint": "yarn lint:js",
    "lint:fix": "eslint --ext .js,.vue . --fix"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/google-adsense": "^1.3.0",
    "@nuxtjs/google-analytics": "^2.4.0",
    "@nuxtjs/gtm": "^2.4.0",
    "@nuxtjs/robots": "^2.5.0",
    "@nuxtjs/sitemap": "^2.4.0",
    "@nuxtjs/vuetify": "^1.11.3",
    "core-js": "^3.9.1",
    "intersection-observer": "^0.12.0",
    "jquery": "^3.6.0",
    "nuxt": "^2.15.3",
    "nuxt-dropzone": "^1.0.4",
    "nuxt-polyfill": "^1.0.3",
    "nuxt-webfontloader": "^1.1.0",
    "redirect-ssl": "^3.0.0",
    "smoothscroll-polyfill": "^0.4.4",
    "store": "^2.0.12",
    "url-polyfill": "^1.1.12",
    "vee-validate": "^3.4.5",
    "vue-slick": "^1.1.16",
    "vue-slick-carousel": "^1.0.6",
    "vuex-persist": "^3.1.3",
    "webpack-node-externals": "^3.0.0"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^4.0.3",
    "@nuxt/image": "^0.5.0",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/eslint-config": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "babel-eslint": "^10.1.0",
    "css-byebye": "^3.0.0",
    "deepmerge": "^4.2.2",
    "dotenv": "^8.6.0",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.7.0",
    "prettier": "^2.2.1",
    "sass": "^1.32.12",
    "sass-loader": "^10.1.1"
  }
}

Answer 1

Reviewing the error message code, I found this on Quickstart using logging tools.

The cause of the 500 error, also known as a server error, is difficult to determine. Look for the logs under Cloud Logging or go straight to the console by clicking this link. Make sure you're in GAE app > your service name > App Engine Version. Begin by checking for an issue that appears when you try to access your program, and then seek for a description of the error cause. If you still can't discover anything, try switching to all logs.

According to the error you are getting, I reviewed some documentation that could probably help you: sdk_gcloud_reference, nuxt_installation.

As I can see on your code, you could try to add on modules as follows:

modules: ['@nuxt/image']`
image: {
 domains: ['https://vetution.online']

Another suggestion that I can provide is to remove the nuxt module from devDependencies.

Adding similar case situation: https://githubmemory.com/repo/nuxt/image/issues/433