Nuxt ошибка 500

Reproduction: https://stackblitz.com/edit/nuxt-starter-ykdhnn?file=nuxt.config.ts (hacky, see notes).

I started running into this issue quite a bit, I believe it’s related to Nitro v2 and did some digging today.

For me, what I’ve found is that this occurs when your workspace directory is being transpiled.

I have a replication with my nuxt-og-image repo: https://github.com/harlan-zw/nuxt-og-image/tree/temp/bugged-playground (pnpm i && pnpm run dev)

My setup is a playground directory as a subfolder of a module. The playground links the module using a link in package.json

export default defineNuxtConfig({
  modules: [
    'nuxt-og-image',
  ],
})

{
  "dependencies": {
    "nuxt-og-image": "link:../"
  }
}

With my setup it seems like a deeper issue with the node module resolution, pointing to the directory with the package.json instead of the /dist folder, leading it to inline vue again?

The issue was pretty easy to solve in this case, by swapping to a directory path instead of relying on the node module resolving. Don’t think it helps OP in this case.

export default defineNuxtConfig({
  modules: [
    resolve(__dirname, '../src/module'),
  ],
})

I tried to replication this in StackBlitz without much success using a similar setup as the above. I had to just manually point to the workspace dir to be transpiled and I could replicate it, see reproduction.

So in summary, I believe this is a Nitro issue with the inlining of deps, possibly module resolution issue (possibly with symlinks?). Related code would be this function https://github.com/unjs/nitro/blob/main/src/rollup/plugins/externals.ts#LL22C19-L22C19

@pi0 might have some ideas

I recently updated some dependencies in my Nuxt app, and now I’m unable to start the app. When I try to access the app at localhost:3000, I receive a 500 error. However, when I check the server console in my terminal, I don’t see any errors being thrown.

The error message I’m seeing in the browser console is:

500
[vite-node] [plugin:vite:import-analysis] [VITE_ERROR] /@fs./node_modules/nuxt/dist/app/entry.mjs

import { createSSRApp, createApp, nextTick } from "vue";
import { $fetch } from "ofetch";
import { baseURL } from "#build/paths.mjs";
import { createNuxtApp, applyPlugins, normalizePlugins } from "#app";
import "#build/css";
import _plugins from "#build/plugins";
import RootComponent from "#build/root-component.mjs";
import { appRootId } from "#build/nuxt.config.mjs";
if (!globalThis.$fetch) {
  globalThis.$fetch = $fetch.create({
    baseURL: baseURL()
  });
}
let entry;
const plugins = normalizePlugins(_plugins);
if (true) {
  entry = async function createNuxtAppServer(ssrContext) {
    const vueApp = createApp(RootComponent);
    const nuxt = createNuxtApp({ vueApp, ssrContext });
    try {
      await applyPlugins(nuxt, plugins);
      await nuxt.hooks.callHook("app:created", vueApp);
    } catch (err) {
      await nuxt.callHook("app:error", err);
      nuxt.payload.error = nuxt.payload.error || err;
    }
    return vueApp;
  };
}
if (false) {
  if (true && import.meta.webpackHot) {
    import.meta.webpackHot.accept();
  }
  entry = async function initApp() {
    const isSSR = Boolean(window.__NUXT__?.serverRendered);
    const vueApp = isSSR ? createSSRApp(RootComponent) : createApp(RootComponent);
    const nuxt = createNuxtApp({ vueApp });
    try {
      await applyPlugins(nuxt, plugins);
    } catch (err) {
      await nuxt.callHook("app:error", err);
      nuxt.payload.error = nuxt.payload.error || err;
    }
    try {
      await nuxt.hooks.callHook("app:created", vueApp);
      await nuxt.hooks.callHook("app:beforeMount", vueApp);
      vueApp.mount("#" + appRootId);
      await nuxt.hooks.callHook("app:mounted", vueApp);
      await nextTick();
    } catch (err) {
      await nuxt.callHook("app:error", err);
      nuxt.payload.error = nuxt.payload.error || err;
    }
  };
  entry().catch((error) => {
    console.error("Error while mounting app:", error);
  });
}
export default (ctx) => entry(ctx);

at /@fs./node_modules/nuxt/dist/app/entry.mjs

This is my package.json:

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@nuxtjs/i18n": "^8.0.0-beta.6",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/supabase": "^0.3.1",
    "autoprefixer": "^10.4.13",
    "nuxt": "3.0.0",
    "postcss": "^8.4.19",
    "sass": "^1.56.1",
    "tailwindcss": "^3.2.4"
  },
  "dependencies": {
    "@formkit/addons": "^0.16.5",
    "@formkit/nuxt": "^0.16.5",
    "@formkit/tailwindcss": "^0.16.5",
    "@formkit/themes": "^0.16.5",
    "@fortawesome/fontawesome-svg-core": "^6.2.1",
    "@fortawesome/free-brands-svg-icons": "^6.2.1",
    "@fortawesome/free-solid-svg-icons": "^6.2.1",
    "@fortawesome/vue-fontawesome": "^3.0.2",
    "@hcaptcha/vue-hcaptcha": "^0.3.2",
    "@nuxtjs/algolia": "^1.5.0",
    "@nuxtjs/tailwindcss": "^6.1.3",
    "@tailwindcss/forms": "^0.5.3",
    "@vueuse/motion": "^2.0.0-beta.12",
    "i18n-iso-countries": "^7.5.0",
    "is-eu-member": "^1.0.6",
    "maska": "^2.1.7",
    "tailwind-css-variables": "^3.0.1",
    "tailwindcss-hyphens": "^0.1.0",
    "trie-search": "^1.3.6",
    "vue-number-animation": "^1.1.2",
    "vue-tailwind-datepicker": "^1.3.2",
    "vue-uuid": "^3.0.0"
  }
}

This is my nuxt.config.ts:

import postcss from './config/postcss'

export default defineNuxtConfig({
    app: {
        pageTransition: { name: 'page', mode: 'out-in' },
    },
    pwa: {
        manifest: {
            name: 'RightsPlus',
            description: "Fluggastrechte",
            theme_color: '#f97316',
            short_name: 'RightsPlus'
        }
    },
    modules: [
        '@nuxtjs/algolia',
        '@nuxtjs/i18n',
        '@formkit/nuxt',
        '@nuxtjs/supabase',
    ],
    buildModules: [
        '@nuxtjs/pwa',
    ],
    nitro: {
        compressPublicAssets: true,
    },
    formkit: {
        configFile: '~/formkit.config.ts',
    },
    css: [
        '~/assets/css/main.scss',
        '~/assets/css/transitions.css',
        '@fortawesome/fontawesome-svg-core/styles.css'
    ],
    i18n: {
        vueI18n: './i18n.config.ts' // if you are using custom path, default 
    },
    postcss,
    sourcemap: {
        server: process.env.NODE_ENV === 'development',
        client: process.env.NODE_ENV === 'development',
    },
    runtimeConfig: {
        public: {
            google: {
                key: process.env.GOOGLE_KEY,
                placeId: process.env.GOOGLE_PLACE_ID
            },
            flight: {
                aviationstack: process.env.AVIATIONSTACK_KEY,
                flighlabs: process.env.FLIGHTLABS_KEY,
                key: process.env.APP_KEY,
                appId: process.env.APP_ID
            }
        },
    }
})

Anyone got a hunch as to where to start looking?