ant-design-vue with Nuxt server-side rendering throws "window is not defined"

Created on 28 Jan 2019 · 6Comments · Source: vueComponent/ant-design-vue

[x] I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.3.3

Environment

macOS 10.14, Firefox 66.0b1, Nuxt 2.4.0, Vue 2.4.0

Reproduction link

https://github.com/LavraHQ/ant-design-vue-repro-window

Steps to reproduce

Follow instructions in readme to start Nuxt project, navigate to localhost:3000, and the error will appear along with the stack trace pointing to antd.js as the issue.

What is expected?

Before using window, a check for if window is defined should be done, avoiding this issue for those who use Vue via SSR.

What is actually happening?

An error is displayed because window is attempted to be used prior to window being available.

This does not happen in 1.2.5, so I'm guessing it is something new in one of the latest commits. We can enable client-only rendering for ant-design-vue, however, if we do that the page will render once it is downloaded which causes the elements to look off for a few seconds and provides a bad user experience.

outdated

Source

plunkettscott

Most helpful comment

This is because webpack issue.
@plunkettscott you can use import Ant from 'ant-design-vue/lib' like @UltimateLam.
In the next version, we will solve it.

tangjinzhou on 30 Jan 2019

👍3

All 6 comments

import Ant from 'ant-design-vue/lib'

UltimateLam on 29 Jan 2019

https://github.com/webpack/webpack/pull/8625

tangjinzhou on 30 Jan 2019

This is because webpack issue.
@plunkettscott you can use import Ant from 'ant-design-vue/lib' like @UltimateLam.
In the next version, we will solve it.

tangjinzhou on 30 Jan 2019

👍3

@tangjinzhou it works but it when using all components. does not work when using import on demand.

Uncaught TypeError: Cannot read property 'install' of undefined

import {
  Button,
  Tooltip,
  Table,
  Pagination,
  Form,
  Input,
  Icon,
  Checkbox,
  Spin,
  Menu,
  Layout,
  Drawer,
  Breadcrumbs
} from 'ant-design-vue/lib'

Vue.use(Button)
Vue.use(Tooltip)
Vue.use(Table)
Vue.use(Pagination)
Vue.use(Form)
Vue.use(Input)
Vue.use(Icon)
Vue.use(Checkbox)
Vue.use(Spin)
Vue.use(Menu)
Vue.use(Layout)
Vue.use(Drawer)
Vue.use(Breadcrumbs)