Element: [Bug Report] Nuxt not working with element ui v2.8.0 - ReferenceError: HTMLElement is not defined

Created on 25 Apr 2019  ·  56Comments  ·  Source: ElemeFE/element

Element UI version

2.8.0

OS/Browsers version

Windows 10 / Chrome

Vue version

2.6.10

Nuxt version

2.6.2

Reproduction Link

https://elementui.github.io

Steps to reproduce

image

What is Expected?

None

What is actually happening?

None

picture sonnh58
👍18

Most helpful comment

等待修复。又不想回滚的，可以到node_modules/element-ui/lib/element-ui.common.js 搜索[String, HTMLElement]
改为 {}
image
改之后:
image

暂时没发现什么，先应付着，等官方修复再更新。

picture cnlinjie on 5 May 2019
👍11

All 56 comments

me too

ChenZhuoSteve picture ChenZhuoSteve on 25 Apr 2019

@SimonaliaChen
nuxt做服务端渲染的时候是没有HTMLElement，能否将这个属性声明改为Object?

ChenZhuoSteve picture ChenZhuoSteve on 25 Apr 2019

HTMLElement is not defined break ssr in nuxt.

yoyo837 picture yoyo837 on 25 Apr 2019

{ src: '@/plugins/element-ui', ssr: false }
temp fix problem

magr0s picture magr0s on 25 Apr 2019
👎6 👍1

@magr0s I need it to work properly in ssr.

yoyo837 picture yoyo837 on 25 Apr 2019

@SimonaliaChen
nuxt做服务端渲染的时候是没有HTMLElement，能否将这个属性声明改为Object?

ok, I will fix it

SimonaliaChen picture SimonaliaChen on 25 Apr 2019
❤2

+1

shlima picture shlima on 25 Apr 2019

v 2.8.2 problem remains

magr0s picture magr0s on 25 Apr 2019
👍4

+1

mannv picture mannv on 25 Apr 2019

请问下这个问题什么时候可以修复呀~

sannyzeng picture sannyzeng on 26 Apr 2019

请官方尽快修复哦~

ClassEve picture ClassEve on 26 Apr 2019

use other versions like @2.4.11

ShangZzz picture ShangZzz on 26 Apr 2019
👍1

have same problem

mcmc4519 picture mcmc4519 on 27 Apr 2019

+1

linronglang picture linronglang on 28 Apr 2019

+1， 刚刚看到更新了日历组件，兴冲冲的更新。结果就有些尴尬了

yangfanjie97 picture yangfanjie97 on 28 Apr 2019

请问下这个问题什么时候可以修复呀~

Latter in v2.8.3, please continue to pay attention.

SimonaliaChen picture SimonaliaChen on 28 Apr 2019

If you can't wait, you can roll back the version to v2.7.2.

yoyo837 picture yoyo837 on 28 Apr 2019
👍3

不行哇，最近的版本也报错

grace618 picture grace618 on 28 Apr 2019

{ src: '@/plugins/element-ui', ssr: false }
temp fix problem

thank you. that works.

lazymanso picture lazymanso on 29 Apr 2019

{ src: '@/plugins/element-ui', ssr: false }
temp fix problem

thank you. that works.

建议降级到2.7.2，ssr：false，会导致element的标签无法在服务端渲染

ClassEve picture ClassEve on 29 Apr 2019

我是2.4.11版本都有这问题 加了ssr：false 有没有其他影响啊

xuyaodegithub picture xuyaodegithub on 30 Apr 2019

还有 input框show-word-limit 属性也失效 用不了

xuyaodegithub picture xuyaodegithub on 30 Apr 2019

element-u version2.4.11 使用 create-nuxt-app 初始化项目后执行

npm run dev

就报错 ReferenceError
HTMLElement is not defined,
我把对应文件(element.ui.common.js)的
- scrollContainer: [String, HTMLElement],
+ scrollContainer: [String],

ITxiaochong picture ITxiaochong on 1 May 2019 
  plugins: [
    // 'plugins/element-ui.js'
    {src: '~plugins/element-ui', ssr: false,}
  ],
raylhx picture raylhx on 2 May 2019
👎8

Hi guys, when you plan to make a release with this fix? Thanks

mordonez-me picture mordonez-me on 2 May 2019
👍1

Element-u version2.4.11 not working for me either. HTMLElement is not defined

Martin-Karsten picture Martin-Karsten on 5 May 2019

+1

cnlinjie picture cnlinjie on 5 May 2019

等待修复。又不想回滚的，可以到node_modules/element-ui/lib/element-ui.common.js 搜索[String, HTMLElement]
改为 {}
image
改之后:
image

暂时没发现什么，先应付着，等官方修复再更新。

cnlinjie picture cnlinjie on 5 May 2019
👍11

I still have this error with 2.4.11 too.

nestarz picture nestarz on 5 May 2019

It still does not work.

terwer picture terwer on 5 May 2019

I had the same problem, but when i changed the version to 2.4.11, it woked.

Those who say no, are you sure you've removed the '^' sign in package.json ?

day-after-day picture day-after-day on 6 May 2019
👍1

@day-after-day you are right. Removing '^' solves the issue

Martin-Karsten picture Martin-Karsten on 6 May 2019

I fixed removed '^' in package.json and renamed the code in nuxt_config.js

plugins: [
    {src: '~plugins/element-ui', ssr: false,}
 ],
nagipan777 picture nagipan777 on 8 May 2019

I don't think set ssr: false is the best solution.
I'm waiting for next release v2.8.3

nghiepit picture nghiepit on 8 May 2019
👍4

Me too.

Marco Ordoñez

Director

[email protected] ( [email protected] )

evolbit.net
( http://www.evolbit.net/ )

/

facebook.com/evolbit
( http://www.facebook.com/evolbit )

/

blog.evolbit.net
( http://blog.evolbit.net/ )

PE
Calle Las Gaviotas 109 of 7, Surquillo. Lima, Perú. | Tel: 975 241 383 ( tel://975241383 )

On May 8, 2019 at 2:27 AM, Nghiệp ([email protected]) wrote:

I don't think set ssr: false is the best solution.
I'm waiting for next release v2.8.3
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub ( https://github.com/ElemeFE/element/issues/15261#issuecomment-490379312 ), or mute the thread ( https://github.com/notifications/unsubscribe-auth/AARDL6WHJOAHPHETNZAUWYTPUJ6F3ANCNFSM4HIKS7KA ).

[image: ]

mordonez-me picture mordonez-me on 8 May 2019

啥时候解决啊

maimai123 picture maimai123 on 9 May 2019

美女杭州的 ？

xuyaodegithub picture xuyaodegithub on 9 May 2019

@xuyaodegithub 请私信撩妹。

yoyo837 picture yoyo837 on 9 May 2019

//element-ui.js
import Vue from 'vue'

export default () => {
if (process.browser) {
//console.log('浏览器端渲染');
Vue.use(require('element-ui'),require('element-ui/lib/locale/lang/en'))
} else {
//console.log("非浏览器端渲染");
}
}

landejin2016 picture landejin2016 on 9 May 2019

😳？

发自我的 iPhone

在 2019年5月9日，11:02，Amumu notifications@github.com 写道：

@xuyaodegithub 请私信撩妹。

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

maimai123 picture maimai123 on 9 May 2019

可能是个女生头像的帅哥呢，笑出声~~

landejin2016 picture landejin2016 on 9 May 2019

+1

KevinFan520 picture KevinFan520 on 9 May 2019

啥时候解决啊

同问

terwer picture terwer on 9 May 2019

{ src: '@/plugins/element-ui', ssr: false }
temp fix problem

如果你设置了ssr=false那你可以抛弃服务端渲染了

lanxuebao picture lanxuebao on 14 May 2019
👍1

综上，package.json 里锁定版本，不要用最新的就可以。
"element-ui": "~2.4.11"

52admln picture 52admln on 15 May 2019
👍4 ❤1

modify nuxt.config.js plugins part as below:

  plugins: [
    {src: '@/plugins/element-ui', mode: 'client'}
  ]

[email protected]
[email protected]

xiaoxiaocoder picture xiaoxiaocoder on 21 May 2019

This will avoid ssr right?

On May 21, 2019 at 4:13 AM, Andy ([email protected]) wrote:

modify nuxt.config.js plugins part as below:
plugins: [
{src: '@/plugins/element-ui', mode: 'client'}
]
[email protected]
[email protected]
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub ( https://github.com/ElemeFE/element/issues/15261?email_source=notifications&email_token=AARDL6VQJZRBZDSGA53N3TTPWO4L3A5CNFSM4HIKS7KKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODV3I3TI#issuecomment-494308813 ), or mute the thread ( https://github.com/notifications/unsubscribe-auth/AARDL6U3YIS6EPZYZRSACV3PWO4L3ANCNFSM4HIKS7KA ).

[image: ]

mordonez-me picture mordonez-me on 21 May 2019

This will avoid ssr right? On May 21, 2019 at 4:13 AM, Andy ([email protected]) wrote: modify nuxt.config.js plugins part as below: plugins: [ {src: '@/plugins/element-ui', mode: 'client'} ] [email protected] [email protected] — You are receiving this because you commented. Reply to this email directly, view it on GitHub ( #15261?email_source=notifications&email_token=AARDL6VQJZRBZDSGA53N3TTPWO4L3A5CNFSM4HIKS7KKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODV3I3TI#issuecomment-494308813 ), or mute the thread ( https://github.com/notifications/unsubscribe-auth/AARDL6U3YIS6EPZYZRSACV3PWO4L3ANCNFSM4HIKS7KA ). [image: ]

yes, client means client only, not work in server side render.
see: https://nuxtjs.org/guide/plugins

52admln picture 52admln on 22 May 2019

哪些说mode: 'client'或ssr=false的人，你可以不用服务端渲染了，你把nuxt的初衷都抛弃了，干脆回归纯vue得了。网络爬虫根本爬不到你的网站样子，因为你已经变成客户端渲染了。根本的解决办法就是在package.json固定死element-ui低于2.8.2即可。

lanxuebao picture lanxuebao on 22 May 2019
👍4

And it’s planned to work in the future?

On May 21, 2019 at 9:49 PM, WangYingjie ([email protected]) wrote:

This will avoid ssr right? On May 21, 2019 at 4:13 AM, Andy ([email protected]) wrote: modify nuxt.config.js plugins part as below: plugins: [ {src: '@/plugins/element-ui', mode: 'client'} ] [email protected] [email protected] — You are receiving this because you commented. Reply to this email directly, view it on GitHub ( #15261 ( https://github.com/ElemeFE/element/issues/15261 )?email_source=notifications&email_token=AARDL6VQJZRBZDSGA53N3TTPWO4L3A5CNFSM4HIKS7KKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODV3I3TI#issuecomment-494308813 ), or mute the thread ( https://github.com/notifications/unsubscribe-auth/AARDL6U3YIS6EPZYZRSACV3PWO4L3ANCNFSM4HIKS7KA ). [image: ]
yes, client means client only, not work in server side render.
see: https://nuxtjs.org/guide/plugins
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub ( https://github.com/ElemeFE/element/issues/15261?email_source=notifications&email_token=AARDL6QNYZSHYCCBH636BQLPWSYE5A5CNFSM4HIKS7KKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODV5XUPI#issuecomment-494631485 ), or mute the thread ( https://github.com/notifications/unsubscribe-auth/AARDL6QXSVF3EYKCNIL6YTDPWSYE5ANCNFSM4HIKS7KA ).

[image: ]

mordonez-me picture mordonez-me on 22 May 2019

When is the release planned for version 2.8.3?

arcadesso picture arcadesso on 22 May 2019

When is the release planned for version 2.8.3?

同问，紧急啊，影响特别大，整个项目无法运行啊。

terwer picture terwer on 23 May 2019
👎3

me too.

znnnnn picture znnnnn on 27 May 2019

+1

zwmmm picture zwmmm on 19 Jun 2019

me too, and when this can be fixed？

georgezouq picture georgezouq on 26 Jul 2019

me too, and when this can be fixed？

Try latest version.

SimonaliaChen picture SimonaliaChen on 26 Jul 2019
🎉2 👍2 🚀1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

EdenSpark picture EdenSpark  ·  3Comments
FranzSkuffka picture FranzSkuffka  ·  3Comments
fscardua picture fscardua  ·  3Comments
smallpath picture smallpath  ·  3Comments
chenzhe-pro picture chenzhe-pro  ·  3Comments