Cannot import dat.gui in react-three-fiber

Question

For a project made with react-three-fiber I imported the following libraries:

import * as THREE from 'three';
import React, { Suspense, useState } from "react";
import { Canvas, useLoader } from "@react-three/fiber";
import { OrbitControls } from "@react-three/drei";

which worked fine, then I decided to make a tidier UI for the scene and tried to import import { GUI } from '/jsm/libs/dat.gui.module'; according to https://sbcode.net/threejs/dat-gui/

However it showed an error:

Failed to compile
./src/App.js
Module not found: You attempted to import /jsm/libs/dat.gui.module which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
This error occurred during the build time and cannot be dismissed.

Which is odd because the four previous libraries are outside src.

I then tried putting the relative path but the compiler cannot resolve the path instead.

Then I tried moving the dat.gui.module.js file inside the src folder but the same Can't resolve error appeared.

This is the folder structure of my project:

-Project
 |-node_modules
 | L-(all the ext. libs including @react-three etc.)
 |-src
 | L-App.js
 L-public
   L-index.html

How do I get dat.gui working in my react-three-fiber project?

Answer 1

You have to import it like import { GUI } from 'three/examples/jsm/libs/dat.gui.module'. Then you can use it inside useEffect like below example.

const gui = new GUI()
useEffect(() => {
  const folder = gui.addFolder("Light")
  folder.add(lightRef.current, 'intensity', 0, 1, 0.001)
}, [])

Answer 2

you need to import dat.gui into react.js using dynamic import instead of static import.

instead of this:

import { GUI } from 'three/examples/jsm/libs/dat.gui.module'

try this inside componentDidMount or useEffect hook:

const { GUI } = await import('three/examples/jsm/libs/dat.gui.module')
const gui = new GUI()

or this:

import('three/examples/jsm/libs/dat.gui.module').then(({ GUI }) => {
  const gui = new GUI()
})

Answer 3

import GUI from dat.gui library

import * as dat from "dat.gui";

or just use dat-gui-react

React dat.GUI

Answer 4

I've created some documentation specifically for using Dat.GUI in React Three Fiber

https://sbcode.net/react-three-fiber/dat.gui/

Dat.GUI isn't written for React, so you do need to consider clean up in case of re-rendering JSX.

useEffect(() => {
    const gui = new GUI()
    gui.add(someObject, 'someProperty', minValue, maxValue)
    return () => {
      gui.destroy()
    }
  }, [])

Anyway, some examples, since I find it easier to explain using examples.

https://editor.sbcode.net/348ef2f2a58cab80e23ef038b4f93df408f68aa3

https://editor.sbcode.net/ea1c7654a7a943593b0e250af5b68602645ed20d

https://editor.sbcode.net/35094a3db3ace7db06731a7c540a7d2db45d0dfa