Remove every reference to .nuxt global option (#11265)

* Remove unused rehydratation plugin

* Remove any reference to the .nuxt folders

* Remove globalApp nuxt and any reference or use case to nuxt.error

* Replace errors handling with existing fail-whale logic

Author: cnotv

.ackrc

@@ -1,7 +1,5 @@
 --ignore-dir=.git
 --ignore-dir=.vscode
---ignore-dir=.nuxt
---ignore-dir=.nuxt-prod
 --ignore-dir=.nyc_output
 --ignore-dir=coverage
 --ignore-dir=dist

.dockerignore

@@ -1,7 +1,4 @@
-.nuxt
-.nuxt-prod
 .env
-.nuxt
 .nyc_output
 coverage
 node_modules

.eslintignore

@@ -6,7 +6,7 @@ node_modules/
 .env
 .cache
 .next
-.nuxt
+
 dist
 dist-pkg
 .DS_Store

.gitignore

@@ -66,11 +66,7 @@ typings/
 # next.js build output
 .next
 
-# nuxt.js build output
-.nuxt
-.nuxt-prod
-
-# Nuxt generate
+# Build output
 dist
 
 # vuepress build output

.vscode/settings.json

@@ -1,7 +1,6 @@
 {
   "files.exclude": {
     ".eslintcache": true,
-    ".nuxt*": true,
     "yarn-error.log": true,
     "pkg/**/.shell": true,
     "pkg/**/node_modules": true

cypress.config.ts

@@ -76,8 +76,6 @@ export default defineConfig({
         'docusaurus/**/*.*',
         'stories/**/*.*',
         'drone/**/*.*',
-        '.nuxt/**/*.*',
-        '.nuxt-prod/**/*.*',
       ],
       include: [
         'shell/**/*.{vue,ts,js}',

docusaurus/docs/internal/testing/e2e-test.md

@@ -111,7 +111,7 @@ It's also possible to run a workflow in GitHub Actions E2E test using these valu
 
 ## Local and CI/prod run
 
-It is possible to start the project and run all the tests at once with a single command. There's however a difference between `dev` and `production` run. The first will not require an official certificate and will build the project in `.nuxt`, while the production will enable all the SSL configurations to run encrypted.
+It is possible to start the project and run all the tests at once with a single command. There's however a difference between `dev` and `production` run. The first will not require an official certificate and will build the project in `dist`, while the production will enable all the SSL configurations to run encrypted.
 
 - `yarn e2e:pre-dev`, to optionally initialize Docker and build the project, if not already done
 - `yarn e2e:dev`, single run local development

jest.config.js

@@ -27,8 +27,6 @@ module.exports = {
     '<rootDir>/stories/',
     '<rootDir>/shell/scripts/',
     '<rootDir>/drone',
-    '<rootDir>/.nuxt',
-    '<rootDir>/.nuxt-prod',
   ],
   testPathIgnorePatterns: [
     '<rootDir>/node_modules/',

scripts/rejig

@@ -1,7 +1,7 @@
 #!/bin/bash
 
 # Directories and folders not to replace in
-GREP_EXCLUDES="--exclude-dir=.git --exclude-dir=.nuxt --exclude-dir=node_modules --exclude=rejig --exclude=nuxt.config.js --exclude-dir=shell --exclude-dir=pkg --exclude-dir=pkg-dist --exclude-dir=dist"
+GREP_EXCLUDES="--exclude-dir=.git --exclude-dir=node_modules --exclude=rejig --exclude=nuxt.config.js --exclude-dir=shell --exclude-dir=pkg --exclude-dir=pkg-dist --exclude-dir=dist"
 GREP_REVERT_EXCLUDES="${GREP_EXCLUDES} --exclude=vue.config.js --exclude=jest.config.js --exclude=tsconfig.default.json --exclude=tsconfig.json --exclude=tsconfig.pkg.json --exclude=extension.js --exclude=extensions.js --exclude=model-loader.js"
 
 echo "Re-jigging codebase"

shell/components/templates/error.vue

@@ -10,14 +10,11 @@ export default {
   },
 
   computed: {
-    error() {
-      return window.$globalApp.nuxt.err || {};
-    },
     statusCode() {
-      return (this.error && this.error.statusCode) || 599;
+      return 599;
     },
     message() {
-      return this.error.message || '';
+      return '';
     }
   },
   watch: {

shell/creators/app/files/.eslintignore

@@ -7,12 +7,10 @@ node_modules/
 .env
 .cache
 .next
-.nuxt
 dist
 dist-pkg
 .DS_Store
 dynamic-importer.js
 ksconfig.json
-nuxt.config.js
 shell/utils/dynamic-importer.js
 shell/assets/fonts

shell/creators/app/files/.vscode/settings.json

@@ -8,7 +8,6 @@
     ".eslintignore": true,
     ".eslintrc.js": true,
     ".gitignore": true,
-    ".nuxt*": true,
     ".nyc_output": true,
     ".vscode": true,
     "LICENSE": true,

shell/initialize/App.vue

@@ -31,8 +31,6 @@ export default {
     window.addEventListener('online', this.refreshOnlineStatus);
     window.addEventListener('offline', this.refreshOnlineStatus);
 
-    // Add $nuxt.error()
-    this.error = this.$options.nuxt.error;
     // Add $nuxt.context
     this.context = this.$options.context;
   },
@@ -41,8 +39,6 @@ export default {
     this.$loading = this.$refs.loading;
   },
 
-  watch: { 'nuxt.err': 'errorChanged' },
-
   computed: {
     isOffline() {
       return !this.isOnline;
@@ -60,22 +56,6 @@ export default {
         this.isOnline = window.navigator.onLine;
       }
     },
-    errorChanged() {
-      if (this.$options.nuxt.err) {
-        if (this.$loading) {
-          if (this.$loading.fail) {
-            this.$loading.fail(this.$options.nuxt.err);
-          }
-          if (this.$loading.finish) {
-            this.$loading.finish();
-          }
-        }
-
-        this.showErrorPage = true;
-      } else {
-        this.showErrorPage = false;
-      }
-    },
   },
 
   components: { NuxtLoading, NuxtError }

shell/initialize/app-extended.js

@@ -2,7 +2,6 @@
 // This file was generated during Nuxt migration
 import AppView from '@shell/initialize/App';
 import { setContext, getRouteData } from '@shell/initialize/entry-helpers';
-import { normalizeError } from '@shell/utils/error';
 import { extendRouter } from '@shell/config/router';
 import { extendStore } from '@shell/config/store';
 import { UPGRADED, _FLAGGED, _UNFLAG } from '@shell/config/query-params';
@@ -34,7 +33,6 @@ export const getLocation = (base, mode) => {
 
 /**
  * Bundle Vue app component and configuration to be executed on entry
- * TODO: #11070 - Remove Nuxt residuals
  * @param {*} vueApp Vue instance
  * @returns
  */
@@ -53,24 +51,6 @@ async function extendApp(vueApp) {
   const appPartials = {
     store,
     router,
-    nuxt: {
-      err:     null,
-      dateErr: null,
-      error(err) {
-        err = err || null;
-        appPartials.context._errored = Boolean(err);
-        err = err ? normalizeError(err) : null;
-        let nuxt = appPartials.nuxt; // to work with @vue/composition-api, see https://github.com/nuxt/nuxt.js/issues/6517#issuecomment-573280207
-
-        if (this) {
-          nuxt = this.nuxt || this.$options.nuxt;
-        }
-        nuxt.dateErr = Date.now();
-        nuxt.err = err;
-
-        return err;
-      }
-    },
     ...AppView
   };
 
@@ -88,7 +68,6 @@ async function extendApp(vueApp) {
     store,
     route,
     next,
-    error:   appPartials.nuxt.error.bind(appPartials),
     payload: undefined,
     req:     undefined,
     res:     undefined

shell/initialize/entry-helpers.js

@@ -29,12 +29,12 @@ export const loadDebugger = (vueApp) => {
       }
 
       if (vm && vm.$root) {
-        const nuxtApp = Object.keys(window.$globalApp)
-          .find((nuxtInstance) => vm.$root[nuxtInstance]);
+        const globalApp = Object.keys(window.$globalApp)
+          .find((instance) => vm.$root[instance]);
 
         // Show Nuxt Error Page
-        if (nuxtApp && vm.$root[nuxtApp].error && info !== 'render function') {
-          const vueApp = vm.$root[nuxtApp];
+        if (globalApp && vm.$root[globalApp].error && info !== 'render function') {
+          const vueApp = vm.$root[globalApp];
 
           vueApp.error(err);
         }
@@ -54,6 +54,16 @@ export const loadDebugger = (vueApp) => {
   }
 };
 
+/**
+ * Handle errors with a redirect
+ * @param {*} context
+ * @param {*} message
+ */
+const errorRedirect = (context, message) => {
+  context.$store.commit('setError', { error: new Error(message) });
+  context.$router.replace('/fail-whale');
+};
+
 /**
  * TODO: Define this logic use case
  * @param {*} fn
@@ -104,17 +114,6 @@ export const middlewareSeries = (promises, appContext) => {
     });
 };
 
-/**
- * Trigger errors
- * @param {*} app App view instance
- */
-const checkForErrors = (app) => {
-  // Hide error component if no error
-  if (app._hadError && app._dateLastError === app.$options.nuxt.dateErr) {
-    app.error();
-  }
-};
-
 /**
  * Add middleware to the Vue instance
  * @param {*} Components List of Vue components
@@ -137,7 +136,7 @@ function callMiddleware(Components, context) {
     }
     if (typeof middleware[name] !== 'function') {
       unknownMiddleware = true;
-      this.error({ statusCode: 500, message: `Unknown middleware ${ name }` });
+      errorRedirect(this, new Error(`500: Unknown middleware ${ name }`));
     }
 
     return middleware[name];
@@ -190,8 +189,6 @@ async function render(to, from, next) {
     from,
     next:  _next.bind(this)
   });
-  this._dateLastError = app.nuxt.dateErr;
-  this._hadError = Boolean(app.nuxt.err);
 
   // Get route's matched components
   const matches = [];
@@ -215,7 +212,8 @@ async function render(to, from, next) {
     }
 
     // Show error page
-    this.error({ statusCode: 404, message: 'This page could not be found' });
+    // this.error({ statusCode: 404, message: 'This page could not be found' });
+    errorRedirect(this, new Error('404: This page could not be found'));
 
     return next();
   }
@@ -256,17 +254,14 @@ async function render(to, from, next) {
       }
     } catch (validationError) {
       // ...If .validate() threw an error
-      this.error({
-        statusCode: validationError.statusCode || '500',
-        message:    validationError.message
-      });
+      errorRedirect(this, new Error(`${ validationError.statusCode || '500' }: ${ validationError.message }`));
 
       return next();
     }
 
     // ...If .validate() returned false
     if (!isValid) {
-      this.error({ statusCode: 404, message: 'This page could not be found' });
+      errorRedirect(this, new Error('404: This page could not be found'));
 
       return next();
     }
@@ -284,7 +279,6 @@ async function render(to, from, next) {
 
     globalHandleError(error);
 
-    this.error(error);
     next();
   }
 }
@@ -320,7 +314,6 @@ export async function mountApp(appPartials, VueClass) {
 
   // First render on client-side
   const clientFirstMount = () => {
-    checkForErrors(vueApp);
     mount();
   };
 

shell/plugins/dashboard-store/rehydrate-all.js

@@ -3,4 +3,4 @@ set -e
 
 cd $(dirname $0)/..
 
-rm -rf dist .nuxt* node_modules/.cache
+rm -rf dist node_modules/.cache

shell/scripts/clean

@@ -27,7 +27,6 @@
   },
   "exclude": [
     "node_modules",
-    ".nuxt",
     "dist",
     "dist-pkg",
     "../dist",

shell/tsconfig.json

@@ -26,7 +26,6 @@
   },
   "exclude": [
     "node_modules",
-    ".nuxt",
     "dist",
     "dist-pkg",
     "cypress",