Static GitHub Issues

[2868] global components non rendered properly on production build?

prev: 404 ResourceNotFound (ttf, woff, svg)
next: HMR stops working (ERR_CONNECTION_RESET), requires server restart every time

Hi there!

I just experiencing an issue that global components that defined in plugins/ directory doesn't seems to work on production build.

nuxt-1

left : build & run on production mode right : run development server

I've assure that this issue only happened on client side rendering because i've check the server side rendering seems to work just fine.

image

The global component <app-main /> is registered on /plugins/global-components.js file here

nuxt-2

and here my nuxt.config.js file

'use strict'

const { resolve } = require('path')
const Env = use('Env')

module.exports = {
  build: {
    publicPath: Env.get('CDN_URL', '/'),

    analyze: {
      analyzerMode: 'static',
      generateStatsFile: true,
      statsFilename: 'webpack-stats.json'
    },

    extractCSS: true,

    postcss: {
      plugins: {
        'postcss-custom-properties': false
      }
    }
  },

  css: [
    '~assets/scss/main.scss'
  ],

  head: {
    htmlAttrs: {},

    meta: [
      {
        charset: 'utf-8'
      },
      {
        name: 'viewport',
        content: 'width=device-width,initial-scale=1'
      },
      {
        'http-equiv': 'x-ua-compatible',
        content: 'ie=edge,chrome=1'
      },
      {
        name: 'theme-color',
        content: '#ffffff'
      }
    ],

    link: [
      {
        rel: 'shortcut icon',
        type: 'image/x-icon',
        href: '/favicon.ico'
      },
      {
        rel: 'apple-touch-icon',
        size: '192x192',
        href: '/mobile-icon.png'
      },
      {
        rel: 'icon',
        type: 'image/png',
        size: '192x192',
        href: '/mobile-icon.png'
      },
      {
        rel: 'icon',
        type: 'image/png',
        size: '32x32',
        href: '/favicon.png'
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css?family=Montserrat:300,400,600'
      }
    ],

    noscript: [{
      innerHtml: `
      <h1>Javascript Disabled</h1>
      <p>It appears that you do not have Javascript enabled. This application relies on Javascript for most of our features.<p>
      <p>Please enable Javascript and <a href=".">reload</a> in order to use this site.</p>
    `}]
  },

  loading: {
    color: '#589d8d'
  },

  plugins: [
    '~/plugins/global-components.js'
  ],

  router: {
    base: '/',
    linkActiveClass: '',
    linkExactActiveClass: 'is-active',

    scrollBehaviour: () => ({
      x: 0,
      y: 0
    }),

    extendRoutes: (routes) => {
      routes.forEach((route) => {
        route.meta = {
          title: route.name
        }
      })
    }
  },

  buildDir: resolve(__dirname, '..', 'public'),
  srcDir: resolve(__dirname, '..', 'resources')
}
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2492">#c2492</a>)</em></sub></div>