Vue website complains that JavaScript isn't enabled after Vuetify is added

Question

So this is abit of a tough one for me as this is a new learning curve and I'm not entirely sure how to debug it.

I'm following a tutorial listed Here but I made to to where we add navigation to the main page and started up the app to see how it looks and noticed a blank page. I copied the tutorial code eventually and double checked my javascript settings and ensured it is on. I started a new project and it worked fine showing the base template but after adding Vuetify, the page turned blank with

We're sorry but meal-prep doesn't work properly without JavaScript enabled. Please enable it to continue.

in the console.

I know questions like this are not allowed but I'm not quite sure what else to look for.

If someone could point me in the right position or needs to see any specific file, ill add it. Thanks

Going in order of @skirtle questions, I created the project by using vue create in my terminal. I started the app after that and it showed the default Vue home page. I then stopped the server then installed Vuetify by using vue add vuetify. After this however is when my problem starts. I started up the app again and the default vue home page is just a blank page and the html in the dev console is as follows.

There were no changes made besides installing this plugin.

My versions are as follows

• Vue - [email protected]
• Vue CLI - @vue/cli 4.0.5
• Vuetify - [email protected]

I'm getting a warning in my VSCode terminal, which states

warning in ./src/plugins/vuetify.js

"export 'default' (imported as 'Vuetify') was not found in 'vuetify'

And in my web console

Uncaught TypeError: Cannot read property 'extend' of undefined at Module.srcMixinsThemeableIndexTs (vuetify.js?ce5b:33332) at webpack_require (vuetify.js?ce5b:30) at Module.srcComponentsVAppVAppTs (vuetify.js?ce5b:380) at webpack_require (vuetify.js?ce5b:30) at Module.srcComponentsVAppIndexTs (vuetify.js?ce5b:465) at webpack_require (vuetify.js?ce5b:30) at Module.srcComponentsIndexTs (vuetify.js?ce5b:28810) at webpack_require (vuetify.js?ce5b:30) at Module.srcIndexTs (vuetify.js?ce5b:30337) at webpack_require (vuetify.js?ce5b:30)

I hope this gives a better insight to my problem.

Answer 1

I was able to reproduce the same problem with Vue CLI 3.8.4.

It would seem that you're running into an incompatible combination of options. I don't exactly know where the fault lies but the tutorial you are using encourages a lot of custom configuration options, which makes it more likely you'll fall through a crack. It also makes it much more difficult to give an answer as the answer to some extent depends on exactly what combination of options you choose.

Nevertheless there does seem to be a bug somewhere here, though I'm unclear exactly which bit it buggy. My guess would be the Vuetify CLI plugin.

This bug report seems somewhat related:

https://github.com/vuetifyjs/vuetify/issues/9184

The simplest way to fix it seemed to be to edit the file vue.config.js and remove the line:

transpileDependencies: ["vuetify"]

However, that's no good if you actually do want to transpile Vuetify.

This is where it gets really complicated and it depends a lot on exactly what settings you want.

In the file src/plugins/vuetify.js you should find two lines like this:

import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

That won't work with transpiling.

There are a few possible ways to go here but try changing them to:

import Vuetify from "vuetify/lib";

If you start the server you may see another error:

Failed to resolve loader: sass-loader

You may need to install it.

There are some instructions for how to solve that problem in the Vuetify installation guide:

https://vuetifyjs.com/en/getting-started/quick-start#webpack-installation

However, rather than trying to do all of this manually, you will likely find it easier to go back to the CLI and create a project with a different combination of options. Without spending hours and hours trying all the different permutations I can't say for sure exactly what does and doesn't work but from a quick experiment it seemed that enabling CSS Pre-processors during the project creation makes the sass-loader error go away.

Answer 2

It happened the same to me and I realized that I had only download it in the CLI complements but forgot to add it. To do so write in the terminal:

vue add vuetify