More than 5 years have passed since last update.

【Nuxt.js】create-nuxt-appする際、element-uiを追加すると出るreference errorの対処法

Last updated at 2019-05-10Posted at 2019-05-10

Nuxt.jsの新しいプロジェクトを立ち上げる際、UIフレームワークのelement-uiを追加し、create-nuxt-appのコマンドを使って行ったのですが、サーバの立ち上げでエラーが発生してしまったのでその対処法を書いておきます。

create-nuxt-appでプロジェクトを立ち上げる

普段通りcreate-nuxt-appでプロジェクトを立ち上げ、いくつかの質問に答えていきます。

$ create-nuxt-app <your-project-name>

しばらくすると、インストールが完了し、サーバの起動が促されます。

To get started: 

$ cd your-nuxt-app 
$ yarn dev

指示されるようにコマンドを叩くと、いつものようにNuxtのトップページが表示されるはずです。

ところが、今回同様に実行したところ、サーバが正常に起動しないエラーが発生しました。HTMLElement is not definedというreference errorが発生した模様です。

調べてみると、原因は/node-modules/element-ui/lib/element-ui.common.jsの記述にありました。どうやらこのpropsで渡されている、scrollContainerに問題があるとのこと。

element-ui.common.js

props: {
    src: String,
    fit: String,
    lazy: Boolean,
    scrollContainer: [String, HTMLElement], //この記述が問題
    alt: String
  },

実はこれ、以下のissueでelement ui側ですでに解決しているようです。
https://github.com/ElemeFE/element/pull/15277

ということで、プルリクにあるように、以下のようにelement-ui.common.jsの記述に修正を加えました。

element-ui.common.js

-     scrollContainer: [String, HTMLElement],
+     scrollContainer: {},

すると、無事サーバば正常に起動し、いつものNuxt.jsの画面が表示されました。

めでたしめでたし。