0

I have an existing Nuxtjs app which using JQuery and some other librries, It's working fine when ssr is disabled, But I am trying to switch SSR from false to true in nuxt.config.js

and I am getting this error Window is not defined

and because the project is already built with many components and a lot of packages so I am not able to put process.client or use the tag in every component , or even check which package using the window object so I can include it in the plugins array.

Is there any global solution for all packages and all components ?

here's my nuxt.config.js file

require('dotenv').config()

export default {
  server: {
    port: process.env.PROD === '1' ? '3000' : '3030',
  },
  head: {
    title: 'My app',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'og:image',
        name: 'og:image',
        property: 'og:image',
        content: 'icon.png',
      },
      {
        hid: 'description',
        name: 'description',
        content: 'My app Desc',
      },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/icon.png' }],
  },
  ssr: true,
  target: 'server',
  css: ['~/assets/less/theme.less'],
  plugins: [
    { src: '@/plugins/antd-ui', ssr: false, mode: 'client' },
    { src: '@/plugins/vue2-google-maps', ssr: false, mode: 'client' },
    { src: '@/plugins/notifications', ssr: false, mode: 'client' },
    { src: '@/plugins/validation', ssr: false, mode: 'client' },
    { src: '@/plugins/mask', ssr: false, mode: 'client' },
    { src: '@/plugins/moment', ssr: false, mode: 'client' },
    { src: '@/plugins/charts', ssr: false, mode: 'client' },
    { src: '@/plugins/sortable', ssr: false, mode: 'client' },
    { src: '@/plugins/lazyLoad', ssr: false, mode: 'client' },
    { src: '@/plugins/click-outside', ssr: false, mode: 'client' },
    { src: '@/plugins/jquery.js', ssr: false, mode: 'client' },
  ],
  components: true,
  buildModules: [['@nuxtjs/router', { keepDefaultRouter: true }]],

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/dotenv',
    'cookie-universal-nuxt',
    'vue-toastification/nuxt',
    'nuxt-client-init-module',
  ],

  toast: {
    timeout: 2000,
    draggable: true,
    position: 'bottom-left',
  },

  axios: {
    baseURL:
      process.env.PROD === '1'
        ? process.env.BASE_URL
        : process.env.BASE_URL_DEV,
    browserBaseURL:
      process.env.PROD === '1'
        ? process.env.BASE_URL
        : process.env.BASE_URL_DEV,
  },
  build: {
    transpile: [
      'vue2-google-maps',
      'validation',
      'vee-validate/dist/rules',
      'mask',
      'moment',
      'chart',
      'sortable',
    ],
    loaders: {
      less: {
        lessOptions: {
          javascriptEnabled: true,
        },
      },
    },
    vendor: ['vue2-google-maps'],
  },
  router: {},
  generate: {
    routes: [
      '/mynapp/profile/',
      '/user-dashboard',
      '/my-app-agents',
      '/app/companies',
      '/app/employees',
    ],
  },
}
kissu
  • 40,416
  • 14
  • 65
  • 133
  • Hi, no secret sauce here. This kind of thing needs to be thought ahead of time. And it also depends of your project (what you're using exactly). Also `ssr: false` is obsolete, you can just keep `mode: 'client'`. – kissu May 30 '22 at 18:45
  • This is how to use [jQuery properly](https://stackoverflow.com/a/68414170/8816585). – kissu May 30 '22 at 18:46

0 Answers0