'react-dnd' does not contain an export named 'DragDropContext' - reactjs

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'

Related

Attempted import error: 'useSwiper' is not exported from 'swiper/react/swiper-react'

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?

Import Error with #react-three/drei / react-three-fiber

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. 👈

Attempted import error: 'withTranslation' is not exported from 'react-i18next'

I am new to React nad I want to export a component but I get a error with 'withTranslation'
a summary of my code (version:"i18next": "^17.0.6","react-i18next": "^9.0.10",):
import React, {Component} from 'react';
import { translate } from 'react-i18next';
//version: "i18next": "^17.0.6","react-i18next": "^9.0.10",
//..........
//.............
class FromAlumno extends Component {
//................
//.....................
}
export default withTranslation("translation")(FromAlumno);
The problem is not the exporting in your component, the problem is that you haven't imported withTranslation from react-i18next. Just switch your import to this:
import { withTranslation } from 'react-i18next';
I would recommend reading the documentation for react-i18next before posting here too.
https://react.i18next.com/latest/withtranslation-hoc

Material-ui withTheme() giving error "TypeError: Object(...) is not a function"

EDIT: I installed the v1.0.0.36 beta version and copied the sample from that versions docs (which looks identical to me) and it worked straight away. Not sure what the problem was but thanks for replies
I am trying to use Material-UI's withTheme to access the theme in a component.
I have followed the sample in the docs which goes through the create-react-app packager ok but in the browser gives the error: TypeError: Object(...) is not a function
and highlights the code line > 17 | export default withTheme()(WithTheme);
I have cut down the sample code to the most basic use of withTheme() and am still receiving this error
withtheme.js
import React from 'react';
import { withTheme } from 'material-ui/styles';
function WithTheme() {
const styles = {
primaryText: {
color: 'red',
}
};
return (
<h1 style={styles.primaryText}>Hello</h1>
);
}
export default withTheme()(WithTheme);
EDIT: To help clarify the problem, here is the App.js file.
import React, { Component } from 'react';
import './App.css';
import 'typeface-roboto';
import AppBar from 'material-ui/AppBar';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {brown500, brown900} from 'material-ui/styles/colors';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import WithTheme from './components/withtheme';
const Theme = getMuiTheme({
palette: {
primary1Color: brown900,
primary2Color: brown500,
}
});
class App extends Component {
render() {
return (
<MuiThemeProvider muiTheme={Theme} >
<AppBar
title="Title"
iconClassNameRight="muidocs-icon-navigation-expand-more" />
<WithTheme />
</MuiThemeProvider>
);
}
}
export default App;
I have customised the theme and changed primary1Color to brown, using muiThemeProvider. This all works fine when I remove the WithTheme component from App.js - the AppBar is brown as expected. The problem is I am getting the error when I try to use the mui withTheme function.
My intention is to set the h2 in WithTheme component to be whatever color the current theme has for primary1Color
**End Edit
Any help would be appreciated. Happy to post the (almost) exact copy of the doco sample code which achieves the same error if required.
Thanks
As MaterialUI is no longer in Beta, the spec has changed a bit, outdating Liam's answer. Per the Material-UI
v3.1.2 docs
import { withTheme } from '#material-ui/core/styles';
export default withTheme()(WithTheme);
As of Material 4, the spec was changed a bit again: https://material-ui.com/styles/api/#withtheme-component-component (thus outdating Awnage's answer too).
So now it is:
import { withTheme } from '#material-ui/styles';
export default withTheme(MyComponent);
No need to use withStyles() unless if you want to make a specific style for the component
Warp your App with MuiThemeProvider then you are able to use the theme properly
Material-Ui 0.20.0
For access theme colors use getMuiTheme
import getMuiTheme from 'material-ui/styles/getMuiTheme';
export default muiThemeable()(App)
http://www.material-ui.com/#/components/app-bar
Working Demo
Material-Ui 1.0.0 beta
For access theme colors use withTheme
import { withTheme } from 'material-ui/styles';
export default withTheme()(App)
https://material-ui-next.com/demos/app-bar/
Working Demo V1
If you intend to change the theme of material-ui, I would prefer using getMuiTheme. Refer http://www.material-ui.com/#/customization/themes for documentation. What happens here is, you are styling your component with JavaScript and hence the export requires withStyles to be called.
export default withStyles(styles)(WithTheme);

Adding the DragDropContext gives me an error about exporting the ES6 module

So I started to integrate the react dnd library into my application, and the first thing I tried to do is add the DragDropContext with the Html5 backend.
When I add the attribute to the class I get this error:
Uncaught Error: Expected the backend to be a function or an ES6 module
exporting a default function.
import React from 'react';
import Link from 'react-router-dom';
import { connect } from 'react-redux';
import { DragDropContext } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import PropTypes from 'prop-types';
#DragDropContext(HTML5Backend)
class UserHowView extends React.Component {
...
..
}
const mapStateToProps = state => ({
...
});
export default connect(mapStateToProps)(userShowView);
What am I doing wrong so far?
One of the examples for the library has this:
#DragDropContext(HTML5Backend)
export default class Container extends Component {
But my definition and export are separate.
This library has a breaking change since v11.0.0 breaking changes:
from
import HTML5Backend from 'react-dnd-html5-backend
to
import { HTML5Backend } from 'react-dnd-html5-backend
If you are still encountering the issue, please check this issue in repo
and make sure you're not including DragDropContext in your render function
Remove the braces from the HTML5Backend import statement. Replace with the following:
import HTML5Backend from 'react-dnd-html5-backend';
This has resolved the issue for me.

Resources