I have a draggable component in my project, but it throws an error whenever I start the dev server -
react-jsx-dev-runtime.development.js:87 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at draggable.js:9.
Here is my code for draggable.js:
import React, { Component } from "react";
import ReactDOM from 'react-dom';
import { Draggable } from "react-draggable";
console.log(Draggable); //undefined
export class Board extends Component {
render() {
return (
<div>
<Draggable position={{ x: 0, y: 0 }} handle=".handle">
<div>
<div className="handle">Drag me</div>
<div>I will move with the handle</div>
</div>
</Draggable>
</div>
);
}
}
Using the console.log statement I have found that the problem is the Draggable component on line 9 is undefined. But after reading the documentation for react-draggable I can't figure out why that is.
I ran npm install react-draggable and checked package.json. The project has react-draggable version 4.4.5 installed
The solution was to change the import statement
import { Draggable } from "react-draggable";
to
import Draggable from "react-draggable";
Note that DraggableCore import statement goes in curly brackets, that was the cause of my confusion
Related
Within my React application, I'm met with an issue which seems to be related to imports or extending Component | React.Component with my main App class.
The error I'm met with is:
Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined.
I assumed it might have to do with default vs named import of Component, but even when using React.Component instead of Component, I'm met with this issue.
Is there any reason why this would occur?
The import statements I've used are structure as such, below:
import React from 'react';
import Component from 'react';
import './App.css';
import Exercises from "./components/ExerciseDay";
import MySurvey from "./components/MySurvey";
import ExerciseSelector from "./components/ExerciseSelector";
import ToggleDisplay from 'react-toggle-display';
export default class App extends React.Component {
render() {
const surveyCompleted = localStorage.getItem("experience");
return (
<div className="App">
<header className="App-header">
<h1 className="App-title" style={{fontFamily: "Comfortaa, cursive", fontSize: 35}}>
Sheiko Workout Finder
</h1>
</header>
<ToggleDisplay show={!surveyCompleted} tag="section">
<MySurvey/>
</ToggleDisplay>
<ToggleDisplay show={surveyCompleted !== null}>
<ExerciseSelector/>
<Exercises/>
</ToggleDisplay>
<footer style={{fontFamily: "Comfortaa, cursive", fontSize: 20}}>
<p>
Note here -
</p>
</footer>
</div>
);
}
}
A Component is named export. Instead of import Component from 'react';
it should be import { Component } from 'react'; //with curly braces
But you are not using it. It can be deleted because you are using React.Component.
Most likely there is another problem because there is not shown how you are exporting other components from other files ( ExerciseDay,MySurvey,ExerciseSelector ) they or something from them might be named export instead of default export. Check how you are exporting them
And there is another case that will cause this error. If you are importing something wrong also in these components. For example, something imported in ExerciseDay from another file is incorrect. Like exported as named export instead of default export or vice versa
Issue:
I have a component that should redirect users to a new page on click. I want to use Next's <Link> component to take care of the route change.
However, I've noticed that the Link component refuses to render if any of its children are not standard HTML elements (e.g., <div>, <a>, ...).
In the example below, the component I want to render is an icon from the heroicons library.
MyPage.js
import Link from 'next/link'
import { ArrowSmRightIcon } from 'heroicons-react'
export default function MyPage() {
return(
<Link href='/targetPage'>
<ArrowSmRightIcon />
</Link>
)
}
Running the above renders the following error:
Error: Element type is invalid: expected a string (for built-in
components) or a class/function (for composite components) but got:
undefined.
Attempted solution:
I've found some advice online about having to create a custom component that using forwardRef. I've implemented my custom component as:
IconLink.js
import NextLink from 'next/link'
import { forwardRef } from "react";
import { ArrowSmRightIcon } from 'heroicons-react'
const IconLink = forwardRef(({ href, prefetch, replace, scroll, shallow, locale, ...props }, ref) => {
return(
<NextLink
href={href}
replace={replace}
scroll={scroll}
shallow={shallow}
locale={locale}
passHref
>
<ArrowSmRightIcon ref={ref} {...props} />
</NextLink>
)
})
export default IconLink
MyPage.js
import IconLink from './IconLink';
export default function MyPage() {
return(
<IconLink
passHref
href='/targetPage'
/>
)
}
However, I still get the same error.
What should I do render a custom child component inside Next's <Link> component?
The problem is not from the next/link, the problem is from the import, This error indicates that there is no named export "ArrowSmRightIcon" in the package heroicons-react I believe what you're looking for is ArrowSmRight
import { ArrowSmRight } from 'heroicons-react'
Plus the package is deprecated as stated by the maintainers:
This package has been deprecated
Author message:
Official Heroicons V1 released. Please use the following for future >
projects: https://www.npmjs.com/package/#heroicons/react
the currently maintained version is:
https://www.npmjs.com/package/#heroicons/react
I'm trying to do some simple snapshot testing using React and Jest.
Initially I was getting this error: Invariant failed: You should not use <Link> outside a <Router>
After reading this question I updated my test and wrapped the component I'm testing in: <MemoryRouter>...</MemoryRouter>. Once I did this, I started getting a new error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. I have no idea what that means.
My test:
import React from "react";
import BookTile from "./BookTile";
import MemoryRouter from "react-router-dom";
import renderer from "react-test-renderer";
test("my test", () => {
let book = {};
const component = renderer.create(
<MemoryRouter>
<BookTile book={book} />
</MemoryRouter>
)
let tree = component.toJSON();
expect(tree).toMatchSnapshot();
})
The component I'm testing:
import React from "react";
import {Link} from "react-router-dom";
export default function BookTile(props) {
return (
<Link to={`/book/${props.book.id}`}>
<div className="book-tile" style={{'backgroundImage': `url(${process.env.REACT_APP_API_URL}/uploads/${props.book.cover_image_file_name})`}}>
<div className='book-tile-title'>
{props.book.title}
</div>
</div>
</Link>
)
}
You are not importing memory router correctly. Here's how it should look like:
import {MemoryRouter} from 'react-router-dom'
I'm trying to use semantic UI for React with its modal.
Dropdown is ok but modal can't load :
import {DropDown} from "semantic-ui-react";
import {Modal} from "semantic-ui-react";
export default class Builder extends Component {
render(){
return(
<DropDown/>
<Modal/>
)
}
}
The console is returning this error :
app.js:547 Warning: React.createElement: type is invalid -- expected a string
(for built-in components) or a class/function (for composite components) but got: undefined
You likely forgot to export your component from the file it's defined in.
Check the render method of `Portal`.
I have already tried like this :
import Modal from "semantic-ui-react";
And as I saw, Modal folder is at the same level as the Dropdown in my packages.
Any help would be welcome!
Thanks
I think the solution to your problem is either of the following:
You forgot to import import React, { Component } from "react";
The structure of your code. You must wrap both JSX elements in an enclosing tag as they are adjacent. It should be like this:
<div>
<Dropdown/>
<Modal/>
</div>
You don't have to separate import two components as they are both in semantic-ui-react library.
Hope this helps
I am having a lot of trouble trying to implement material-ui's AppBar with Leftbar as there seems to be lots of different variations on component declaration/imported dependencies syntax and components. I can't even find proper documention on http://www.material-ui.com/ about Leftnav in the first place, all they give with Appbar is a static hamburger menu example. My code is as follows:
import React, { Component } from 'react'
import { LeftNav, AppBar} from 'material-ui'
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import { Router, Route, Navigation, Link, browserHistory } from 'react-router'
export default class Header extends Component {
getChildContext() {
return {muiTheme: getMuiTheme(baseTheme)};
}
_toggleNav(){
this.refs.leftNav.toggle();
}
render() {
const data = this.props.data
const nav_items = data.globals.nav_items
//Menu item links
const menu_items = nav_items.map(( nav_item ) => {
return (
<span key={ 'key-' + nav_item.value }>
<Link to={ '/' + nav_item.value }>{ nav_item.title }</Link>
</span>
)
})
return (
<div>
<LeftNav ref='leftNav'
docked={false}
menuItems={ menu_items } />
<AppBar title="App Bar Example" onLeftIconButtonTouchTap={this._toggleNav}
isInitiallyOpen={true} />
</div>
)
}
}
Header.childContextTypes = {
muiTheme: React.PropTypes.object.isRequired,
};
I am getting to obscure errors which explain me nothing about what am actually doing wrong:
VM15235:27 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Header
and:
invariant.js:38 Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `Header`.(…)
Is there a way of making this more explicit?
There was a change to material-ui that renamed LeftNav to Drawer! It seems like certain docs/examples haven't been updated. So if you use Drawer you will find documentation and it should work! Here is the commit/thread from the change away from LeftNav.
https://github.com/callemall/material-ui/issues/2697