dat.gui can no longer be imported in Nuxt with version 3.11.2. How else could I import it? I still have the same "window is not defined" with the import * as dat from "dat.gui". But will also get "require is not defined" if I try the const dat = require("dat.gui").

PS E:\learning\Web Dev\HTML\Chris Course\firstthreejs> npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: orbit-controls-es6@2.0.1
npm ERR! Found: three@0.160.1
npm ERR! node_modules/three
npm ERR!   dev three@"^0.160.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer three@"0.108.0" from orbit-controls-es6@2.0.1
npm ERR! node_modules/orbit-controls-es6
npm ERR!   orbit-controls-es6@"^2.0.1" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: three@0.108.0
npm ERR! node_modules/three
npm ERR!   peer three@"0.108.0" from orbit-controls-es6@2.0.1
npm ERR!   node_modules/orbit-controls-es6
npm ERR!     orbit-controls-es6@"^2.0.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\HKP\AppData\Local\npm-cache\_logs\2024-01-30T16_36_27_684Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\HKP\AppData\Local\npm-cache\_logs\2024-01-30T16_36_27_684Z-debug-0.log

Nuxt is so hard to use

I got this error, and in my website

it said 500

ambiguous indirect export: FlatShading

what should i do the fix it

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!