Initializing a base Nuxt 3 application fails to run

315 Views Asked by At

Following the getting started instructions here and here:

Trying to run the default application immediately afterwards fails. There are no compiler errors or warnings in run dev. Browsing to localhost:3000 fails to render and there are several errors in the browser console window.

  • Uncaught SyntaxError: Cannot use 'import.meta' outside a module (at (index):43:16)
  • Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.(client:1)
  • Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec. (app-index.ts:1)
  • Manifest: Line: 1, column: 1, Syntax error. (many)

The title of the page that fails to load is "PWA Starter"

I checked existing requisites and I've tried utilizing different package managers [npm, yarn, pnpm] with the same results.

npx nuxi@latest init <project-name>

pnpm dlx nuxi@latest init <project-name>

etc.

I expected after scaffolding up a base application, with zero modifications, that it would display the NuxtWelcome page.

What resulted is a blank page and what looks like internal cryptic errors in the console.

These additional things I've tried which may have initially worked (first run), but subsequent runs exhibited the same issue.

  1. npx nuxi-nightly@latest init no-init-app --force --no-install
  2. installing @vite-pwa/nuxt and adding to nuxt.config modules
  3. Incrementally stepping back from LTM Node versions, from 20.10 - 18.19
  4. Leveraging different package managers pnpm, npm, yarn (haven't tried bun)
  5. Cloning from a 'working' base Netlify deployment
  6. Tried using **nightly**, **latest** and **stable** builds
  7. Fails to initialize/execute on run dev, run build or run preview

I suspect it has something internally with Vite transpiling on the windows platform but I am uncertain how to work around the issue.

If I could disable the option of PWA in the project (it's not a requirement) I could actually just move past this.

NOTE: I tried disabling @vite/pwa by setting the pwa.client.registerPlugin to 'false' in the nuxt.config, but it didn't seem to matter.

Environment: Windows 10 Enterprise v22H2 build 19045.3693

  • Node v20.10.0 (using NVM)
  • NPM v10.2.3
  • PNPM v8.11.0
  • Yarn v1.22.19
  • NPX v10.2.3
  • Nuxi v3.10.0

Has anyone come across this or have a workaround?

Error source

Console error

Update: For those wondering - installing Kali inside of WSL and running the same commands works as expected. So it appears to be definitely some kind of transpile problem in Windows, which is unfortunate. Make sure you use pnpm as the package manager since npm doesn't support UNC paths that are needed in this type of environment.

If you are looking to do the same, since I don't know if this will ever be reconciled. Here is a link to get you started. Kali Linux gets a GUI desktop in Windows Subsystem for Linux

When running updates - you will probably run across an issue of not finding the repository. This is because the

etc/resolv.config

adds an ip under the nameserver entry that doesn't work when running as a windows subsystem. Change that to 8.8.8.8 and you should be good to go. The rest I'll leave as an exercise for the reader.

enter image description here

0

There are 0 best solutions below