Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Nuxt Hot reloading for new components Is not working

Nuxt hot reloading somehow works for old components, but any new components that I have created today, doesn’t seem to be watched by the app, and doesn’t reload. I have to restart the app each time to see the changes applied to these new files.

The machine that I am using is MacOs latest Mojave system.
I realized people might ask for the package.json file so here is the file

{
  "name": "theta",
  "version": "1.0.0",
  "description": "My fabulous Nuxt.js project",
  "private": true,
  "scripts": {
    "dev": "NUXT_HOST=0.0.0.0 NUXT_PORT=3333 nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "devHttps": "node server/index.js"
  },
  "dependencies": {
    "@clampy-js/vue-clampy": "^1.0.6",
    "@fortawesome/free-brands-svg-icons": "^5.9.0",
    "@fortawesome/free-solid-svg-icons": "^5.9.0",
    "@nuxtjs/auth": "^4.7.0",
    "@nuxtjs/axios": "^5.5.4",
    "@nuxtjs/component-cache": "^1.1.5",
    "@nuxtjs/dotenv": "^1.3.0",
    "@nuxtjs/google-adsense": "^1.1.3",
    "@nuxtjs/google-analytics": "^2.2.0",
    "@nuxtjs/moment": "^1.2.0",
    "@nuxtjs/pwa": "^2.6.0",
    "@nuxtjs/robots": "^2.2.0",
    "@nuxtjs/style-resources": "^0.1.2",
    "@nuxtjs/svg-sprite": "^0.2.1",
    "@nuxtjs/toast": "^3.2.1",
    "@nuxtjs/vuetify": "^0.5.6",
    "@sum.cumo/nuxt-styleguide": "^5.3.0",
    "atob": "^2.1.2",
    "axios": "^0.19.0",
    "browserslist": "^4.6.2",
    "caniuse-lite": "^1.0.30000974",
    "chart.js": "^2.8.0",
    "cookie": "^0.3.1",
    "cookie-parser": "^1.4.4",
    "cookie-universal-nuxt": "^2.0.16",
    "cross-env": "^5.2.0",
    "echarts": "^4.2.1",
    "element-ui": "^2.9.1",
    "epic-spinners": "^1.1.0",
    "fstream": "^1.0.12",
    "imagemagick": "^0.1.3",
    "intersection-observer": "^0.5.1",
    "js-yaml": "^3.13.1",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.11",
    "lodash-es": "^4.17.11",
    "moment": "^2.24.0",
    "nuxt": "^2.8.1",
    "nuxt-compress": "^1.0.2",
    "nuxt-device-detect": "^1.1.5",
    "nuxt-fontawesome": "^0.4.0",
    "nuxt-stripe-module": "^2.0.0",
    "nuxt-universal-storage": "^0.2.0",
    "nuxt-validate": "^0.1.3",
    "nuxt-webfontloader": "^1.1.0",
    "swiper": "^4.5.0",
    "tar": "^4.4.10",
    "tb-skeleton": "^0.3.6",
    "uuid": "^3.3.2",
    "v-charts": "^1.19.0",
    "v-click-outside-x": "^3.7.1",
    "vee-validate": "^2.2.10",
    "vue": "^2.6.10",
    "vue-avatar-editor-improved": "^1.0.4",
    "vue-awesome-swiper": "^3.1.3",
    "vue-chartjs": "^3.4.2",
    "vue-clamp": "^0.2.1",
    "vue-count-to": "^1.0.13",
    "vue-croppa": "^1.3.8",
    "vue-infinite-loading": "^2.4.4",
    "vue-line-clamp": "^1.3.2",
    "vue-loaders": "^2.0.0",
    "vue-match-media": "^1.0.3",
    "vue-scrollama": "^1.1.1",
    "vue-scroller": "^2.2.4",
    "vue-scrollto": "^2.15.0",
    "vue-server-renderer": "^2.6.10",
    "vue-swipe-tab": "^2.0.4",
    "vue-template-compiler": "^2.6.10",
    "vue-text-dot": "^1.0.0",
    "vue-the-mask": "^0.11.1",
    "vue-tiny-lazyload-img": "^0.1.0",
    "vue-truncate-collapsed": "^2.1.0",
    "vue-zondicons": "^0.1.10",
    "vue2-datepicker": "^2.11.2",
    "vue2-editor": "^2.8.1",
    "vue2-touch-events": "^1.1.2",
    "vuetify-loader": "^1.2.2",
    "vuetify-upload-button": "^1.2.2",
    "vuex-router-sync": "^5.0.0"
  },
  "devDependencies": {
    "autoprefixer": "^9.6.0",
    "css-loader": "^2.1.1",
    "moment-locales-webpack-plugin": "^1.0.7",
    "node-sass": "^4.12.0",
    "nodemon": "^1.19.1",
    "postcss-gap-properties": "^2.0.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2"
  }
}

Here is my nuxt config file

const pkg = require('./package')
const webpack = require('webpack')
require('dotenv').config()

module.exports = {
  mode: 'universal',

  /*
   ** Headers of the page
   */
  head: {
    title: 'ノーブル',
    meta: [{
        charset: 'utf-8'
      },
      {
        name: 'viewport',
        content: 'width=device-width, initial-scale=1,minimum-scale=1, maximum-scale=1'
      },
      {
        hid: 'description',
        name: 'description',
        content: '小説家・読者のプラットフォーム'
      }
    ],
    link: [{
      rel: 'icon',
      type: 'image/x-icon',
      href: '/favicon.ico'
    }],
    script: [{
      src: '/js/fb-sdk.js'
    }, {
      src: '/js/gg-sdk.js'
    }]
  },

  /*
   ** Customize the progress-bar color
   */
  loading: {

    color: '#af9bd0',
    height: '3px',
    continuous: true
  },
  generate: {
    routes: [
      '/ads.txt',
    ]
  },
  /*
   ** Global CSS
   */
  css: [
    'element-ui/lib/theme-chalk/index.css',
    'swiper/dist/css/swiper.css',
    "assets/css/index.css",
    "assets/css/main.scss",
    'vue-loaders/dist/vue-loaders.css'
  ],

  /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    '@/plugins/element-ui',
    '@/plugins/intercept',
    {
      src: '~plugins/vue-star-rating',
      ssr: false
    },
    {
      src: '~/plugins/swiper',
      ssr: false
    },
    {
      src: '~/plugins/intercept',
      ssr: false
    },
    {
      ssr: false,
      src: '~/plugins/avatar'
    },
    {
      ssr: false,
      src: "~plugins/clickOutside"
    }, {
      ssr: false,
      src: "~plugins/vueEditor"
    }, {
      src: '@/plugins/vueMask',
      ssr: false
    }, {
      src: '@/plugins/zondiIcon',
      ssr: false
    }, {
      src: '@/plugins/elementLoading',
      ssr: false
    }, {
      src: '@/plugins/vue-swipe-tab',
      ssr: false
    },
    {
      src: '@/plugins/pull-to',
      ssr: false
    },
    {
      src: '@/plugins/datePicker',
      ssr: false
    }, {
      src: '@/plugins/vuelineclamp',
      ssr: false
    }, {
      src: '@/plugins/graphs',
      ssr: false
    }, {
      src: '@/plugins/infinite',
      ssr: false
    }, {
      src: '@/plugins/vueClamp',
      ssr: false
    }, {
      src: '@/plugins/watchMedia',
      ssr: false
    }, {
      src: '@/plugins/scrollama',
      ssr: false
    }, {
      src: '@/plugins/countTo',
      ssr: false
    }, {
      src: '@/plugins/chartLine',
      ssr: false
    }, {
      src: '@/plugins/skeleton',
      ssr: false
    }, {
      src: '@/plugins/gAuth',
      ssr: false,
    }, {
      src: '@/plugins/epicSpinners',
      ssr: false,
    },
    {
      src: '@/plugins/auth',
    }

  ],

  /*
   ** Nuxt.js modules
   */
  modules: [
    ['@nuxtjs/vuetify', {
      treeShake: true
    }],
    '@nuxtjs/pwa',
    'nuxt-device-detect',
    'nuxt-webfontloader',
    '@nuxtjs/axios',
    '@nuxtjs/dotenv',
    '@nuxtjs/svg-sprite',
    '@nuxtjs/style-resources',

    ['nuxt-validate', {
      lang: 'ja',
    }],
    ['@nuxtjs/robots', {
      UserAgent: '*',
      Disallow: '/',
      UserAgent: 'Googlebot',
      Disallow: '',
      UserAgent: 'Yahoo-slurp',
      Disallow: '',
      UserAgent: 'Msnbot',
      Disallow: ''
    }],
    ['@nuxtjs/moment', {
      locales: ['ja'],
      defaultLocale: 'ja'
    }],
    ['@nuxtjs/component-cache', {
      maxAge: 1000 * 60 * 60
    }],
    ['@nuxtjs/google-adsense', {
      id: 'pub-4438410171989811'
    }],
    'cookie-universal-nuxt',
    ['nuxt-fontawesome', {
      component: 'fa',
      imports: [{
        set: '@fortawesome/free-solid-svg-icons',
        icons: ['fas']
      }, {
        set: '@fortawesome/free-brands-svg-icons',
        icons: ['fab']
      }]
    }],
    ['@nuxtjs/google-analytics', {
      id: 'UA-119733183-2',
      autoTracking: {
        page: false
      }
    }],
    ['nuxt-universal-storage', {
      storage: {
        vuex: true, // boolean or {namespace} 
        localStorage: true, // boolean or {prefix } 
        cookie: true, // boolean or {prefix, options } 
        initialState: {}, // Object {}
        ignoreExceptions: true // 
      }
    }],
    ['@nuxtjs/dotenv', {
      /* module options */
    }],
    ['@nuxtjs/toast', {
      position: 'top-right',
      duration: 5000
    }],
    ['nuxt-stripe-module', {
      publishableKey: process.env.STRIPE_KEY,
      version: 'v3', // Default
    }],
    "nuxt-compress",
  ],
  /*
   ** Axios module configuration
   */
  axios: {
    baseURL: process.env.SERVER_URL || 'http://0.0.0.0:5000/api',
    credentials: false,
    proxyHeaders: false
  },

  auth: {
    strategies: {
      google: {
        client_id: process.env.GOOGLE_CLIENT_ID,
        user: false,
        redirect_uri: 'http://127.0.0.1:3000/'
      },
      facebook: {
        client_id: process.env.FACEBOOK_CLIENT_ID,
        userinfo_endpoint: false,
        scope: ['public_profile', 'email'],
        redirect_uri: 'https://tolocalhost.com/'
      },
      local: {
        _scheme: '~/auth/local.js',
        endpoints: {
          login: {
            url: 'auth/login',
            method: 'post',
            propertyName: false
          },
          user: {
            url: 'user/show',
            method: 'get',
            propertyName: false
          },
          logout: false
        }
      }
    },
    redirect: {
      login: '/auth/login',
      logout: '/',
      callback: '/',
      home: '/'
    },
    plugins: ['~/plugins/auth.js']
  },
  router: {
    middleware: ['auth'],
    linkActiveClass: 'active-link'
  },
  webfontloader: {
    google: {
      families: ['IBM Plex Sans:300,400,700', 'Noto Sans JP:400,500', 'Sniglet:400,800'] //Loads Lato font with weights 400 and 700
    }
  },
  'manifest': {
    name: 'ノーブル　小説',
    short_name: 'ノーブル',
    lang: 'ja'
  },
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {

    },
    splitChunks: {
      layouts: true
    },
    styleResources: {
      sass: ['./assets/css/abstracts/main.scss']
    },
    transpile: ['vue-clamp', 'resize-detector'],
    postcss: {
      plugins: [
        require('postcss-gap-properties')(),
        require('autoprefixer')({
          grid: true,
          flexbox: true,
          stats: {
            warnings: false
          }
        })
      ]

    },
    plugins: [new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    })]
  },
  server: {
    port: process.env.CLIENT_PORT || 4000, // default: 3000
    host: process.env.API_HOST || '0.0.0.0', // default: localhost
  },
}

I’ve searched everywhere online for the answer but none that seemed close to my current situation.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Oh I got it, it seems like there was a misspelling in importing of the component, and thus wasn't connected to the main nuxt network, meaning the component doesn't adhere to the hot reloading watched file.


  2. 0

    Had the problem of hot reload not working.
    Solved that by adding

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

    in the nuxt.config.js file.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search