Nuxt.js: Nuxt 2.7.0 raises ERROR The "path" argument must be of type string. Received type undefined

[sobolevn]

Off-topic

I cannot access https://bug.nuxtjs.org/
It does not work for me at all.

That's why I post it as-is.

On topic

I try to upgrade to the latest Nuxt, I use https://github.com/wemake-services/wemake-vue-template

» npm run dev

> [email protected] dev /Users/sobolev/Documents/github/timeless_is
> cross-env NODE_ENV=development nuxt


   ╭─────────────────────────────────────────────╮
   │                                             │
   │   Nuxt.js v2.7.0                            │
   │   Running in development mode (universal)   │
   │   TypeScript support is enabled             │
   │                                             │
   │   Listening on: http://localhost:3000/      │
   │                                             │
   ╰─────────────────────────────────────────────╯

ℹ Preparing project for development                                        17:45:15
ℹ Initial build may take a while                                           17:45:15
✔ Builder initialized                                                      17:45:15

 ERROR  The "path" argument must be of type string. Received type undefined

  at validateString (internal/validators.js:125:11)
  at Object.extname (path.js:1365:5)
  at uniqBy_1.options.plugins.map (node_modules/@nuxt/builder/dist/builder.js:5684:58)
  at Array.map (<anonymous>)
  at Builder.normalizePlugins (node_modules/@nuxt/builder/dist/builder.js:5680:28)
  at Builder.generateRoutesAndFiles (node_modules/@nuxt/builder/dist/builder.js:5653:36)
  at Builder.build (node_modules/@nuxt/builder/dist/builder.js:5574:16)

No ideas where to look.

_{This question is available on Nuxt community (#c9212)}

[sobolevn]

Resolved! Turned out there was a cache from something. Uninstalled all packages, locks, .nuxt/ folder.

Clean build is working. Thanks for the serverside logs! Awesome feature.

[pi0]

@sobolevn For double investigation can you please share nuxt.config and what files are inside plugins/ dir?

[pi0]

The trace is referring to: https://github.com/nuxt/nuxt.js/blob/v2.7.0/packages/builder/src/builder.js#L265 (/cc @clarkdo)

[sobolevn]

@pi0 sure!

client/plugins
├── element-ui.ts
├── vee-validate.ts
├── vue-googlemaps.ts
└── vue-observe-visibility.ts

And:

// This is Nuxt configuration file
// See: https://nuxtjs.org/guide/configuration/

// We also use commonjs modules because of vue-styleguidist import system

const path = require('path')
const pkg = require('./package.json')

const envPath = path.resolve(__dirname, 'config', '.env')
require('dotenv').config({ 'path': envPath })

module.exports = {
  /**
   * Headers of the page
   */
  'head': {
    'htmlAttrs': { 'lang': 'en' },
    'title': pkg.name,
    'meta': [
      { 'charset': 'utf-8' },
      { 'name': 'viewport', 'content': 'width=device-width, initial-scale=1' },
      {
        'hid': 'description',
        'name': 'description',
        'content': pkg.description,
      },
    ],
    'link': [
      {
        'rel': 'icon',
        'type': 'image/x-icon',
        'href': '/favicon.ico',
      }, {
        'rel': 'icon',
        'type': 'image/png',
        'sizes': '32x32',
        'href': '/favicon-32x32.png',
      }, {
        'rel': 'icon',
        'type': 'image/png',
        'sizes': '96x96',
        'href': '/favicon-96x96.png',
      },
    ],
  },

  /**
   * Environment variables
   */
  'env': {
    'GOOGLE_MAPS_KEY': process.env.GOOGLE_MAPS_KEY,
  },

  /**
   * Global router settings
   */
  'router': {
    // All pages require auth,
    // see: https://auth.nuxtjs.org/getting-started/middleware
    'middleware': ['auth'],
  },

  /**
   * Specify Nuxt source directory
   */
  'srcDir': 'client',
  'rootDir': path.resolve(__dirname),

  /**
   * Extra Nuxt modules
   */
  'modules': [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
    '@nuxtjs/auth',
    'nuxt-imagemin',
    'nuxt-svg',
  ],

  /**
   * Axios settings
   */
  'axios': {
    // See https://axios.nuxtjs.org/options.html
    'debug': process.env.NODE_ENV === 'development',
    'https': process.env.NODE_ENV !== 'development',
    'proxyHeadersIgnore': ['accept', 'accept-encoding', 'host'],
    'progress': true,
    'proxy': false,
    'retry': true,
  },

  /**
   * Proxy module for Nuxt and Axios
   */
  'proxy': {},

  /**
   * Auth module for Nuxt,
   * see: https://github.com/nuxt-community/auth-module
   */
  'auth': {
    'redirect': {
      'login': '/',
    },
    'resetOnError': true,
    'strategies': {
      'local': {
        'endpoints': {
          'login': {
            'url': '/api/auth/login',
            'method': 'post',
            'propertyName': 'token',
          },
          // TODO: enable logout
          'logout': false,
          // TODO: enable user profile
          // https://github.com/nuxt-community/auth-module/issues/286
          'user': false,
        },
      },
    },
  },

  /**
   * Custom plugins
   */
  'plugins': [
    '~/plugins/element-ui.ts',
    '~/plugins/vue-googlemaps.ts',
    '~/plugins/vee-validate.ts',

    // Client-side only:
    { 'src': '~/plugins/vue-observe-visibility.ts', 'ssr': false },
  ],

  /**
   * Server side functions that we use for SSR:
   * https://nuxtjs.org/api/configuration-servermiddleware/
   */
  'serverMiddleware': [
    '~/mock-api/server.js',
  ],

  /**
   * Global CSS
   */
  'css': [
    'normalize.css/normalize.css',
    '~/scss/global-styles.scss',
  ],

  /**
   * postcss configuration
   */
  'postcss': {},

  /**
   * Build configuration
   */
  'build': {
    'quiet': false,

    extend (config, { isDev, isClient }): void {
      // This line allows us to use `@import "~/scss/..."` in our app:
      config.resolve.alias['/scss'] = path.resolve(__dirname, 'client', 'scss')

      if (isDev && isClient) {
        // Enabling eslint:
        config.module.rules.push({
          'enforce': 'pre',
          'test': /\.(js|ts|vue)$/u,
          'loader': 'eslint-loader',
          'exclude': /(node_modules)/u,
        })

        // Enabling stylelint:
        config.plugins.push(require('stylelint-webpack-plugin')({
          'files': 'client/**/*.{vue,scss,css}',
        }))
      }
    },
  },
}

[clarkdo]

@pi0 Do you think if it’s related to ts-node memory cache?

[pi0]

@clarkdo yes, typescript can be also a reason.

[sobolevn]

It might be something from my side. I cannot reproduce it anymore.

[pi0]

@sobolevn ok. thanks for the clarification. closing it for now. please tell us it happened again :)

also /cc @kevinmarrec

[kevinmarrec]

@pi0 @sobolevn It's internal validators of path and it isn't related to TypeScript :

So if we follow the trace back and look for nuxt builder code

It means p.src is undefined, so it either mean :

plugins: [undefined]

or

plugins: [{ src: undefined }]

Issue is reproducible with such statements in nuxt.config.js.

[kevinmarrec]

@sobolevn Dunno how it became undefined in your case though 😁

[clarkdo]

The undefined could be like :

User started dev server and removed one plugin, but the plugin item is deleted instead whole plugins array recreated

[AndrewBogdanovTSS]

Also had this issue, but in my case, the problem was that I was missing an environment variable in my .env file that was added during dev process and I just didn't know that it was. So, after I added it everything returned to normal.

[gbezyuk]

One way to reproduce this behavior is having a typo in plugins section of the nuxt.config.js:

export default {
  plugins: [
    [ 'see/double/brackets/here.js']
  ]
}

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.