Nuxt.js: Cannot read property toLowerCase of undefined

[c4milo]

FWIW, I'm using my custom dev server:

dev-server.js

const { Nuxt, Builder } = require('nuxt');
// const Nuxt = require('nuxt');
const app = require('express')();
const morgan = require('morgan');
const proxy = require('http-proxy-middleware');
const isProd = (process.env.NODE_ENV === 'production');
const port = process.env.PORT || 3000;

// We instantiate nuxt.js with the options
let config = require('./nuxt.config.js');
config.dev = !isProd;
const nuxt = new Nuxt(config);

const filter = (path, req) => {
    const headers = req.headers;
    const accept = headers.accept;
    const contentType = headers['content-type'];
    return (
        (accept && accept.indexOf('application/json') !== -1) ||
        (contentType && contentType.indexOf('application/json') !== -1)
    );
};

app.use(morgan('dev'));

app.use(proxy(filter, {
    target: 'https://localhost:9000',
    secure: false
}));

// Render every route with nuxt.js
app.use(nuxt.render);

// Build only in dev mode with hot-reloading
if (config.dev) {
    new Builder(nuxt).build()
    // nuxt.build()
        .catch((error) => {
            console.error(error);
            process.exit(1);
        });
}

// Listen the server
app.listen(port, '0.0.0.0');
console.log('Server listening on localhost:' + port);

nuxt.config.js

module.exports = {
    srcDir: 'src',

    /*
    ** Headers of the page
    */
    head: {
        title: 'Hooklift Identity',
        meta: [
            { charset: 'utf-8' },
            { name: 'viewport', content: 'width=device-width, initial-scale=1' },
            { hid: 'description', name: 'description', content: 'Hooklift' }
        ],
        link: [
            { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
    },

    modules: [
        ['@nuxtjs/google-analytics', { ua: 'UA-XXXXXXXX-X' }]
    ],

    /*
    ** Plugins to run before instantiating the root vue.js application
    */
    plugins: [
        { src: '~plugins/api-client', ssr: false }
        // { src: '~plugins/notify', injectAs: 'notify', ssr: false }
        // { src: '~plugins/i18n', injectAs: 'i18n' }
    ],
    /*
    ** Customize the progress-bar color
    */
    loading: { color: '#3B8070' },

    /*
    ** Build configuration
    */
    build: {
        vendor: [
            'swagger-client'
        ],
        /*
        ** Run ESLINT on save
        */
        extend (config, ctx) {
            if (ctx.isClient) {
                config.module.rules.push({
                    enforce: 'pre',
                    test: /\.(js|vue)$/,
                    loader: 'eslint-loader',
                    exclude: /(node_modules)/
                });
            }
        }
    },
    css: [
        'normalize.css/normalize.css',
        '~static/gotham-narrow-v3.css',
        '~assets/styles/app.scss'
    ]
};

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

[c4milo]

The same exact code worked fine using 1.0.0-alpha.4

[c4milo]

FWIW, this issue is still present in 1.0.0-rc11

[kimyvgy]

I have the same issue when upgrading to Nuxt 1.0.0-rc11 :(

[alexchopin]

Should be fixed with the next release, feel free to comment and reopen it if the bug persists.

[bognix]

@alexchopin I see the same error when calling store.dispatch inside plugin:

plugins/my-plugin.js

export default (context) => {
    context.store.dispatch('ACTION_NAME')
}

and my nuxt.config.js:

  plugins: [
    {src: '~/plugins/my-plugin.js', ssr: false}
  ],

I'm using nuxt@next version and it resolves to version: 1.0.0-gh-a5b6d8e

[farhadniaz]

I have the same issue in NUXT 1.1.0

[bovas85]

How to fix for me:

• remove package-lock.json
• npm install --save nuxt vue
• remove node_modules
• npm install
• npm update
• npm install --save-dev vue-template-compiler vue-server-renderer

try again

[chenqy9]

@bovas85 Do solve my problem.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.