DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

[peterramsis]

Version

module: @nuxtjs/auth-next": "5.0.0-1643791578.532b3d6 nuxt: ^2.15.8

Nuxt configuration

mode:

universal

Nuxt configuration

import colors from 'vuetify/es5/util/colors'

export default {
    // Target: https://go.nuxtjs.dev/config-target
    target: 'static',

    // Global page headers: https://go.nuxtjs.dev/config-head
    head: {
        titleTemplate: '%s - frontend',
        title: 'frontend',
        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: [],

    // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
    plugins: [
        '~/plugins/mixin/vaildation.js',
        '~/plugins/axios.js',
        '~/plugins/user.js'
    ],

    // 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/vuetify
        '@nuxtjs/vuetify',
    ],

    // Modules: https://go.nuxtjs.dev/config-modules
    modules: [
        // https://go.nuxtjs.dev/axios
        '@nuxtjs/axios',
        '@nuxtjs/auth-next'
    ],

    // Axios module configuration: https://go.nuxtjs.dev/config-axios
    axios: {
        // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
        baseURL: 'http://127.0.0.1:8000/api',
    },

    router: {
        middleware: ['clearValidationError']
    },

    // Vuetify module configuration: https://go.nuxtjs.dev/config-vuetify
    vuetify: {
        customVariables: ['~/assets/variables.scss'],
        theme: {
            dark: true,
            themes: {
                dark: {
                    primary: colors.blue.darken2,
                    accent: colors.grey.darken3,
                    secondary: colors.amber.darken3,
                    info: colors.teal.lighten1,
                    warning: colors.amber.base,
                    error: colors.deepOrange.accent4,
                    success: colors.green.accent3,
                },
            },
        },
    },

    auth: {

        strategies: {
            local: {
                token: {
                    property: 'token',
                    global: true,
                    // required: true,
                    // type: 'Bearer'
                },
                endpoints: {
                    login: { url: 'login', method: 'post', propertyName: 'token' },
                    user: { url: 'me', method: 'get', propertyName: 'data.data' },
                    logout: { url: '/logout', method: 'get', propertyName: false },
                },
            },
        },
        redirect: {
            login: '/login',
            home: '/',
        },
        // plugins: ['./plugins/auth'],
    },

    // Build Configuration: https://go.nuxtjs.dev/config-build
    build: {
        // extractCss: true,
        // collapseBooleanAttributes: true,
        // decodeEntities: true,
        // minifyCSS: true,
        // minifyJS: true,
        // processConditionalComments: true,
        // removeEmptyAttributes: true,
        // removeRedundantAttributes: true,
        // trimCustomFragments: true,
        // useShortDoctype: true,
        extend(config, ctx) {
            // if (ctx.isDev && ctx.isClient) {
            //     config.module.rules.push({
            //         enforce: 'pre',
            //         test: /\.(js|vue)$/,
            //         exclude: /(node_modules)/,
            //         options: {
            //             fix: true
            //         }
            //     });
            // }
        },
        minify: {
            collapseBooleanAttributes: true,
            decodeEntities: true,
            minifyCSS: true,
            minifyJS: true,
            processConditionalComments: true,
            removeEmptyAttributes: true,
            removeRedundantAttributes: true,
            trimCustomFragments: true,
            useShortDoctype: true
        }

    },
    // generate: {
    //     minify: false
    // }
}

Reproduction

:warning: without a minimal reproduction we won't be able to look into your issue

What is expected?

What is actually happening?

Steps to reproduce

Additional information

Checklist

• [x] I have tested with the latest Nuxt version and the issue still occurs
• [x] I have tested with the latest module version and the issue still occurs
• [x] I have searched the issue tracker and this issue hasn't been reported yet

Steps to reproduce

What is expected?

What is actually happening?

https://watch.screencastify.com/v/JwHirMmfzM8pkk2qQuEt

middleware guest

   console.log(`test---${store.getters['authenticated']}`);

    if (app.$auth.loggedIn) {
        return redirect('/home');
    }

this issue after

npm run build and npm run generate

Performance analysis?

[Intevel]

How to reproduce this? And are you sure this error is about auth-module?

[peterramsis]

Every page is working fine if I return page login was error showing

[Intevel]

@peterramsis can you provide the way how to reproduce?

[peterramsis]

@Intevel I think if you use v-if you should change v-if to v-show

[Intevel]

This is the way to reproduce? Or what do you mean?

[asadullakkh]

any luck? I have the same issue with nuxtjs/auth-next, ssr true

[asadullakkh]

any luck? I have the same issue with nuxtjs/auth-next, ssr true

By the way, I fixed this error. And I found this is not related to nuxtjs/auth-next or ssr. The error occured because of wrong html markup.