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

4
votes

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.

enter image description here

There were no changes made besides installing this plugin.

My versions are as follows

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.

2
javascriptvue.jsvuetify.js
Do you mean 'in the console', not just in the page? Is there anything else in the console? When you say 'after adding Vuetify', what exactly did you do? What was the last change you made when it went from working to not working? There have been new major versions released of both Vue CLI and Vuetify since that tutorial was written so you may want to consult with the latest relevant documentation. – skirtle
The page shows the normal HTML code, header, body tags, ect, But it now has a no-script tag. Which contains the javascript message. I started the app up after creating a brand new one, it showed the Vue starter template, i then added Veutify by calling vue add vuetify and using the same settings as in the tutorial. Right after this was complete I started up the app again and the UI is now blank and in the dev console I see the javascript message – Demonic218
Please edit the question to expand on all the points I asked about. I'm not really any clearer about exactly where you are seeing the message. As well as a precise description it might help to include a picture to remove any ambiguity. It would also help if you could include version information for Vue, Vue CLI and Vuetify. Could you also confirm that you aren't seeing any other warnings or error messages while installing Vuetify, starting the server or in the browser's console? – skirtle
@skirtle I've updated my question like you requested, sorry for the delay – Demonic218
Thanks for the update. This may sound like pedantry but you're misusing the term console and that made it difficult to follow the original question. The screenshot does not show the console. Within the developer tools the console is specifically the tab labelled Console. What you're doing in the picture is inspecting the elements in the developer tools. That 'error' is just part of the markup for the page (see the source file index.html), it doesn't indicate a problem. Please could you check that there are no errors in the browser console or the server terminal? – skirtle

2 Answers

3
votes

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.

1
votes

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