2023 UPDATE:

Hello all. Much like others here, I too have had to do some deep diving into this issue. After many hours of trial and error, I finally got this to work properly.

(Start this procedure in /node folder)

Solution – 1

The error comes from the recent Nuxt 3 Release and is being tracked on the create-nuxt-app Github.

Create-nuxt-app is not compatible with Nuxt 3 yet. Therefore, for now, you have to install Nuxt 3 and Tailwind CSS manually:

npx nuxi init <project-name>
cd <project-name>
npm install
npm install @nuxtjs/tailwindcss --save-dev

Now you should be able to run your app as expected:

npm run dev

To anyone looking to follow this tutorial in 2023, just know there are many outdated things as well as things he forgot to mention that could make your experience much more difficult - as I have found out myself.

For starters, he does not mention that for create-nuxt-app to work you must have nuxt installed globally on your system. I had to create a vue application and run npm i -g create-nuxt-app in the terminal just for the command to be recognized. Then you will be able to follow the prompts he does to create the app.

The next issue I ran into and have not been able to solve after several hours of attempting is once I created the app and opened it in the text editor, I ran the npm run dev and have ran into more error messages.

Error: error:0308010C:digital envelope routines::unsupported

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],

library: 'digital envelope routines',

reason: 'unsupported',

code: 'ERR_OSSL_EVP_UNSUPPORTED'

and

   ╭─────────────────────────────────────────────────────────────────────────────────╮
   │                                                                      │
   │   ✖ Nuxt Fatal Error                                                   │
   │                                                                      │
   │   TypeError: Cannot destructure property 'nuxt' of 'this' as it is undefined. │
   │                                                                      │
   ╰─────────────────────────────────────────────────────────────────────────────────╯

And after several hours wasted trying to find out how to fix this and allow me to run the dev server I am now conceding.

Just a warning to be prepared for future viewers.

Hi Chris, Could you explain why three.js newer versions breaks everything? I get a lot of errors related to ES as three.js is treated as an ES module file.

thanks

hi chris,

I'm trying to refactor the globe project to single page app but im getting error of Module parse failed i think which is related to vertex shader can you help me to resolve this issue

Below is the error im getting

Error

Module parse failed: Unexpected token (1:8) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders > varying vec2 vertexUV; | varying vec3 vertexNormal; |

Need help!

I kee getting errors, now I cant even start my server, please help!