Vuetify: [Bug Report] Vuetify not loading using CDN Install example

Created on 3 Jun 2019  路  5Comments  路  Source: vuetifyjs/vuetify

Versions and Environment

Vuetify: 1.5.14
Last working version: 1.5.14
Vue: 2.6.10
Browsers: Chrome 74.0.3729.169
OS: Windows 10

Steps to reproduce

Go to https://vuetifyjs.com/en/getting-started/quick-start#cdn-install

Copy CDN install source code into html file and run.

This used to run as of ~30 minutes ago on Chrome, and about ~20 minutes ago on Firefox

Expected Behavior

Run succesfully

Actual Behavior

Does not load

Reproduction Link

https://codepen.io/anon/pen/QRYxNe

Other comments

I have been working on a vuetify project for at least the past 6 months.
This project has run on an intranet server, localhost, and opening html file locally in chrome.

I have noticed that no errors are given prior to adding the tag.

The following errors are shown when is added:

found in

--->

warn @ vue.js:634
vue.js:1897 TypeError: Cannot read property 'dark' of undefined
at VueComponent.isDark (vuetify.js:415)
at Watcher.get (vue.js:4472)
at Watcher.evaluate (vue.js:4577)
at VueComponent.computedGetter [as isDark] (vue.js:4826)
at VueComponent. (vue.js:518)
at Watcher.get (vue.js:4472)
at new Watcher (vue.js:4461)
at VueComponent.Vue.$watch (vue.js:4936)
at createWatcher (vue.js:4896)
at initWatch (vue.js:4878)
logError @ vue.js:1897
vue.js:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'dark' of undefined"

found in

--->

warn @ vue.js:634
vue.js:1897 TypeError: Cannot read property 'dark' of undefined
at VueComponent.isDark (vuetify.js:415)
at Watcher.get (vue.js:4472)
at Watcher.evaluate (vue.js:4577)
at VueComponent.computedGetter [as isDark] (vue.js:4826)
at VueComponent.themeClasses (vuetify.js:27710)
at Watcher.get (vue.js:4472)
at Watcher.evaluate (vue.js:4577)
at Proxy.computedGetter (vue.js:4826)
at Proxy.render (vuetify.js:422)
at VueComponent.Vue._render (vue.js:3545)

upstream

Most helpful comment

@wannikid i guess it's the vuetify 2.0 version problem. u can sign the specific the version. for example, fall back to v1.5


All 5 comments

Original issue details if helpful, may have missed some information out (was not made using issue creator)

__Vuetify version__: 1.5.14
__Vue version__: 2.6.10
__Browser__: Chrome

I have a vuetify project I have been working on for at least the past 6 months. Within the past hour, the project has not been able to load properly, producing a blank page.

The project template is using the CDN install example within the vuetify documentation located at: https://vuetifyjs.com/en/getting-started/quick-start#cdn-install

It seems even the example itself is now not working. This has occured in the past hour, first in Chrome, followed roughly 5 - 10 minutes later by Firefox. Safari seems to currently still work.

__Reproduction Link__: https://codepen.io/anon/pen/OYdEZY

__My project tested on__:

  • Chrome - FAIL
  • Firefox - SUCCESS at first, now FAILING.
  • Safari - SUCCESS

__Codepen example tested on__:

  • Chrome - FAIL
  • Firefox - FAIL
  • Safari - FAIL

This has been tested on an intranet server and localhost.

No errors are shown _prior_ to the <v-app> tag being added, after which the following errors are shown:

image

[Vue warn]: Error in getter for watcher "isDark": "TypeError: Cannot read property 'dark' of undefined"

found in

---> <VApp>
       <Root>
warn @ vue.js:634
vue.js:1897 TypeError: Cannot read property 'dark' of undefined
    at VueComponent.isDark (vuetify.js:415)
    at Watcher.get (vue.js:4472)
    at Watcher.evaluate (vue.js:4577)
    at VueComponent.computedGetter [as isDark] (vue.js:4826)
    at VueComponent.<anonymous> (vue.js:518)
    at Watcher.get (vue.js:4472)
    at new Watcher (vue.js:4461)
    at VueComponent.Vue.$watch (vue.js:4936)
    at createWatcher (vue.js:4896)
    at initWatch (vue.js:4878)
logError @ vue.js:1897
vue.js:634 [Vue warn]: Error in render: "TypeError: Cannot read property 'dark' of undefined"

found in

---> <VApp>
       <Root>
warn @ vue.js:634
vue.js:1897 TypeError: Cannot read property 'dark' of undefined
    at VueComponent.isDark (vuetify.js:415)
    at Watcher.get (vue.js:4472)
    at Watcher.evaluate (vue.js:4577)
    at VueComponent.computedGetter [as isDark] (vue.js:4826)
    at VueComponent.themeClasses (vuetify.js:27710)
    at Watcher.get (vue.js:4472)
    at Watcher.evaluate (vue.js:4577)
    at Proxy.computedGetter (vue.js:4826)
    at Proxy.render (vuetify.js:422)
    at VueComponent.Vue._render (vue.js:3545)

jsdelivr may be serving the wrong version again. We can't really do anything about this, and it shouldn't be used in production anyway.

  • Peg it to a specific version
  • Use unpkg instead
  • Switch to vue-cli or nuxt

I ran into the same error ("isDark") as mentioned above when migrating to Vuetify 2.0 and using the CDN install option. Then I noticed that I needed to add the code line vuetify: new Vuetify() to my Vue instance. After doing so, my website rendered, although without loading the Vuetify .css file. Now trying again from a different machine, the site is not loading anymore and I get the error TypeError: Vuetify is not a constructor on that previously added code.

In another twist, if I load vuetify.min.js from CDN instead of vuetify.js, the TypeError: Vuetify is not a constructor disappears and the website is rendered, however with broken styles and functionality.

In other words, I agree with @androdnoc that the install instructions for CDN can be improved, e.g. to show an example were the Vue instance is not defined directly in the html file.

@wannikid i guess it's the vuetify 2.0 version problem. u can sign the specific the version. for example, fall back to v1.5


"vuetify": "^1.3.9" . ok

vuetify 2.0 . fail

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gluons picture gluons  路  3Comments

smousa picture smousa  路  3Comments

jofftiquez picture jofftiquez  路  3Comments

itanka9 picture itanka9  路  3Comments

paladin2005 picture paladin2005  路  3Comments