0

I have the following problem: there is no issue when I run npm run dev everything works fine. However, when I run npm run build I get the following error:

Console:

[plugin @tailwindcss/vite:generate:build] Sourcemap is likely to be incorrect: a plugin (@tailwindcss/vite:generate:build) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help (x8)

✓ built in 6.50s                                                                                   
✔ Server built in 6527ms                                                                             
Initializing prerenderer

WARN  "file:///E:/Github/peterplevko.eu/frontend/node_modules/nuxt/dist/core/runtime/nitro/utils/cache-driver.js" is imported by "virtual:#nitro-internal-virtual/storage", but could not be resolved – treating it as an external dependency.

ERROR  appendHeader is not defined

at /E:/Github/peterplevko.eu/frontend/.nuxt/prerender/chunks/_/nitro.mjs:5484:17
at ModuleJob.run (node:internal/modules/esm/module_job:271:25)
at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:547:26)
at async prerender (/E:/Github/peterplevko.eu/frontend/node_modules/nuxt/node_modules/nitropack/dist/core/index.mjs:2034:44)
at async /E:/Github/peterplevko.eu/frontend/node_modules/nuxt/dist/shared/nuxt.CJ7ZnOUY.mjs:4671:5
at async build (/E:/Github/peterplevko.eu/frontend/node_modules/nuxt/dist/shared/nuxt.CJ7ZnOUY.mjs:7278:3)  
at async Object.run (/E:/Github/peterplevko.eu/frontend/node_modules/@nuxt/cli/dist/chunks/build.mjs:76:5)  
at async runCommand (/E:/Github/peterplevko.eu/frontend/node_modules/citty/dist/index.mjs:316:16)
at async runCommand (/E:/Github/peterplevko.eu/frontend/node_modules/citty/dist/index.mjs:307:11)
at async runMain (/E:/Github/peterplevko.eu/frontend/node_modules/citty/dist/index.mjs:445:7)

ERROR  appendHeader is not defined 

Image:

error

Here is my package.json

{
  "name": "nuxt-app",
  "private": true,
  "type": "module",
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview"
  },
  "dependencies": {
    "@heroicons/vue": "^2.2.0",
    "@nuxt/content": "^3.6.3",
    "@nuxt/image-edge": "^1.3.0-28493895.369b747",
    "@nuxtjs/seo": "^3.0.3",
    "@supabase/supabase-js": "^2.49.8",
    "@tmcw/togeojson": "^7.1.2",
    "@vueuse/core": "^13.3.0",
    "ajv": "^8.17.1",
    "better-sqlite3": "^12.2.0",
    "daisyui": "^5.0.37",
    "dayjs": "^1.11.13",
    "leaflet": "^1.9.4",
    "nitropack": "^2.8.1",
    "nuxt": "^3.17.7",
    "simplify-geojson": "^1.0.5",
    "vue": "^3.5.14",
    "vue-router": "^4.5.1"
  },
  "devDependencies": {
    "@nuxt/eslint": "^1.4.1",
    "@nuxtjs/tailwindcss": "^7.0.0-beta.0",
    "autoprefixer": "^10.4.21",
    "eslint": "^9.31.0",
    "postcss": "^8.5.3"
  }
}

Here is my nuxt.config.ts:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2025-05-15',
  devtools: { enabled: true },
  modules: [
    '@nuxtjs/tailwindcss',
    '@nuxt/eslint',
    '@nuxt/image-edge',
    'daisyui',
    '@nuxtjs/seo',
    '@nuxt/content'
  ],
  app: {
    head: {
      link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
      ]
    }
  },
  runtimeConfig: {
    public: {
      supabaseUrl: process.env.SUPABASE_URL,
      supabaseAnonKey: process.env.SUPABASE_ANON_KEY
    }
  },

  site: {
    url: 'https://www.peterplevko.eu',
    name: 'Peter Plevko',
    description: 'Cyklotrasy Bratislava - Najkrajšie cyklovýlety z Bratislavy. GPS súbory, fotky a podrobné popisy trás.',
    defaultLocale: 'sk',
    keywords: 'cyklotrasy Bratislava, cyklotrasa Bratislava, bicykel Bratislava, cyklovýlet Bratislava, cyklotrasy okolo Bratislavy, cyklocesty Bratislava, cyklistika Bratislava, blogs, sports, bratislava, trips, slovakia, bicycle, hiking, running, climbing',
  },
  sitemap: {
    enabled: true,
    xsl: false,
    sources: ['/api/sitemap/urls'],
  },
  nitro: {
    prerender: {
      crawlLinks: true,
      failOnError: false,
      autoSubfolderIndex: false,
    },
  },
  robots: {
    enabled: true,
    allow: ['/'],
    sitemap: '/sitemap.xml',
    metaTag: true,
},
  routeRules: {
    '/': {
      static: true,
      prerender: true,
    },
    '/bicycle/**': {
      static: true,
      prerender: true,
    },
    '/about': {
      static: true,
      prerender: true,
    },
    '/climbing': {
      static: true,
      prerender: true,
    },
    '/hiking': {
      static: true,
      prerender: true,
    },
    '/running': {
      static: true,
      prerender: true,
    },
    '/support': {
      static: true,
      prerender: true,
    },
    // Redirect rules for SEO
    'http://peterplevko.eu/**': {
      redirect: {
        to: 'https://www.peterplevko.eu$1',
        statusCode: 301
      }
    },
    'https://peterplevko.eu/**': {
      redirect: {
        to: 'https://www.peterplevko.eu$1',
        statusCode: 301
      }
    },
    'http://www.peterplevko.eu/**': {
      redirect: {
        to: 'https://www.peterplevko.eu$1',
        statusCode: 301
      }
    },
  },
})

Node version: v22.12.0

The problem appeared after I added map functionality to my website using Leaflet, but I have no idea why it's happening or how to fix it. I would really appreciate any help. Thanks in advance.

I fixed the problem myself just now the problem was this file frontend/server/api/routes.ts. After I removed it the build works.

export default defineEventHandler(async (event) => {
  try {
    const { queryCollection } = await import('#imports')
    const [bicycleArticles, runningArticles] = await Promise.all([
      queryCollection(event, 'bicycle').all(),
      queryCollection(event, 'running').all()
    ])
    const allArticles = [...bicycleArticles, ...runningArticles]

    const routesWithGeoJSON = await Promise.all(
      allArticles
        .filter(article => article.geojsonUrl)
        .map(async (article) => {
          let geojson = null
          if (article.geojsonUrl) {
            try {
              const response = await fetch(article.geojsonUrl)
              if (response.ok) {
                geojson = await response.json()
              }
            } catch (e) {
              console.error('Error fetching geojson:', e)
            }
          }
          return {
            ...article,
            geojsonUrl: article.geojsonUrl,
            geojson
          }
        })
    )

    return {
      success: true,
      routes: routesWithGeoJSON,
      total: routesWithGeoJSON.length,
      method: 'geojson-url-bundle'
    }
  } catch (error) {
    console.error('Error fetching routes:', error)
    return {
      success: false,
      error: error instanceof Error ? error.message : 'Unknown error',
      routes: []
    }
  }
}) 

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.