window undefined

[usb248]

I recently upgraded my version of vue-nl2br and i get an error : window undefined. Please fix this please. (i need to use this component for SSR)

Thanks

[HugoHeneault]

A workaround for SSR (nuxt) is to load vue-nl2br with

import Nl2br from 'vue-nl2br/src/main'

Works for me!

[usb248]

thanks @HugoHeneault but it doesn't work :

import Nl2br from 'vue-nl2br/src/main'
Vue.component('nl2br', Nl2br)

i get an error :

SyntaxError
Unexpected identifier

[HugoHeneault]

Where does this error come from? Browser or server? Which nuxt version do you use?

[usb248]

Server during the compilation, i use the last version 2.8.1..

[HugoHeneault]

Weird. It's working for me :/ Do you have babel set up ? Have a look there: https://fr.nuxtjs.org/api/configuration-build/

[usb248]

strange...yeah see :

  build: {
    cssSourceMap: false,
    extractCSS: process.env.NODE_ENV == 'production',
    plugins: [
      new VuetifyLoaderPlugin()
    ],
    transpile: ['vuetify/lib'],
    babel: {
      presets({ isServer }) {
        return [
          [
            require.resolve('@nuxt/babel-preset-app'),
            {
              targets: isServer
                ? { node: 'current' }
                : { browsers: ['last 2 versions'], ie: 11 },
              corejs: { version: 3 }
            }
          ]
        ]
      }
    }
  }

[HugoHeneault]

You need to add vue-nl2br to the transpiled libs. 🧐

[usb248]

Why i need to transpile vue-nl2br ? (it works now !)

[HugoHeneault]

Most of the time you're loading transpiled libs. But this one doesn't work with your env. So you're loading the sources, but nuxt isn't able to load es6 sources, so you need to transpile them to something it can run. :)

[usb248]

hmmm, so, for example, i use lru-cache for client side cache request in nuxt. In 4.x version there is an ES5 version of the package, but in 5.X, there is no anymore. If i want to use 5.x version (https://github.com/isaacs/node-lru-cache/blob/master/index.js), i just need to add 'lru-cache' in transpile array in nuxt config file ?

[usb248]

Hmmm i tested in IE11, the script fails (vue-nl2br) in client side....

[Lecraminos]

Two years later, but I still came across this issue. As 'window' is only defined on the client side in Nuxt, you may consider putting the nl2br component into a plugin that is only loaded on the client side:

• create plugins/nl2br.js

import Vue from 'vue'
import Nl2br from 'vue-nl2br'

Vue.component('Nl2br', Nl2br)

• in nuxt.config.js add a respective item into the plugin array

plugins: [
    { src: '@/plugins/nl2br', mode: 'client' },
],

Nl2Br can then be used as <nl2br ... /> in whichever component you want.