Nuxt.js: Vue is not defined

Created on 31 Mar 2018 · 8Comments · Source: nuxt/nuxt.js

Probably I've broken something but I've this error:

client.js:100 Uncaught ReferenceError: Vue is not defined
    at Object../.nuxt/client.js (client.js:100)
    at __webpack_require__ (bootstrap 12bd0f95510ac17e7a73:712)
    at fn (bootstrap 12bd0f95510ac17e7a73:117)
    at Object.0 (nuxt-loading.vue?9b8a:21)
    at __webpack_require__ (bootstrap 12bd0f95510ac17e7a73:712)
    at webpackJsonpCallback (bootstrap 12bd0f95510ac17e7a73:25)
    at app.js:1

I've search for information but seems that nobody is experimenting this :/

_{This question is available on Nuxt.js community (#c6812)}

Source

CKGrafico

👍4

Most helpful comment

@CKGrafico I managed to get things working again last night, however I'm still not completely clear on the cause. Excluding the .nuxt directory from ts-loader has my app building once more:

    const tsLoader = {
      loader: 'ts-loader',
      options: {
        appendTsSuffixTo: [ /\.vue$/ ],
        transpileOnly: true
      },
      exclude: [
        /vendor/,
        /\.nuxt/
      ]
    }

I never had to do that before so I still think it's caused by a changed dependency. What tipped my off was you'll see import Vue from 'vue' at the top of the .nuxt/client.js file but in the browser it's been transformed by babel-loader.

Hope this helps, I can now enjoy my Sunday :)

digital-drifter on 1 Apr 2018

👍6

All 8 comments

Have you tried deleting .nuxt/ directory and rebuilding your project? Reinstalling your Node modules might help as well. If that doesn't help, please share your code so we can reproduce the issue.

paulgv on 31 Mar 2018

I'm running into this also. From what I can tell it seems to be caused by the style tags in the file. I first encountered this in nuxt-loading.vue and deleting the tags got past that error and onto nuxt-loading.vue. Has anyone else experienced this? Nuxt 1.4 and typescript 2.8.2.

digital-drifter on 1 Apr 2018

@paulgv 😅(thanks but yes)
@bigskyrider after a lot of hours... and checking my git hystory.. I've discovered this:

In some moment of my life I've removed the package-lock.json and is when the problems have started, this is the diff:

NOT WORKING:
https://gist.github.com/CKGrafico/c426fc132b171a662cb7e99ce51d635c

Working:
https://gist.github.com/CKGrafico/1d23e0867d2ffe301e6e921f7f430aff

I suppose that the problem is here I will investigate more tomorrow, enjoy the sunday 🏝⛰🏄🏻‍♂️ (stop programming 24/7 xD)

(diff https://www.diffchecker.com/Wd8GVTYe)

CKGrafico on 1 Apr 2018

@CKGrafico I managed to get things working again last night, however I'm still not completely clear on the cause. Excluding the .nuxt directory from ts-loader has my app building once more:

    const tsLoader = {
      loader: 'ts-loader',
      options: {
        appendTsSuffixTo: [ /\.vue$/ ],
        transpileOnly: true
      },
      exclude: [
        /vendor/,
        /\.nuxt/
      ]
    }

Hope this helps, I can now enjoy my Sunday :)

digital-drifter on 1 Apr 2018

👍6

@bigskyrider Worked for me, thanks :)