[Vue warn]: Error in data(): "Error: nuxt app instance unavailable"

nestle49 commented 2 years ago

Environment

Operating System: Darwin
Node Version: v16.15.0
Nuxt Version: 2.16.0-27707061.54e852f
Nitro Version: 0.4.24
Package Manager: npm@8.5.5
Builder: webpack
User Config: -
Runtime Modules: -
Build Modules: -

Reproduction

It's hard project, repro required a lot of time

Describe the bug

After migrate bridge I give error

---> <Error> at layouts/error.vue
       <Nuxt>
         <ErrorLayout> at layouts/ErrorLayout.vue
           <Root>

error.vue:

<template>
    <div class="_error-page text-center d-flex justify-content-center align-items-center">
        <div class="error">
            <img
                v-if="statusCode === 404"
                src="/assets/404/plain.svg"
                alt="404"
                class="error-404"
            >

            <div
                v-if="error.html"
                class="title"
                v-html="message"
            />

            <div
                v-else
                class="title"
            >{{ message }}</div>

            <p
                v-if="statusCode === 404"
                class="description txt-lh"
            >
                <nuxt-link
                    v-slot="{ href }"
                    custom
                    class="error-link"
                    :to="{ name: 'Main' }"
                >
                    <a :href="href">
                        {{ $t('backToTheHomePage') }}
                    </a>
                </nuxt-link>
            </p>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps, withDefaults } from '@vue/runtime-dom';
import { defineComponent, computed, useMeta, useContext } from '@nuxtjs/composition-api';
import { NuxtError } from '@nuxt/types';

interface IErrorProps {
    error?: NuxtError | null;
}

const props = withDefaults(defineProps<IErrorProps>(), {
    error: null
});

const statusCode = computed(() => (props.error && props.error.statusCode) || 500);

const { i18n } = useContext();

const message = computed(() => {
    if (props.error && props.error.message && props.error.messageNeedsToBeTranslated) {
        return i18n.t(props.error.message, { ...props.error.paramsForI18n });
    }

    return props.error?.message || 'Error'; // '<%= messages.client_error %>';
});

useMeta(() => ({
    title: message.value.toString(),
    meta: [
        {
            name: 'viewport',
            content: 'width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no'
        }
    ]
}));
</script>
<script lang="ts">
export default defineComponent({
    head: {},
    layout: 'ErrorLayout'
});
</script>

After change:

const { i18n } = useNuxtApp();

And removed:

import { defineComponent, computed, useMeta, useContext } from '@nuxtjs/composition-api';

And I get error: [Vue warn]: Error in data(): "Error: nuxt app instance unavailable"

Additional context

No response

Logs

No response

Rigo-m commented 2 years ago

I have the same issue after upgrading bridge version of a previously-working bridge project (older bridge version was ca. 7 months old). I'll try to provide a reproduction

Rigo-m commented 2 years ago

@nestle49 what is your nuxt bridge config like?

nestle49 commented 2 years ago

@nestle49

const config: NuxtConfig = {
    version,
    telemetry: false,
    head: {
        link: [],
        script: []
    },
    publicRuntimeConfig: {},
    loading: false,
    css: ['normalize.css', '~/assets/fonts/font.css', '~/assets/global.scss', '~/assets/global_color.scss'],
    plugins: [
        { src: '~/plugins/init.server.ts' },
        { src: '~/plugins/inputmask.js', mode: 'client' },
        { src: '~/plugins/global.ts' },
        { src: '~/plugins/initializeClient.ts', mode: 'client' },
        { src: '~/plugins/axios.ts' },
        { src: '~plugins/vue-router-back-button.js', mode: 'client' },
        { src: '~/plugins/conflictingZones.ts', mode: 'client' },
        { src: '~/plugins/saveUtmTags.ts', mode: 'server' },
        { src: '~/plugins/windowInnerDimensions.ts', mode: 'client' },
        { src: '~/plugins/vkBridge.js', mode: 'client' },
        { src: '~/plugins/specialOffer.js', mode: 'client' }
    ],
    buildModules: [
        ['@nuxt/typescript-build', { typeCheck: false } as Options],
        [
            '@nuxtjs/router',
            {
                path: '.',
                fileName: 'router.ts',
                keepDefaultRouter: true
            } as ModuleOptions
        ],
        // Nuxt 2 only:
        // https://composition-api.nuxtjs.org/getting-started/setup#quick-start
        '@nuxtjs/composition-api/module',
        'unplugin-vue2-script-setup/nuxt',
        '@pinia/nuxt'
    ],
    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/svg-sprite',
        'cookie-universal-nuxt',
        'nuxt-user-agent', // https://www.npmjs.com/package/@nuxtjs/device
        'portal-vue/nuxt',
        '~/modules/errorMiddleware.ts',
        '~/modules/insertingAdditionalHtmlCode.ts',
        '~/modules/ssrCache.ts',
        '@nuxtjs/dayjs'
    ],
    watch: ['~/modules'],
    axios: {
        proxy: true
    },
    dayjs: {
        locales: [
            'ru',
            'en',
            'uk',
            'hy-am',
            'km',
            'uz',
            'az',
            'ka',
            'tr',
            'pt',
            'be',
            'cs',
            'de',
            'pl',
            'sr',
            'ro',
            'fr',
            'kk',
            'ky',
            'tg',
            'et',
            'sr'
        ],
        plugins: [
            'utc', // import 'dayjs/plugin/utc'
            'timezone', // import 'dayjs/plugin/timezone'
            'isoWeek', // import 'dayjs/plugin/isoWeek'
            'customParseFormat', // import 'dayjs/plugin/customParseFormat'
            'isBetween', // import 'dayjs/plugin/isBetween'
            'dayOfYear', // import 'dayjs/plugin/dayOfYear'
            'minMax', // import 'dayjs/plugin/minMax'
            'objectSupport', // import 'dayjs/plugin/objectSupport'
            'toObject', // import 'dayjs/plugin/toObject',
            'weekday', // import 'dayjs/plugin/weekday',
            'pluralGetSet' // import 'dayjs/plugin/pluralGetSet'
        ]
    },
    /*
     ** Build configuration
     */
    build: {
        // analyze: true,
        publicPath: !isDev ? '/assets/js/' : undefined,
        babel: {
            presets: () => [
                [
                    '@nuxt/babel-preset-app',
                    {
                        corejs: { version: 3 },
                        polyfills: ['es.global-this']
                    }
                ]
            ]
        },
        transpile: [
            'firebase',
            'vue-yandex-maps',
            'google-maps',
            'tinyqueue',
            'asn1.js',
            'p-timeout'
        ],
        extend(config) {
            // console.log('config', config);
            config.node = {
                fs: 'empty'
            };

            if (!config.module) {
                return;
            }

            config.module.rules.push({
                test: /\.svg$/,
                use: [
                    {
                        loader: 'babel-loader',
                    }
                ]
            });

            // null-loader
            config.module.rules.push({ test: /\.md$/, loader: 'null-loader' });
        }
    },
    serverMiddleware: [],
    /*
     ** i18n configuration
     */
    i18n: {
        locales: [],
        strategy: 'no_prefix',
        defaultLocale: 'ru',
        lazy: true,
        langDir: 'lang/',
        vueI18n: {
            fallbackLocale: 'ru'
        },
        detectBrowserLanguage: {
            useCookie: true,
            cookieKey: languageCookieKey
            // fallbackLocale: 'ru'
        }
    },
    render: {
        ssrLog: 'collapsed',
        bundleRenderer: {
            runInNewContext: false
        }
    },
    dev: isDev,
    globals: {
        id: () => `__Shop`,
        context: () => `__Shop__`
    }

Rigo-m commented 2 years ago

I solved this by removing the lock file (npm.lock or yarn.lock or whatever) and check that in my package json i have corresponding nuxt and nuxt kit versions before re-running deps installation

wattanx commented 9 months ago

It has not responded for a while, so I am closing it. Reopen is welcome.

nuxt / bridge