I have a
menu-item.component in src/components/menu-item/menu-item.component.jsx
directory.component in src/components/directory/directory.component.jsx.
In menu-item.component:
import React from "react";
import withRouter from "react-router-dom";
import "./menu-item.styles.scss";
export const MenuItem = ({ title, imageUrl, size }) => (
<div className={`${size} menu-item`}>
<div
className="background-image"
style={{
backgroundImage: `url(${imageUrl})`
}}
/>
<div className="content">
<h1 className="title">{title.toUpperCase()}</h1>
<span className="subtitle">Alışverişe Başla</span>
</div>
</div>
);
// export default MenuItem;
with this, the import statement import { MenuItem } from "../menu-item/menu-item.component"; in directory.component.jsx works well. When I remove export from function definition and instead add export default MenuItem; at the bottom, the npm start fails with:
Failed to compile.
./src/components/directory/directory.component.jsx
Attempted import error: 'MenuItem' is not exported from '../menu-item/menu-item.component'.
I'm new to react and following the exact code from a tutorial and it works well in the videos. Why this fails?
Try removing the brackets
import MenuItem from "../menu-item/menu-item.component"
When you do an 'export default', you dont need to be specific about the name when importing to get the default import (you can import it as Item or MenuI, for example, but always starting with a capital, to let React knows it's still a component);
Also, remove the export before the const declaration you're using export default
Related
This is my App.js. Here, I call the "Profile" Component.
import './App.css';
import Profile from "./Profile"
function App() {
return (
<div className="App">
<Profile />
</div>
);
}
export default App;
Then, inside Profile.js, I call Card component and inside the Card component, I've enclosed an image.
import React from 'react'
import Card from './Card'
import styles from "./Profile.module.css"
import image1 from "./assets/profile1.png"
const Profile = () => {
return (
<Card>
<div>
<img src={image1} alt="" />
</div>
</Card>
)
}
export default Profile
Inside of Card component, I've just applied some CSS to make it look like a Card.
import React from 'react'
import styles from "./Card.module.css"
const Card = () => {
return (
<div className={styles.card}>
</div>
)
}export default Card
This is my folder structure.
I'm really confused why the image isn't getting showed up. Currently this is the output I'm getting.
I've restarted the server as well. But it's not getting fixed.
your card doesn't have a child component return maybe that could be the problem
import React from 'react'
import styles from "./Card.module.css"
const Card = ({children}) => {
return (
<div className={styles.card}>
{children}
</div>
)
}
export default Card
try this
I have created a new component Navbar.jsx
import { Disclosure } from '#headlessui/react'
import Image from 'next/image'
import tacoPicture from '../public/lets-taco-bout-it.png'
function classNames(...classes) {
return classes.filter(Boolean).join(' ')
}
export const Header = () => {
return (
<Disclosure as="nav" className="bg-white shadow">
{({ open }) => (
<>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center">
<div className="flex-shrink-0">
<Image src={tacoPicture} alt="Picture of the author" />
</div>
</div>
</div>
</div>
</>
)}
</Disclosure>
)
}
So, this needs to be described as a story. In my file Navbar.stories.jsx I do the following
import { Navbar } from './Navbar';
export default {
title: 'Example/Navbar',
component: Navbar,
};
const Template = (args) => <Navbar {...args} />;
export const Default = Template.bind({});
And get the error:
I am new to storybook, however it seems to be a react issue, which I am also new to.
Faced the same issue. What is the mistake I have done is using the wrong import.
So i change this,
import { Button } from './button';
Into this
import Button from './button';
I got the idea from #Katharina's answer. thanks...
Apparently, I was importing a Navbar, my component's name is Header. Also there is a difference between export default function () {} and export const x = () => {}, which is crucial for importing.
I was getting the same error. In my case, the problem wasn't in imports but in using styled-components' css attribute (using babel-plugin-styled-components).
<Button
variant={"color"}
// this caused it
css={`
margin-right: 24px;
`}
>
The workaround was to get rid of the css attribute by replacing the Button component with a new styled one. Like this:
const SubmitButton = styled(Button)`
margin-right: 24px;
`;
I got this error, I was working on an existing react library and making/editing things by hand. The solution was to find the index.ts in the src folder and add my new components to it manually.
Hope this helps someone
If you want to import your component using this syntax:
import { Button } from './button';
You can use named export from your button component
export { Button }
otherwise you have to import it without the curly braces like so:
import Button from './button';
you can read more about named vs default exports here:
https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export
also this article has a nice explanation:
https://medium.com/#timoxley/named-exports-as-the-default-export-api-670b1b554f65
This is the code of the component:
import React, {useState, useEffect} from 'react'
import NavBar from './Navbar'
import axios from 'axios'
import {Link, useHistory} from 'react-router-dom'
function mygroups() {
let profile_id = localStorage.getItem('profile_id')
const [group, setgroup]=useState([])
useEffect(()=>{
axios.get(`/getgroups?profile_id=${profile_id}`)
.then(res=>setgroup(res.data))
.then(res=>{
//localStorage.setItem("screen_name",res.data.screenname)
//localStorage.setItem("profile_id",res.data._id)
})
.catch(err=>console.log(err))
})
return (
<div>
<NavBar />
<h3 className='bg-primary p-2 text-center'>Groups</h3>
{
group.map((data,key)=>(
<div className='container'>
<h2>{data.name}</h2>
<span className='badge badge-dart p-2'>{data.name}</span>
<h6 className='text-white mt-4'>{data.no_members}</h6>
<hr style={{border:'1pz dotted white'}} />
</div>
))
}
</div>
)
}
export default mygroups
This was based off from another component that works perfectly fine. I just changed the variable names. Even when I comment out all of the code and just have the const [group, setgroup]=useState([]), I get this compile error right away. Any help is greatly appreciated. Thanks.
You need to tell React that mygroups is a functional component rather than a regular function, otherwise it won't permit you to use hooks in it. Change
function mygroups() {
to
function Mygroups() {
I'm attempting to add an SVG to a React app (built with create-react-app). When I try to add it as a component, I get an error like this:
InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/logo.8d229b2c.svg') is not a valid name.
What am I missing?
Code:
import React from 'react';
import Logo from '../img/logo.svg';
const Header = () => {
return (
<div>
<Logo />
</div>
)
}
export default Header;
You can import it this way:
import { ReactComponent as Logo } from '../img/logo.svg';
as said in CRA (create-react-app) documentation
an render it the way you want:
import React from 'react';
import { ReactComponent as Logo } from '../img/logo.svg';
const Header = () => {
return (
<div>
<Logo />
</div>
)
}
And also, if it's not necessary to render it as a component, you could just render your svg as an image this way:
import React from 'react';
import logo from '../img/logo.svg';
const Header = () => {
return (
<div>
<img src={logo} alt="logo"/>
</div>
)
}
export default Header;
You need to import the component using this syntax:
import { ReactComponent as Logo } from '../img/logo.svg';
Using the curly braces and ReactComponent is necessary - they tell React that you want to build a component with the SVG.
I only found this because of a Dan Abramov reply to a create-react-app issue. The link he posted in his comment no longer works, but it's still mentioned in the docs.
https://github.com/facebook/create-react-app/issues/5293
https://create-react-app.dev/docs/adding-images-fonts-and-files/
I've installed Foundation on my react project and even after importing it, it still can not define foundation
import React, { PropTypes } from 'react';
import { Link, IndexLink } from 'react-router';
import Auth from '../modules/Auth';
import DrawerLeft from './Drawer.jsx';
import Foundation from 'react-foundation';
const Base = ({ children }) => (
<div>
<div className="top-bar">
<Row>
<Column small={2} large={4}>TESTING</Column>
</Row>
{Auth.isUserAuthenticated() ? (
<div className="top-bar-right">
<Link to="/logout">Exit</Link>
</div>
) : (
<div className="top-bar-right">
<Link to="/login">Enter</Link>
<Link to="/signup">Join</Link>
</div>
)}
</div>
{ /* child component will be rendered here */ }
{children}
</div>
);
Base.propTypes = {
children: PropTypes.object.isRequired
};
export default Base;
And in my package.json it says "react-foundation": "^0.8.2" under dependencies
You need to import it like this
import { Row, Column } from 'react-foundation';
Also you'll need Column
From the npm package link to the Grid Code, you can see that Row and Column are named exports in react-foundation, so you can import them as
import {Row, Column} from 'react-foundation';
and use them