Error loading nuxt witz component testing with nuxt

[Jones-S]

Current behavior

Cypress throws an "Unexpected Error"

I tried to setup component testing with nuxt, but that never worked.

Stack trace:

Error: Error loading nuxt. 
Looked in /Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/node_modules,
/Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/node_modules,
/Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/node_modules,
/Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/node_modules,
/Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/Contents/Resources/app/packages/server/node_modules,
/Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/Contents/Resources/app/packages/node_modules,
/Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/Contents/Resources/app/node_modules,
/Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/Contents/Resources/node_modules,
/Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/Contents/node_modules,
/Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/node_modules,
/Users/USERNAME/Library/Caches/Cypress/10.0.3/node_modules,
/Users/USERNAME/Library/Caches/Cypress/node_modules,
/Users/USERNAME/Library/Caches/node_modules,
/Users/USERNAME/Library/node_modules,
/Users/USERNAME/node_modules,
/Users/node_modules,
/node_modules,
/Users/USERNAME/.node_modules,
/Users/USERNAME/.node_libraries,
/Users/USERNAME/.nvm/versions/node/v16.15.0/lib/node

    at nuxtHandler (/Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/nuxtHandler.js:25:15)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async getPreset (/Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:70:20)
    at async Function.devServer.create (/Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:90:61)
    at async /Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:25:24

And the terminal output:

TypeError: Cannot read properties of undefined (reading 'clientBuildDir')
    at WebpackBundler.<anonymous> (/Users/USERNAME/Documents/path-to-project/node_modules/@nuxtjs/workbox/index.js:39:18)
    at next (/Users/USERNAME/Documents/path-to-project/node_modules/@nuxt/utils/dist/utils.js:659:27)
    at WebpackBundler.<anonymous> (/Users/USERNAME/Documents/path-to-project/node_modules/@nuxt/utils/dist/utils.js:674:12)
    at WebpackClientConfig.extendConfig (/Users/USERNAME/Documents/path-to-project/node_modules/@nuxt/webpack/dist/webpack.js:1509:37)
    at WebpackClientConfig.config (/Users/USERNAME/Documents/path-to-project/node_modules/@nuxt/webpack/dist/webpack.js:1544:50)
    at WebpackClientConfig.config (/Users/USERNAME/Documents/path-to-project/node_modules/@nuxt/webpack/dist/webpack.js:1708:26)
    at WebpackBundler.getWebpackConfig (/Users/USERNAME/Documents/path-to-project/node_modules/@nuxt/webpack/dist/webpack.js:2016:19)
    at getWebpackConfig (/Users/USERNAME/Documents/path-to-project/node_modules/@nuxt/cli/dist/cli-index.js:723:24)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async nuxtHandler (/Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/nuxtHandler.js:16:31)
    at async getPreset (/Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:70:20)
    at async Function.devServer.create (/Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:90:61)
    at async /Users/USERNAME/Library/Caches/Cypress/10.0.3/Cypress.app/Contents/Resources/app/packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:25:24

when opening the file /Users/USERNAME/Documents/path-to-project/node_modules/@nuxtjs/workbox/index.js:39:18 The problem seems to be here:

module.exports = function nuxtWorkbox (moduleOptions) {
  if (this.options.dev) {
    return
  }

  let options

  const hook = builder => {
    debug('Adding workbox')
    options = getOptions.call(this, moduleOptions)
    workboxInject.call(this, options)
    setHeaders.call(this, options)
    emitAssets.call(this, options)
    addTemplates.call(this, options)
  }

  // Get client output path (#83)
  this.extendBuild((config, { isClient }) => {
    if (!isClient) {
      return
    }

    if (!options.clientBuildDir) { // this line causes the error...
      options.clientBuildDir = config.output.path
    }

    if (!options.globDirectory) {
      options.globDirectory = options.clientBuildDir
    }
  })

  this.nuxt.hook ? this.nuxt.hook('build:before', hook) : this.nuxt.plugin('build', hook)
}

Because options is undefined.

The cypress screen also shows that line throw Error(Error loading nuxt. Looked in ${require.resolve.paths(devServerConfig.cypressConfig.projectRoot)});

Not sure if this could be resolved by setting projectRoot in the cypress config. But there I am not sure how to set it, and also e2e testing works properly.

Thank you for any hints.

Desired behavior

No response

Test code to reproduce

If you need a copy of our nuxt.config.js I'll prepare a nuxt.config where I remove some sensitive data. Unfortunately I can't just share the projects repo. But maybe you already have a pointer.

Cypress Version

10.0.3

Other

Nuxt: v2.15.8

[marktnoonan]

Hi, I think a copy of nuxt.config.js would be great, as well as package.json (as much as can be shared) and OS version.

I was able to set up a Nuxt 2.15.8 project using Cypress 10.0.3 just now with no issues. But it's a relatively simple setup for basic testing. It would be good to know in what ways your nuxt.config.js differs from this one:

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  ignore: ["**/*.test.*", "**/*.cy.*"],
  head: {
    title: "nuxt-js",
    htmlAttrs: {
      lang: "en",
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
      { name: "format-detection", content: "telephone=no" },
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ["static/global.css"],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [{ src: "~/plugins/mocks.js", mode: "client" }],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    "@nuxtjs/eslint-module",
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: ["@nuxtjs/tailwindcss"],

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    extend(config) {

    },
  },
};

[mjhenkes]

Right now there doesn't seem to be enough information to reproduce the problem on our end. We'll have to close this issue until we can reproduce it. This does not mean that your issue is not happening - it just means that we do not have a path to move forward.

Please open a new issue with a reproducible example and link to this issue. Here are some tips for providing a Short, Self Contained, Correct, Example and our own Troubleshooting Cypress guide.

[Jones-S]

Sure, sorry, somehow I was not notified by your answer.

[Jones-S]

Here you can see my nuxt.config.js

// eslint-disable-next-line prettier/prettier
import {
  generateLocalizedRoutes,
  generateRoutesFromData,
} from '@wearelucid/vuecid-helpers'
import config from './config'

// TODO: Add your post types
const postTypes = [
  { type: 'pages' },
  { type: 'posts', paginated: true },
  { type: 'veranstaltungen', paginated: true },
  { type: 'raeume', paginated: true },
]

// TODO: Add your site title
const siteTitle = ''
const shortTitle = ''
const siteDescription = ''
const themeColor = '#ffffff'
// TODO: Replace favicon source file in /static/icon.png (512px x 512px)
// eslint-disable-next-line prettier/prettier
const iconSizes = [32, 57, 60, 72, 76, 144, 120, 144, 152, 167, 180, 192, 512]

export default {
  /*
   ** Headers of the page
   */
  head: {
    title: 'Loading',
    htmlAttrs: {
      lang: config.env.DEFAULTLANG,
      dir: 'ltr', // define directionality of text globally
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },

      // TODO: Check this info
      { name: 'author', content: 'author' },
      { name: 'theme-color', content: themeColor },

      // TODO: Add or remove google-site-verification
      {
        name: 'google-site-verification',
        content: 'abc...',
      },
    ],
    // IE11 Polyfill (build.vendor is deprecated)
    // https://stackoverflow.com/questions/52452501/how-to-add-a-polyfill-to-nuxt-2-0
    script: [
      { src: 'https://cdn.polyfill.io/v2/polyfill.min.js?features=default,fetch,Object.entries', async: true, defer: true }, // prettier-ignore
      { src: '/js/modernizr-custom.js', async: true, defer: true },
    ],
  },

  /*
   ** env: lets you create environment variables that will be shared for the client and server-side.
   */
  env: config.env,

  /*
   ** Customize the progress-bar color
   ** TODO: Set your desired loading bar color
   */
  loading: {
    color: '#141414',
    height: '5px',
  },

  /*
   ** CSS
   */
  css: ['@/assets/css/main.scss'],

  /*
   ** Plugins
   */
  plugins: [
    { src: '~/plugins/global.js' },
    { src: '~/plugins/throwNuxtError.js' },
    { src: '~/plugins/axios' },
    { src: '~/plugins/whatinput.js', ssr: false },
    { src: '~/plugins/i18n.js', injectAs: 'i18n' },
    { src: '~/plugins/vuex-router-sync' },
    { src: '~/plugins/vue-bows' },
    { src: '~/plugins/vue-breakpoint-component', ssr: false },
    { src: '~/plugins/lazy-load', ssr: false },
    { src: '~/plugins/vue-flickity', ssr: false },
  ],

  /*
   ** Modules
   */
  modules: [
    '@nuxtjs/proxy',
    '@nuxtjs/axios',
    '@nuxtjs/robots',
    // '@nuxtjs/moment',
    ['@nuxtjs/moment', { locales: ['de-ch'], defaultLocale: 'de-ch' }],
    [
      'vue-scrollto/nuxt',
      {
        container: 'body',
        duration: 300,
        easing: 'ease-in-out',
        offset: 0,
        force: true,
        cancelable: true,
        onStart: false,
        onDone: false,
        onCancel: false,
        x: false,
        y: true,
      },
    ],
    [
      '@nuxtjs/google-analytics',
      {
        id: config.googleAnalyticsId,
        disabled: false,
        set: [{ field: 'anonymizeIp', value: true }],
        debug: {
          sendHitTask: process.env.NODE_ENV === 'production',
        },
      },
    ],
    '@nuxtjs/sitemap',
    [
      '@nuxtjs/pwa',
      {
        icon: {
          sizes: iconSizes,
        },
        // Override certain meta tags
        meta: {
          viewport: 'width=device-width, initial-scale=1',
          favicon: true, // Generates only apple-touch-icon
        },
        manifest: {
          name: siteTitle,
          lang: config.env.DEFAULTLANG,
          dir: 'ltr',
          short_name: shortTitle,
          theme_color: themeColor,
          start_url: '/',
          display: 'standalone',
          background_color: '#fff',
          description: siteDescription,
        },
      },
    ],
  ],

  /*
   ** Proxy config
   */
  proxy: {
    '/.netlify': {
      target: 'http://localhost:9000',
      pathRewrite: { '^/.netlify/functions': '' },
    },
  },

  /*
   ** Workbox config
   */
  workbox: {
    config: {
      debug: false,
      cacheId: siteTitle,
    },
  },

  /*
   ** Axios config
   */
  axios: {
    baseURL: '/',
  },

  /*
   ** Generate
   */
  generate: {
    concurrency: 250,
    subFolders: true,
    routes: [
      ...generateRoutesFromData({
        langs: config.env.LANGS,
        postTypes: postTypes,
        dataPath: '../../../../../static/data',
        bundle: 'basic',
        homeSlug: config.env.HOMESLUG,
        errorPrefix: config.env.ERROR_PREFIX,
      }),
    ],
  },

  /*
   ** Build configuration
   */
  build: {
    html: {
      minify: false,
    },
    sassOptions: {
      quietDeps: true,
    },
    transpile: ['vanilla-lazyload'],
    extend(config) {
      // Add this when using file system
      // https://github.com/webpack-contrib/css-loader/issues/447#issuecomment-285598881
      config.node = {
        fs: 'empty',
      }
    },
  },

  /*
   ** Router
   */
  router: {
    linkActiveClass: 'is-active',
    linkExactActiveClass: 'is-active-exact',
    middleware: ['i18n'],
    extendRoutes(routes) {
      // extends basic routes (based on your files/folders in pages directory) with i18n locales (from our config.js)
      const newRoutes = generateLocalizedRoutes({
        baseRoutes: routes,
        defaultLang: config.env.DEFAULTLANG,
        langs: config.env.LANGS,
        routesAliases: config.routesAliases,
      })

      // Clear array
      routes.splice(0, routes.length)

      // Push newly created routes
      routes.push(...newRoutes)
    },
  },

  /*
   ** Sitemap Configuration
   */
  sitemap: {
    path: '/sitemap.xml',
    hostname: config.env.FRONTENDURLPRODUCTION,
    cacheTime: 1000 * 60 * 15,
    generate: true,
    routes: [
      ...generateRoutesFromData({
        langs: config.env.LANGS,
        postTypes: postTypes,
        dataPath: '../../../../../static/data',
        bundle: 'basic',
        homeSlug: config.env.HOMESLUG,
        errorPrefix: config.env.ERROR_PREFIX,
      }),
    ],
  },
}

and the package.json:

{
  "name": "vuecid-nuxt",
  "version": "v3.5.4",
  "description": "",
  "author": "",
  "contributors": [],
  "license": "MIT",
  "scripts": {
    "dev": "HOST=0.0.0.0 nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lambda-build": "yarn netlify-lambda build ./netlify-lambda-src --config webpack-config.functions.js",
    "lambda-serve": "yarn netlify-lambda serve ./netlify-lambda-src --config webpack-config.functions.js",
    "netlify-build": "yarn fetch && yarn generate && yarn netlify-lambda build ./netlify-lambda-src --config webpack-config.functions.js",
    "netlifyify": "NETLIFYIFY=true nuxt generate && PORT=3000 serve",
    "fetch": "babel-node --presets @babel/preset-env -- fetchData.js",
    "lint": "sass-lint -c .sass-lint.yml '**/*.scss' -v -q -i 'node_modules/**/*.scss' && eslint --ext .js,.vue --ignore-path .gitignore .",
    "lintfix": "eslint --fix --ext .js,.vue --ignore-path .gitignore .",
    "scaffold": "plop"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/google-analytics": "^2.0.2",
    "@nuxtjs/moment": "^1.2.0",
    "@nuxtjs/proxy": "^1.3.1",
    "@nuxtjs/pwa": "^2.5.0",
    "@nuxtjs/robots": "^2.1.0",
    "@nuxtjs/sitemap": "^0.2.0",
    "@wearelucid/api-fetcher": "^1.2.4",
    "@wearelucid/vue-bows": "^1.2.2",
    "@wearelucid/vuecid-helpers": "^2.1.0",
    "axios": "^0.26.1",
    "babel-loader": "^8.0.5",
    "dotenv": "^16.0.0",
    "flickity-imagesloaded": "^2.0.0",
    "headroom.js": "^0.12.0",
    "immutable-ics": "^0.4.0",
    "mailgun-js": "^0.22.0",
    "moment": "^2.24.0",
    "mysql": "^2.16.0",
    "netlify-lambda": "^1.4.2",
    "no-scroll": "^2.1.0",
    "normalize-scss": "^7.0.0",
    "nuxt": "^2.5.0",
    "promise-mysql": "^3.3.1",
    "sass-burger": "^1.3.1",
    "uglifyjs-webpack-plugin": "^2.1.1",
    "vanilla-lazyload": "^10.20.0",
    "vee-validate": "^2.2",
    "vue-breakpoint-component": "^1.1.1",
    "vue-cookie-law": "^1.8.0",
    "vue-flickity": "^1.1.2",
    "vue-i18n": "^8.3.2",
    "vue-jsonp": "^0.1.8",
    "vue-router": "^3.0.2",
    "vue-scrollto": "^2.14.0",
    "vuex": "^3.0.1",
    "vuex-router-sync": "^5.0.0",
    "what-input": "^5.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/eslint-parser": "^7.18.2",
    "@babel/node": "^7.16.8",
    "@babel/preset-env": "^7.16.11",
    "@nuxtjs/eslint-config": "^10.0.0",
    "babel-preset-env": "^1.6.1",
    "cypress": "^10.0.3",
    "eslint": "^8.17.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-nuxt": "^3.2.0",
    "eslint-plugin-vue": "^9.1.0",
    "inquirer-directory": "^2.1.0",
    "plop": "^3.0.5",
    "prettier": "2.6.2",
    "sass": "^1.44.0",
    "sass-lint": "^1.12.1",
    "sass-loader": "^10",
    "webpack-cli": "^4.9.2"
  }
}

OS: Mac OS Monterey v12.1 (21C52)

I know that I should create a reproducible example and open a new issue, but as the project is so big, I would have to basically create a copy without all business information–which is not feasible. I would also be glad if I just got a few hints, where I could start looking for the problem by myself, because currently I am pretty clueless.

[Jones-S]

Issue is resolved by using cypress v10.10.0. 🤷‍♂️

[tatiana-athenaworks]

I'm still having the same issue. I'm on Mac OS Monterey 12.6, and the version I'm using for cypress is 10.0.0

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare",
    "test": "vitest",
    "coverage": "vitest run --coverage"
  },
  "devDependencies": {
    "@nuxt/test-utils-edge": "3.0.0-rc.12-27759910.9e6d292",
    "@vue/test-utils": "2.1.0",
    "cypress": "^10.10.0",
    "jsdom": "^20.0.1",
    "nuxt": "3.0.0-rc.11",
    "vitest": "0.24.1",
    "vue": "2"
  },
  "dependencies": {
    "sass": "1.55.0",
    "vuetify": "3.0.0-beta.13"
  }
}

And the nuxt.config.ts

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
    typescript: {
        typeCheck: true,
        strict: true
    },
    ssr: false,
    css: ['vuetify/lib/styles/main.sass'],
    build: {
      transpile: ['vuetify'],
    }
})