Nuxt•4mo ago

Can't run a new project

I've been coming back to Nuxt for months, and I try installing a starter project, only to get this. it has never happened before, so what gives?

16 Replies

kapa.ai•4mo ago

Hi @Saryn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry you're having trouble running a new Nuxt project. Based on the knowledge sources, there are a few recent issues that could be causing problems when starting a fresh Nuxt project: 1. Native Binding Error (oxc-parser) on Windows
Some users have reported an error like:

   ERROR  Cannot start nuxt:  Failed to load native binding

   ERROR  Cannot start nuxt:  Failed to load native binding

This is often accompanied by messages about missing native modules (e.g., parser.win32-x64-msvc.node). According to the Nuxt team, this seems to be an npm bug rather than a Nuxt issue. You might want to try deleting your node_modules and package-lock.json and reinstalling, or using a different package manager like Yarn or pnpm. If the problem persists, it may be related to your npm or Node.js version, so trying a different version could help.
See details here 2. esbuild/Vite Errors on macOS
On macOS, some users have encountered spawn EBADF errors when using Vite as the builder. A workaround is to add an override for the esbuild version in your package.json:

   "overrides": {
     "esbuild": "0.15.15"
   }

   "overrides": {
     "esbuild": "0.15.15"
   }

However, this may still result in warnings, and the underlying issue seems to be related to package manager quirks and esbuild versioning.
See details here 3. General Advice for New Projects
Make sure you are using a supported Node.js version (18.x or newer, preferably an even-numbered LTS version) and the latest stable npm, Yarn, or pnpm. The recommended way to start a new project is:

   npm create nuxt@latest <project-name>
   cd <project-name>
   npm install
   npm run dev

   npm create nuxt@latest <project-name>
   cd <project-name>
   npm install
   npm run dev

Official installation guide If you continue to encounter errors, please provide the exact error message you see when running npm run dev. This will help narrow down the cause. Also, consider trying a different package manager or Node.js version, as some recent issues appear to be related to those tools rather than Nuxt itself. If none of these solutions work, you can reach out to the Nuxt community for real-time help on Discord or open a GitHub Discussion with your error details and environment information, as suggested in the Nuxt community help guide. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1245710245192269917> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

💕 | In Love SarynOP•4mo ago

@kapa.ai Internal server error: [postcss] D:/VSCode Projects/VeryActiveWeb/app.vue?vue&type=style&index=0&lang.postcss:1:1: Unknown word <template> Plugin: vite:css File: D:/VSCode Projects/VeryActiveWeb/app.vue?vue&type=style&index=0&lang.postcss:1:0 1 | <template> | ^ 2 | <div> 3 | <NuxtRouteAnnouncer />

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The error you're seeing:

Internal server error: [postcss] ...app.vue?vue&type=style&index=0&lang.postcss:1:1: Unknown word <template>
  Plugin: vite:css

Internal server error: [postcss] ...app.vue?vue&type=style&index=0&lang.postcss:1:1: Unknown word <template>
  Plugin: vite:css

indicates that PostCSS is trying to process your entire .vue file—including the <template> block—as if it were a CSS file. This usually happens if the <style> block in your .vue file is missing or misconfigured, or if the lang="postcss" attribute is used incorrectly. Correct usage:
You should only use lang="postcss" on the <style> block, not on the entire file. For example:

<template>
  <div>
    <NuxtRouteAnnouncer />
  </div>
</template>

<style lang="postcss">
/* Write your PostCSS here */
</style>

<template>
  <div>
    <NuxtRouteAnnouncer />
  </div>
</template>

<style lang="postcss">
/* Write your PostCSS here */
</style>

If you accidentally put lang="postcss" on the <template> or at the top of the file, PostCSS will try to parse the whole file, resulting in the "Unknown word <template>" error. What to check: - Make sure your <style> block is correctly defined with lang="postcss". - Do not use lang="postcss" on the <template> or <script> blocks. - Ensure your file structure matches the example above. For more on using PostCSS in Nuxt, see the official documentation:
Using PostCSS in Nuxt If you follow this structure and still see the error, double-check for typos or misplaced attributes in your .vue file. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1245710245192269917> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

💕 | In Love SarynOP•4mo ago

@kapa.ai The request url "D:\VSCode Projects\ToDoWeekly\node_modules@nuxt\ui\dist\runtime\ui.css" is outside of Vite serving allow list. (

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The error message:

The request url "D:\VSCode Projects\ToDoWeekly\node_modules\@nuxt\ui\dist\runtime\ui.css" is outside of Vite serving allow list.

The request url "D:\VSCode Projects\ToDoWeekly\node_modules\@nuxt\ui\dist\runtime\ui.css" is outside of Vite serving allow list.

means that Vite is blocking access to files outside its configured fs.allow list. This is a known issue, especially on Windows, where Vite's file system access restrictions can prevent serving files from certain locations, such as node_modules. Solution:
You need to explicitly allow Vite to serve files from your node_modules directory by updating your nuxt.config.ts (or nuxt.config.js) with the following Vite configuration:

import { fileURLToPath } from 'url'
import { dirname, resolve } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  vite: {
    server: {
      fs: {
        allow: [
          resolve(currentDir),
          resolve(currentDir, 'node_modules'),
        ]
      }
    }
  }
})

import { fileURLToPath } from 'url'
import { dirname, resolve } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  vite: {
    server: {
      fs: {
        allow: [
          resolve(currentDir),
          resolve(currentDir, 'node_modules'),
        ]
      }
    }
  }
})

This configuration ensures that Vite can access both your project directory and the node_modules folder, resolving the "outside of Vite serving allow list" error. This workaround is specifically mentioned as a Windows fix in the knowledge sources 403 Forbidden Windows fix. If you continue to have issues, make sure you are using the latest version of Nuxt and Vite, as improvements and fixes for these file system access issues have been made in recent releases. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1245710245192269917> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

💕 | In Love SarynOP•4mo ago

@kapa.ai still returns the same error

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I'm sorry you're still encountering the same error after updating your Vite fs.allow configuration. Based on the knowledge sources, this issue is known to occur on Windows, particularly when Vite is unable to serve files from node_modules due to file system restrictions. The recommended workaround, as described in the knowledge sources, is to explicitly add both your project directory and the node_modules directory to the Vite fs.allow list in your nuxt.config.ts:

import { fileURLToPath } from 'url'
import { dirname, resolve } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  vite: {
    server: {
      fs: {
        allow: [
          resolve(currentDir),
          resolve(currentDir, 'node_modules'),
        ]
      }
    }
  }
})

import { fileURLToPath } from 'url'
import { dirname, resolve } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  vite: {
    server: {
      fs: {
        allow: [
          resolve(currentDir),
          resolve(currentDir, 'node_modules'),
        ]
      }
    }
  }
})

This solution has been reported to resolve the "outside of Vite serving allow list" error for some users on Windows 403 Forbidden Windows fix. However, if you have already applied this configuration and the error persists, the knowledge sources do not provide any additional or alternative solutions. There may be other factors at play, such as specific versions of Nuxt, Vite, or your package manager, but the sources do not explicitly address further troubleshooting steps for this scenario. If the problem continues, you may want to ensure: - You are using the latest versions of Nuxt and Vite. - There are no typos or path issues in your configuration. - You have restarted your development server after making changes. If none of these steps resolve the issue, the knowledge sources do not contain enough information to provide a more specific solution. You may need to seek further help from the Nuxt community or GitHub discussions. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1245710245192269917> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

💕 | In Love SarynOP•4mo ago

@kapa.ai GET http://localhost:3000/_nuxt/@fs/D:/VSCode%20Projects/ToDoWeekly/node_modules/@nuxt/ui/dist/runtime/ui.css net::ERR_ABORTED 403 (Forbidden) localhost/:41

GET http://localhost:3000/_nuxt/D:/VSCode%20Projects/ToDoWeekly/node_modules/nuxt/dist/app/entry.js net::ERR_ABORTED 404 (Server Error) In the console

kapa.ai•4mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- The errors you're seeing:

GET <http://localhost:3000/_nuxt/@fs/D:/VSCode%20Projects/ToDoWeekly/node_modules/@nuxt/ui/dist/runtime/ui.css> net::ERR_ABORTED 403 (Forbidden)
GET <http://localhost:3000/_nuxt/D:/VSCode%20Projects/ToDoWeekly/node_modules/nuxt/dist/app/entry.js> net::ERR_ABORTED 404 (Server Error)

GET <http://localhost:3000/_nuxt/@fs/D:/VSCode%20Projects/ToDoWeekly/node_modules/@nuxt/ui/dist/runtime/ui.css> net::ERR_ABORTED 403 (Forbidden)
GET <http://localhost:3000/_nuxt/D:/VSCode%20Projects/ToDoWeekly/node_modules/nuxt/dist/app/entry.js> net::ERR_ABORTED 404 (Server Error)

indicate two main issues: 1. 403 Forbidden for node_modules assets
This is a known issue on Windows where Vite blocks access to files outside its allowed file system paths. The recommended workaround is to explicitly add both your project directory and the node_modules directory to the Vite fs.allow list in your nuxt.config.ts:

   import { fileURLToPath } from 'url'
   import { dirname, resolve } from 'path'

   const currentDir = dirname(fileURLToPath(import.meta.url))

   export default defineNuxtConfig({
     vite: {
       server: {
         fs: {
           allow: [
             resolve(currentDir),
             resolve(currentDir, 'node_modules'),
           ]
         }
       }
     }
   })

   import { fileURLToPath } from 'url'
   import { dirname, resolve } from 'path'

   const currentDir = dirname(fileURLToPath(import.meta.url))

   export default defineNuxtConfig({
     vite: {
       server: {
         fs: {
           allow: [
             resolve(currentDir),
             resolve(currentDir, 'node_modules'),
           ]
         }
       }
     }
   })

This solution is specifically mentioned as a Windows fix in the knowledge sources 403 Forbidden Windows fix. 2. 404 Not Found for Nuxt entry.js
This error suggests that the Nuxt build output is missing or not being served correctly. This can sometimes happen if the project is not built properly, or if there are misconfigurations or permission issues. If you have already applied the fs.allow workaround and still see the 403 error, the knowledge sources do not provide any further solutions. This issue has been acknowledged in the Nuxt repository, and the only documented fix is the fs.allow configuration. If it does not resolve your issue, it may be due to a bug or an environment-specific problem that is not covered in the available documentation. Next steps: - Double-check your nuxt.config.ts for typos and ensure the paths are correct. - Delete node_modules and package-lock.json (or yarn.lock/pnpm-lock.yaml), then reinstall dependencies and restart the dev server. - Make sure you are using the latest versions of Nuxt and Vite. - If the problem persists, consider opening an issue on the Nuxt GitHub or seeking help in the Nuxt community, as the knowledge sources do not contain enough information to provide a more specific solution. If you have more details or error logs, please share them, but based on the current knowledge sources, this is the most accurate guidance available. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@1245710245192269917> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

johntanzer•4mo ago

Hey. Use wsl.

💕 | In Love SarynOP•4mo ago

Yeah, i figured this was a Windows issue. thank you!

Gaming

Programming

Can't run a new project

Did you find this page helpful?