I'm trying to deploy my personal website using React but it's showing a blank page with the following error on the React imports. It works fine on a local host. I've wasted an entire day trying to solve it but with no success. Any ideas on what might be the issue? Thanks in advance.
Error: "Unexpected identifier 'React'. import call expects exactly one argument" on first line
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
// import injectGlobal helper
import { injectGlobal } from 'styled-components';
import Main from './app/Main';
// Global style
injectGlobal`
html,
body,
#app,
.wrapper {
min-height: 100vh;
height: 100%;
}
html {
box-sizing: border-box;
font-size: 100%;
}
* {
&,
&::after,
&::before {
box-sizing: inherit;
}
}
body {
padding: 0;
margin: 0;
font: 1rem / 1.414 Roboto;
}
`
const wrapper = document.getElementById('app')
const App = () => (
<BrowserRouter>
<Main />
</BrowserRouter>
)
ReactDOM.render(<App />, wrapper)
Related
I am making a personal website. The landing page is the first component. The second page is the About component but it is not rendering below the landing component. It is appearing at the top.
App.js file:
import "./App.css";
import Landing from "./components/Landing/Landing";
import About from "./components/About/About";
function App() {
return (
<div className="App">
<Landing/>
<About/>
</div>
);
}
export default App;
**App.css file: **
.App{
display: flex;
flex-direction: column;
}
body{
overflow-x: hidden;
}
::-webkit-scrollbar{
width: 8px;
}
::-webkit-scrollbar-track{
background: black;
border-radius: 1ex;
}
::-webkit-scrollbar-thumb{
background: #427898;
border-radius: 1ex;
}
::-webkit-scrollbar-corner {
background: black;
}
a{
text-decoration: none;
color: inherit
}
About.jsx file:
import React from 'react'
import css from "./About.module.css"
const About = () => {
return (
<div style={{ color: 'white' }}>About</div>
)
}
export default About
I have already tried creating a container class for About and then changing the display in my About.module.css file but the About text still remains at the top of the page unseen.This is the landing page and as you can see I want the About component to now be below the landing page as you scroll down.
I'm using styled-components with react. When I tried importing my component into my App.js. It gives an Uncaught Error of an undefined component.
Here is my styled-component, Header.js:
import React from "react";
import styled from "styled-components";
import { ReactComponent as LogoSVG } from "./logo.svg";
export const Logo = styled(LogoSVG)`
height: auto;
max-width: 760px;
width: 100%;
`;
export const Header = styled.header`
box-sizing: border-box;
display: flex;
pointer-events: none;
position: fixed;
width: 100vw;
z-index: 1;
justify-content: center;
padding: 30px;
`;
const HeaderComponent = () => (
<Header>
<Logo title="LavaLab Logo "/>
</Header>
);
export default HeaderComponent;
Here is App.js where I import my component:
import React from "react";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { GlobalStyle } from "./styles.js";
import HeaderComponent from "./Components/Header";
const App = () => {
return (
<div>
<GlobalStyle />
<HeaderComponent />
</div>
);
};
const root = createRoot(document.getElementById("root"));
root.render(
<StrictMode>
<App />
</StrictMode>
);
This is the updated error.
Am I missing something?
I am making a Typescript and React app. I am using 4 main files, App.tsx, Header.tsx, Ap.css. I think the real problem is the way I am trying to use the add the Header.tsx file to App.tsx.
Please help
App.tsx:
import React from "react";
import Header from "./Header";
import "./App.css";
function App() {
return (
<div className="App">
<Header />
</div>
);
}
export default App;
Header.tsx:
import React from "react";
import "./Header.css";
function Header() {
return (
<div className="nav-container">
<nav>
Home
About
Projects
Resume
</nav>
</div>
);
}
export default Header;
App.css:
.App {
text-align: center;
color: white;
}
body {
background-color: #171A25;
color: #ffffff;
}
Header.css:
body {
margin: 0px;
background-color: #121625;
}
.nav-container {
text-align: center;
font-size: 24px;
color: white;
}
It looks like there is nothing wrong with your import method. I think you should check your webpack.config.js file. In resolve part should contain ts and tsx types.
resolve: {
extensions: ['.tsx', '.ts', '.js'],
},
and also you have to add tsconfig.json file to your project.
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
https://webpack.js.org/guides/typescript/
Module not found: Error: Can't resolve 'react-scroll' in
'D:\Projects\Temp Projects\my-app\src\components' assets by path
static/ 31.8 MiB
ERROR in ./src/components/ButtonElements.js 4:0-36 Module not found:
Error: Can't resolve 'react-scroll' in 'D:\Projects\Temp
Projects\my-app\src\components' #
./src/components/HeroSection/index.js 8:0-43 52:37-43 #
./src/pages/index.js 7:0-52 40:35-46 # ./src/App.js 6:0-27 17:19-23
36:35-39 # ./src/index.js 6:0-24 9:33-36
import styled from "styled-components";
import {Link} from 'react-scroll';
export const Button = styled.button`
border-radius: 50px;
background: ${({primary}) => (primary ? '#01BF71' : '#010606') };
white-space: nowrap;
padding: ${({big}) => (big ? '14px 48px' : '12px 30px')};
color: ${({dark}) => (dark ? '#010606' : '#fff')};
font-size: ${({fontBig}) => (fontBig ? '20px' : '16px')};
outline: none;
border: none;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.2s ease-in-out;
&:hover {
transition: all 0.2s ease-in-out;
background: ${({primary}) => (primary ? '#fff' : '#01BF71') };
}
`;
react-icons/fa
import React from "react";
import { FaFacebook, FaInstagram, FaYoutube, FaTwitter, FaLinkedin } from "react-icons/fa";
import { animateScroll as scroll } from "react-scroll/modules";
import {
FooterContainer,
FooterWrap,
FooterLinksContainer,
FooterLinksWrapper,
FooterLinksItems,
FooterLinkTitle,
FooterLink,
SocialMedia,
SocialMediaWrap,
SocialLogo,
WebsiteRights,
SocialIcons,
SocialIconLink,
} from "./FooterElements";
**
App.js
import React from 'react';
import './App.css';
import Home from './pages';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import SigninPage from './pages/signin';
import Navbar from './components/Navbar';
function App() {
return (
<Router>
<Routes>
<Route path= "/" component={Home} exact />
<Route path= "/signin" component={SigninPage} exact />
</Routes>
<Home />
</Router>
);
}
export default App;
**
You must install these packages with yarn install or npm install.
if these packages are not defined on the package.json file you must add this package or install it with npm or yarn for example: npm install react-scroll.
React can't found the module react-scroll
So you have to install the module: npm install react-scroll
And also install the react-icons its also gives you error
I'm trying to create Global Styles for my application using createGlobalStyles but somehow the components are not rendering and I am getting a console warning.
App.js
import GlobalStyles from "./styles/GlobalStyles";
function App() {
return (
<div className="App">
<GlobalStyles>
<h1>This is a test line</h1>
</GlobalStyles>
</div>
);
}
export default App;
GlobalStyles.js
import { createGlobalStyle } from "styled-components";
const GlobalStyles = createGlobalStyle`
html {
font-size: 8px;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-weight: 200;
}
body {
font-size: 8px;
}
h1 {
font-size: 2rem;
}
`;
export default GlobalStyles;
Console Error[enter image description here][1]
GlobalStyle.js:28 The global style component sc-global-dtGiqY was given child JSX. createGlobalStyle does not render children.
Error Screenshot
https://i.stack.imgur.com/QJBLz.png
Place <GlobalStyles /> as a sibling to your other content—not as a parent element trying to accept children.
<div className="App">
<GlobalStyles />
<h1>This is a test line</h1>
</div>