This question already has answers here:
Can't build React/Next project - found page without a React Component as default export (context api file)
(4 answers)
Closed 3 months ago.
I have this NextJS project that im trying to deploy. But when it builds, it fails an gives me this error:
Build optimization failed: found pages without a React Component as default export in pages/portfolio/styles pages/styles
Those files are these:
import tw from "tailwind-styled-components";
export const Wrapper = tw.div`
h-screen
flex
flex-col
`;
export const Main = tw.main`
`;
export const Container = tw.div`
flex
items-center
justify-center
flex-col
`;
export const Footer = tw.div`
w-full
flex
items-center
justify-center
min-h-[50px]
bg-black
mt-5
`;
export const HeroSection = tw.div`
relative
w-full
h-[70vh]
lg:h-[100vh]
bg-black
`;
export const HomeGallery = tw.div`
grid
grid-cols-1
w-full
`;
export const About = tw.div`
text-justify
text-lg
px-5
py-9
`;
And
import tw from "tailwind-styled-components";
export const Container = tw.div`
`;
export const ImagesContainer = tw.div`
grid
grid-cols-1
`;
I tried using styled components instead of taiwilnd styled components and got the same problem. I remember using styles.js files with styled components on another project so I don't understand where's the problem
I hope this can help you. I think it's nothing major problem in your work,isn't that you are not import React yet. You can find more references about how to use styled component at Medium in link :
Use Styled Component on Reactjs
Related
I want to add background-gradient on a background image, following is the code I've written for adding background image, but unfortunately, the background image isn't showing. Although I was able to add gradient throught tailwind class bg-gradient-to-r from-slate-400 to-slate-800 but the issue is that I want to add this gradient on the background image.
import React from "react";
export default function HomePage() {
return (
<div className="bg-[url('assets/book.jpg')] min-h-screen flex items-center justify-center">
<h1 className="text-black font-bold text-3xl">Welcome Here</h1>
</div>
);
}
And here is the codesandbox example for the project:
https://codesandbox.io/s/background-image-wl9104?file=/src/components/Homepage.js:0-260
i am trying to import a logo but i keep getting this error. the logo is in the assets in my src folder.
import React from 'react';
import {logo} from '../assets'
const Navbar = () => {
return (
<div className='w-full h-[80px] bg-white border-b'>
<div className='max-w-[1480px] m-auto w-full h-full flex justify-between items-center'>
<img src={logo} />
</div>
</div>
)
}
export default Navbar
and the error i get is this. [vite] Internal server error: Failed to resolve import "../assets" from "src\components\Navbar.jsx". Does the file
exist?
i tried using lots of different ways thinking it was a syntax error but nothing worked.
Try with the following line
import logo from '../assets/logo.png'; //change file extension
Let's say I have a React component that gets the Tailwind class name from props
for example :
import React from "react";
export default function Header({navColor}) {
return (
<nav
className="flex justify-center items-center text-white text-xl h-14"> //I want to add a class that it's name is the (navColor) value to the nav tag
TEST
</nav>
);
}
How can achieve this?
You can use Template literals to achieve that
Use ${} inside backticks ``
<nav
className={`flex justify-center items-center text-white text-xl h-14 ${navColor}`}>
TEST
</nav>
import classNames from "classnames";
import React from "react";
export default function Header({ navColor }) {
const headerClass = classNames(
"flex justify-center items-center text-white text-xl h-14",
navColor,
);
return <nav className={headerClass}>TEST</nav>;
}
classNames is also one of good option. You don't have to worry about misadding whitespace.
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
I have a new Gatsby site, which has 3 pages (with more to come). I am finding that I am having to repeat lots of styling and I know there must be a correct way to avoid doing this but I'm unsure what. I'm using Emotion with Tailwind.
There is a hero element on all pages, which include a heading and description:
<Hero>
<Title>
Page title here
</Title>
<Lead>
Descirption text here
</Lead>
</Hero>
This is the styling for it:
const Hero = styled.header`
${tw`bg-blue-dark p-6`};
`
const Title = styled.h1`
${tw`text-white tracking-wide font-medium`};
`
const Lead = styled.p`
${tw`text-gray leading-relaxed mb-1`};
a {
${tw`text-white font-medium no-underline text-purple hover:text-white`};
}
`
Some pages also have action buttons:
<Actions>
<LinkPrimary to="/some-page/">Click for more</LinkPrimary>
<LinkSecondary to="/some-other-page/">Or click here</LinkSecondary>
</Actions>
Full page template looks like (this is what I'm duplicating for every new page):
import React from "react"
import Layout from "../components/layout"
import styled from "#emotion/styled"
import { Link } from "gatsby"
import tw from "tailwind.macro"
const Hero = styled.header`
${tw`bg-blue-dark p-6`};
`
const Title = styled.h1`
${tw`text-white tracking-wide font-medium`};
`
const Lead = styled.p`
${tw`text-gray leading-relaxed mb-1`};
a {
${tw`text-white font-medium no-underline text-purple hover:text-white`};
}
`
const Actions = styled.section`
${tw`text-center m-2 mt-8 mb-24`};
`
const LinkPrimary = styled(Link)`
${tw`block bg-pink hover:bg-green-light text-blue-dark font-bold no-underline py-4 px-4 m-4 rounded`}
`
const LinkSecondary = styled(Link)`
${tw`block bg-regal-blue hover:bg-blue-light text-pink hover:text-white font-semibold no-underline py-4 px-4 m-4 rounded`}
`
export default () => (
<Layout>
<Hero>
<Title>
Hey I'm The About Page
</Title>
<Lead>
Learn all about us
</Lead>
</Hero>
<Actions>
<LinkPrimary to="/some-page/">Click for more</LinkPrimary>
<LinkSecondary to="/some-other-page/">Or click here</LinkSecondary>
</Actions>
</Layout>
)
The problem I have is for every new page I have to repeat the styling. I am manually creating these pages within src/pages and editing the title and description for each page. Pages that have the buttons I am also editing the button text and URL.
I'm guessing there must be a way to create a "hero" component which includes the title and lead with their styling, then import it into each page and edit the content on a per-page basis.
Not all pages will have the action buttons so they probably need to be in their own component and just imported where needed.
If someone could give me a basic demo or link to some docs where this is explained that would be much appreciated. All my research only gives examples of how to do this querying with GraphQL.
Alright, I think I have something that works so will post an answer.
Create a Hero component src/components/hero.js
import React from "react"
import styled from "#emotion/styled"
import tw from "tailwind.macro"
const Header = styled.header`
${tw`p-6`};
`
const Title = styled.h1`
${tw`text-white tracking-wide text-lg font-medium`};
`
const Lead = styled.p`
${tw`text-purple-light leading-relaxed text-lg`};
`
const Hero = props => (
<Header>
<Title>{props.heading}</Title>
<Lead>{props.text}</Lead>
</Header>
)
export default Hero
Then use it in your pages, index page, about page, wherever it's needed:
import React from "react"
import Layout from "../components/layout"
import Hero from "../components/hero"
export default () => (
<Layout>
<Hero
heading="Hello world!"
text="This is the lead text for this page."
/>
...
</Layout>
)
The great thing about this is now my styling for my hero element is all contained in my Hero component. I will probably do the same for the call to action buttons.
If you want to have links or html tags in your text, you can do the following:
<Hero
heading={[<em>Links</em>, " that", <br />, " go places"]}
text={[
"You can write some text here followed by ",
<Link to="/learn/">
a link to another page
</Link>,
" that you can click.",
]}
/>