I'm trying to use #react-three/drei. I've successfully installed and used #react-three/fiber but when I installed #react-three/drei. I get the following error:
./node_modules/three-stdlib/lights/RectAreaLightUniformsLib.js
Attempted import error: 'DataUtils' is not exported from 'three'.
Getting the error when I use this import for #react-three/drei-
import { Preload, ScrollControls, Scroll, useScroll, Image, useFBO, PerspectiveCamera } from '#react-three/drei'
App.jsx
import * as THREE from 'three'
import { Suspense, useRef, useState } from 'react'
import { Canvas, useFrame, useThree } from '#react-three/fiber'
import { Preload, ScrollControls, Scroll, useScroll, Image, useFBO, PerspectiveCamera } from '#react-three/drei'
import SiteNav from "./components/Nav/Nav"
import MainContainer from "./pages/MainContainer";
function App() {
return (
<div className="App">
<SiteNav />
<MainContainer />
</div>
)
}
export default App;
Any help would be appreciated! Thanks
I think the problem here is react-three/drei uses stand alone three-stdlib npm i three-stdlib should solve the problem.
https://github.com/pmndrs/drei react-drei docs says the following:
A growing collection of useful helpers and abstractions for react-three-fiber.
npm install #react-three/drei 👉 this package is using the stand-alone
three-stdlib instead of three/examples/jsm. 👈
Related
I am trying to import some icons from react-icons package and use it in the ReactNavbar but the icon is not showing up.
Please help me to get the icon show up!!
import React from 'react'
import {ReactNavbar} from "overlay-navbar"
import logo from "../../images/logo.png"
import {FaUserAlt} from "react-icons/fa"
const Header = () => {
return <ReactNavbar
navColor1='white'
navColor2="hsl(219,48%,8%)"
burgerColor="hsl(250,100%,75%)"
burgerColorHover="hsl(250,100%,75%)"
logo={logo}
logoWidth="250px"
logoColorHover="hsl(250,100%,75%)"
nav2justifyContent="space-around"
nav3justifyContent="space-around"
link1Text="Home"
link2Text="About"
link3Text="Projects"
link4Text="Contact"
link1Url="/"
link2Url="/about"
link3Url="/projects"
link4Url="/contact"
link1ColorHover="white"
link1Color="HSL(250,100%,75%)"
link1Size="1.5rem"
link1Padding="3vmax"
profileIcon={true}
profileIconElement={<FaUserAlt/>}
/>
}
export default Header
I am using SwiperJS in Next.js and trying to set up custom navigation. I want to use the useSwiper hook as explained in the docs (https://swiperjs.com/react#use-swiper) but the import is not working.
When trying to import the hook;
import {Swiper, SwiperSlide, useSwiper} from 'swiper/react/swiper-react' i am running in to error Attempted import error: 'useSwiper' is not exported from 'swiper/react/swiper-react'.
I have checked the swiper-react.js file and as far as i can see it does export the useSwiper hook;
import { Swiper } from './swiper.js';
import { SwiperSlide } from './swiper-slide.js';
export { useSwiperSlide, useSwiper } from './context.js';
export { Swiper, SwiperSlide }
The Swiper and SwiperSlide imports are working fine.
Unsure as to why this is happening if anyone can please help?
I am using Create React App and have imported the way the documentation says to do, since Create React App doesn't support pure ESM packages yet.
import { EffectCards } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react/swiper-react.js";
But I get the error: Attempted import error: 'EffectCards' is not exported from 'swiper'.
EffectFade works fine, so why not EffectCards? Where else is it being exported from to be imported using Create React App?
The official documents stated that: "By default Swiper React uses core version of Swiper (without any additional components). If you want to use Navigation, Pagination and other components, you have to install them first."
To install them:
import SwiperCore, { EffectFade, EffectCards } from "swiper";
SwiperCore.use([EffectFade, EffectCards]);
In my case ("swiper": "^8.2.2") changing import statements helped
import { Swiper, SwiperSlide } from 'swiper/react/swiper-react.js';
import 'swiper/swiper.scss'; // core Swiper
import 'swiper/modules/effect-cards/effect-cards.scss';
import { EffectCards } from "swiper";
I tried to use react dnd in my react web application. I create a js file call withDnDContext.js. When I compile it, I received an error 'react-dnd' does not contain an export named 'DragDropContext'. My react-dnd version is latest one 9.3.2
This is my withDnDContext.js
import { DragDropContext } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
export default DragDropContext(HTML5Backend);
Anyone know how to solve this?
If you use the latest version of react dnd, DragDropContext has been replaced with DndContext. Please see React-DnD V8
My top component looks like this;
import { React } from 'react';
import { DndProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
export default class MyApp {
render() {
return (
<DndProvider backend={HTML5Backend}>
<MyComp />
</DndProvider>
);
}
}
The documentation or overview could be really helpful!
Wrapping HTML5Backend with curly braces solved the problem for me.
import { HTML5Backend } from 'react-dnd-html5-backend'
For some reason when I try to import one particular module, react refuses to look in the correct directory (./node_modules/). Instead it looks in the ./src/ directory and throws this error:
/src/App.js
Module not found: Can't resolve 'react-d3gantt' in '/Users/RAVEN/Desktop/frontend/materialui/material/src'
All of my other modules are imported correctly. What is it about this one in particular?
Here is my code:
import React, { Component } from 'react';
import { DefaultButton, CompoundButton } from 'office-ui-fabric-react/lib/Button';
import { Image } from 'office-ui-fabric-react/lib/Image';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { GanttChart } from "react-d3gantt";
import OilSite from './components/oilsite';
import BigButton from './components/bigButton';
import LeftNav from './components/leftNav';
import './index.css';
Edit: I used Create-React-App, in case this is relevant to my set up.