I'm shocked over this problem I'm currently having right now. All my logic literally stopped. Something started not working, without me having changed anything. I mean I even have it on production, the identical code, but locally it started not working, out of nothing. Even when I go back to previous commits, that I'm 100% sure was working, it doesn't work.
Meteor, React, Ant-Design. Please help!
The error is: ReferenceError: Layout is not defined
Code is:
import React from 'react';
import Blaze from 'meteor/gadicc:blaze-react-component';
import { Link } from 'react-router-dom';
import { Layout, Menu } from 'antd';
const { Header, Content, Footer } = Layout;
class LayoutContainer extends React.Component {
render() {
const { match, children } = this.props;
const pathname = match.location.pathname;
return (
<Layout className="layout">
<Header style={{backgroundColor: '#fff'}}>
<Menu
selectedKeys={[pathname]}
mode="horizontal"
style={{ lineHeight: '64px', float: 'right' }}
>
<Menu.Item key={'/'}>
<Link to="/">Home</Link>
</Menu.Item>
<Menu.Item key={'/create-a-gathering'}>
<Link to="/create-a-gathering">Create</Link>
</Menu.Item>
</Menu>
<div className="logo" />
<Blaze template="loginButtons" />
</Header>
<Content style={{ marginTop: 20 }}>
{children}
</Content>
<Footer style={{ textAlign: 'center' }}>
</Footer>
</Layout>
)
}
}
export default LayoutContainer;
this is a reported antd issue here Reference Error: Layout not defined
an easy way to solve this is importing layout like this
import Layout from 'antd/lib/layout'
or you can also sort it out by updating antd version to "^3.2.2" or up
I should have answered this long time ago, but here it goes:
As Afaq Ahmed Khan pointed out (that too) :
import { Layout, Menu } from 'antd/lib';
is the answer.
I guess babel in two packages conflict with each other and thus '/lib' to root '/' alias doesn't work.
That can be resolved by deleting node-modules folder then rebuilding the whole project.
Related
I am building a website with nextjs and Chakra UI. I am using emotion to style my navigation.
The code of navigation component is as follows:
import Link from "next/link";
import { Flex, List, ListItem } from "#chakra-ui/react";
import Image from "next/image";
import styled from "#emotion/styled";
const Nav = styled.nav`
position: sticky;
top: 20px;
z-index: 2;
`;
export default function StickyNav() {
return (
<Nav>
<Flex
bg='gray.100'
justifyContent='space-between'
p='8'
borderRadius='16'
>
<Image src='/vercel.svg' alt='Vercel Logo' width={72} height={16} />
<List display='flex' ml='4'>
<ListItem mr='8'>
<Link href='#about'>
<a>About</a>
</Link>
</ListItem>
<ListItem mr='8'>
<Link href='#projects'>
<a>Projects</a>
</Link>
</ListItem>
<ListItem>
<Link href='#contact'>
<a>Contact</a>
</Link>
</ListItem>
</List>
</Flex>
</Nav>
);
}
I am having trouble with Fast refreshing. When I start the dev server, the Navigation component picks up the styles correctly
const Nav = styled.nav`
position: sticky;
top: 20px;
z-index: 2;
`;
after serving, if I try to change the top position to 10px the fast refresh doesn't reflect those changes.
The fast refresh feature is working perfectly with other components but has problem with this specific component only. I have looked through several articles but not sure what's causing this behavior.
Check filename or foldername not started with a uppercase
Fast-refresh not works :
fast-refresh works :
Also check if your import statement has right casing.
import Box from '../Components/box';
vs
import Box from '../Components/Box';
in my case, the two words filename should use dash -, rather than underscore _.
For example:
good filename: hello-world.js
bad filename: hello_world.js
As #new2cpp and DeadBoyPiotrek Stated
When Importing your headers make sure your import statements match the file names.
Navbar.js <--Example File name
import Navbar from "../components/Navbar"
Not
import Navbar from "../components/navbar"
When I made this mistake the Fast Refresh would initially load then after changing something the Fast Refresh would continue rebuilding but never finish.
I am working with a basic Gatsby Shopify website template here https://www.gatsbyjs.com/docs/building-an-ecommerce-site-with-shopify/
I am trying to get this simple example up and running but I noticed in the following code block in
/src/pages/products.js
import Layout from "../components/layout"
there is no mention of components or layouts in the article and the app is throwing errors there. I am just trying to get a basic example to work. Is there a github link for this code?
The <Layout> component is a common resource in mostly all Gatsby starters (the default one for example), if you don't have it, just create the following structure under /components folder (to keep your code structure):
/**
* Layout component that queries for data
* with Gatsby's useStaticQuery component
*
* See: https://www.gatsbyjs.com/docs/use-static-query/
*/
import React from "react"
import PropTypes from "prop-types"
import { useStaticQuery, graphql } from "gatsby"
import Header from "./header"
import "./layout.css"
const Layout = ({ children }) => {
const data = useStaticQuery(graphql`
query SiteTitleQuery {
site {
siteMetadata {
title
}
}
}
`)
return (
<>
<Header siteTitle={data.site.siteMetadata?.title || `Title`} />
<div
style={{
margin: `0 auto`,
maxWidth: 960,
padding: `0 1.0875rem 1.45rem`,
}}
>
<main>{children}</main>
<footer style={{
marginTop: `2rem`
}}>
© {new Date().getFullYear()}, Built with
{` `}
Gatsby
</footer>
</div>
</>
)
}
Layout.propTypes = {
children: PropTypes.node.isRequired,
}
export default Layout
As you can see, the <Layout> component wraps the whole application with the children prop, sharing a <Header> component and a <footer> tag across all the applications when used.
You can remove propTypes if you are not using them.
Context
i'm designing a navigation bar for my application and my proyect uses react-router and react-router-dom for managing routing and react-icons for icon retrieving.
Code
import React from 'react';
import { NavLink } from 'react-router-dom';
import { MdAssessment } from 'react-icons/md'
import Styles from './NavBar.module.css'
const NavBar = (props) => {
return (
<nav className={Styles.navBar}>
{navIcon}
<NavLink
activeStyle={{ color : 'red' }}
className={`${Styles.navBar__Dashboard} `}
exact to="/">
<MdAssessment />
</NavLink>
<NavLink
activeStyle={{ color: 'red' }}
className={Styles.navBar__Requests}
to="/requests">
Requests
</NavLink>
<NavLink
activeStyle={{ color: 'red' }}
className={Styles.navBar__Tasks}
to="/tasks">
Tasks
</NavLink>
</nav>
)
}
export default NavBar
Problem
I'm trying to extrapolate activeStyle functionality of NavLink to my icon.
Given that react-icons provides you with component as icons, i'm struggling with which approach should i use:
Should i wrapped in a HOC?
Should i encapsulate in a custom Hook?
Notes
I've tried with both approaches but can't get my head arround it. I've tried implementing useRef, useEffect while reading to location with useLocation hook as well.
Any suggestion for a better implementation of a generic NavIcon feature taking this context into account?
By using curly brackets you are importing the icon as a named import. So the import only works if the file contains a named export of the same name you have assigned it. See this question for more info.
According to the package documentation, this is the correct way to import an icon. Can you check to make sure the named export is the same as you have imported?
Whenever I wanna use an Ant design Component I catch an error with this title:
antd.min.js:23 Uncaught TypeError: Cannot read property 'Component' of undefined
at Object.<anonymous> (antd.min.js:23)
at t (antd.min.js:7)
at Object.<anonymous> (antd.min.js:31)
at t (antd.min.js:7)
at Object.<anonymous> (antd.min.js:50)
at t (antd.min.js:7)
at Object.<anonymous> (antd.min.js:7)
at t (antd.min.js:7)
at antd.min.js:7
at antd.min.js:7
I use the latest version (3.7.3)
In this part I've used Layout Component of ant design:
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import { Layout, Menu, Icon } from 'antd';
const { Header, Content, Footer, Sider } = Layout;
ReactDOM.render(
<Layout>
<Sider
breakpoint="lg"
collapsedWidth="0"
onBreakpoint={(broken) => { console.log(broken); }}
onCollapse={(collapsed, type) => { console.log(collapsed, type); }}
>
<div className="logo" />
<Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
<Menu.Item key="1">
<Icon type="user" />
<span className="nav-text">nav 1</span>
</Menu.Item>
<Menu.Item key="2">
<Icon type="video-camera" />
<span className="nav-text">nav 2</span>
</Menu.Item>
<Menu.Item key="3">
<Icon type="upload" />
<span className="nav-text">nav 3</span>
</Menu.Item>
<Menu.Item key="4">
<Icon type="user" />
<span className="nav-text">nav 4</span>
</Menu.Item>
</Menu>
</Sider>
<Layout>
<Header style={{ background: '#fff', padding: 0 }} />
<Content style={{ margin: '24px 16px 0' }}>
<div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
content
</div>
</Content>
<Footer style={{ textAlign: 'center' }}>
Ant Design ©2018 Created by Ant UED
</Footer>
</Layout>
</Layout>,
document.getElementById('main'));
but I unfortunately face with error, while I just copied the antdesign code. I don't know what is the problem, please help me.
A bit late to this, but this sounds like a typescript error. If anyone else comes across this change
import React, {Component} from 'react'
to
import * as React from 'react'
I couldn't see your codebase but I guess the reason is that you are trying to import on demand, but didn't use babel-plugin-import in your project.
Please refer to the Import on Demand section in the docs.
If you are using create-react-app, you can check the instructions here.
I don't know about Ant design components, but from the stack trace that you've provided, I can say that the antd object is not present. It may be due to antd not loading properly. I would suggest you to check if antd is being loaded or not by trying to console.log(antd) or whatever is the name of the object.
Also, kindly provide the related code to let us help you better.
The problem was in my gulp and browserify configuration. I tried to change the technology I'm using and I switch to webpack with many more benefits than gulp that can be read in the following link:
gulp vs browserify vs webpack
If you are facing this error the try these two ways as well. It will work:
Error:
Solution 1:
import React from "react";
class Greetings extends React.Component {
render() {
return <div>working</div>;
}
}
Solution 2:
import React, { Component } from 'react';
class Greetings extends Component {
render() {
return <div>working</div>;
}
}
I am attempting to migrate from the previous version of Material UI to the new beta, however this error is driving me mad.
To put it simply, this works fine with no errors:
const Setup = () => {
return (
<div style={{ margin: '20px' }}>
<Card>
<CardHeader title="Let's get set up." />
</Card>
</div>
);
};
export default Setup;
But this does not:
const Setup = () => {
return (
<div style={{ margin: '20px' }}>
<Card>
<CardHeader title="Let's get set up." />
<CardContent>
</CardContent>
</Card>
</div>
);
};
export default Setup;
Here are the errors produced:
Thanks to Devang Naghera for pointing this out.
I noticed that CardContent is undefined, even though I import it at the top of my file with
import Card, { CardHeader, CardContent } from 'material-ui/Card';
A workaround seems to be to change my imports to
import Card, { CardHeader } from 'material-ui/Card';
import CardContent from 'material-ui/Card/CardContent';
The code works now.
Edit:
It turns out this issue was being caused by some files left over from an older version of MUI. I deleted node-modules and redownloaded dependencies, which fixed the issue for me.