Error Can't resolve 'react-scroll' module in react - javascript

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

Related

I can't import emotion js style with dynamic variable

I have a webpage that looks like this:
This is my _app.tsx file:
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { createTheme } from '#arwes/design'
import { ThemeProvider, Global, css } from '#emotion/react'
import { globalStyles } from '../shared/styles.js'
function MyApp({ Component, pageProps }: AppProps) {
const theme = createTheme();
return (
<ThemeProvider theme={theme}>
{globalStyles}
<div style={{
marginBottom: theme.space(2),
borderBottom: `${theme.outline(2)}px solid ${theme.palette['primary'].main}`,
padding: theme.space(2),
backgroundColor: theme.palette.neutral.elevate(2),
textShadow: `0 0 ${theme.shadowBlur(1)}px ${theme.palette['primary'].main}`,
color: theme.palette['primary'].main
}}>
Futuristic Sci-Fi UI Web Framework
</div>
<Component {...pageProps} />
</ThemeProvider>
)
}
export default MyApp
And this is shared/styles.js:
import { css, Global, keyframes } from '#emotion/react'
import styled from '#emotion/styled'
export const globalStyles = (
<Global
styles={css`
html,
body {
margin: 0;
background: papayawhip;
min-height: 100%;
font-size: 24px;
}
`}
/>
)
export const blueOnBlack = (theme) => css`
marginBottom: ${theme.space(2)};
borderBottom: ${theme.outline(2)}px solid ${theme.palette['primary'].main};
padding: ${theme.space(2)};
backgroundColor: ${theme.palette.neutral.elevate(2)};
textShadow: 0 0 ${theme.shadowBlur(1)}px ${theme.palette['primary'].main};
color: ${theme.palette['primary'].main};
`
Notice that blueOnBlack is an attempt to put the Futuristic Sci-Fi UI Web Framework style into its own importable variable.
The problem is that when I put blueOnBlack into the _app.tsx as the style for the Futuristic Sci-Fi UI Web Framework div tag, it fails.
This is _app.tsx with blueOnBlack imported:
import '../styles/globals.css'
import type { AppProps } from 'next/app'
import { createTheme } from '#arwes/design'
import { ThemeProvider, Global, css } from '#emotion/react'
import { globalStyles, blueOnBlack } from '../shared/styles.js'
function MyApp({ Component, pageProps }: AppProps) {
const theme = createTheme();
return (
<ThemeProvider theme={theme}>
{globalStyles}
<div style={blueOnBlack(theme)}>
Futuristic Sci-Fi UI Web Framework
</div>
<Component {...pageProps} />
</ThemeProvider>
)
}
export default MyApp
The resulting webpage looks like this,
It's almost right... but it dropped the background color. Why is it different?
I changed shared/styles.js from:
import { css, Global, keyframes } from '#emotion/react'
import styled from '#emotion/styled'
export const globalStyles = (
<Global
styles={css`
html,
body {
margin: 0;
background: papayawhip;
min-height: 100%;
font-size: 24px;
}
`}
/>
)
export const blueOnBlack = (theme) => css`
marginBottom: ${theme.space(2)};
borderBottom: ${theme.outline(2)}px solid ${theme.palette['primary'].main};
padding: ${theme.space(2)};
backgroundColor: ${theme.palette.neutral.elevate(2)};
textShadow: 0 0 ${theme.shadowBlur(1)}px ${theme.palette['primary'].main};
color: ${theme.palette['primary'].main};
`
to this:
import { css, Global, keyframes } from '#emotion/react'
import styled from '#emotion/styled'
export const globalStyles = (
<Global
styles={css`
html,
body {
margin: 0;
background: papayawhip;
min-height: 100%;
font-size: 24px;
}
`}
/>
)
export const blueOnBlack = (theme) => styled.div={
marginBottom: theme.space(2),
borderBottom: theme.outline(2) + 'px solid' + theme.palette['primary'].main,
padding: theme.space(2),
backgroundColor: theme.palette.neutral.elevate(2),
textShadow: '0 0 ' + theme.shadowBlur(1) + 'px ' + theme.palette['primary'].main,
color: theme.palette['primary'].main
}
And then it ran and gave me the correct styling including the black background on the text. Notice that I'm using styled.div instead of css

Material UI v.4 Theme provider and StylesProvider. I can't use the "classes" prop of a component to override the styles

I'm trying to set advanced usage Material UI v.4 Theme provider and StylesProvider
I can't use the "classes" prop of a component to override the styles.
I follow that instruction and some experience from past projects.
Advanced Material UI v 4.12.3
My App.js:
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { ThemeProvider, StylesProvider } from "#material-ui/core/styles";
import theme from "./styles/theme";
import store from "./redux/store";
import AppRouter from "./routes/AppRouter";
import ErrorBoundary from "./ErrorBoundary";
ReactDOM.render(
<Provider store={store}>
<ErrorBoundary>
<StylesProvider injectFirst>
<ThemeProvider theme={theme}>
<AppRouter />
</ThemeProvider>
</StylesProvider>
</ErrorBoundary>
</Provider>,
document.getElementById("root"),
);
part of package.json:
"dependencies": {
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
}
"devDependencies": {
"#material-ui/core": "^4.9.12",
"#material-ui/pickers": "^3.2.10",
}
theme.js
import { createTheme } from "#material-ui/core/styles";
const theme = createTheme({
palette: {
primary: {
main: "#08718f",
},
secondary: {
main: "#604486",
},
},
});
export default theme;
image-preview.scss
.previewButton {
border-radius: 10px;
border: 1px solid #dcdcdc;
margin-right: 7px;
margin-bottom: 7px;
opacity: 0.6;
&:hover {
border: 1px solid #3f51b5;
opacity: 1;
}
}
SomeComponent.js
import { Button } from "#material-ui/core";
import "../../styles/common/image-preview.scss";
{imageObj?.map((el, index) => (
<Button
className='previewButton'
key={el.id}
onClick={() => setSelectedImage(index)}
>
<img className='imageButton' src={el.url} alt={el.imgName} />
</Button>
))}
This code above works great. I can easily rewrite Material UI components with the flag "injectFirst" from App.js .
Inside Button, I can change the style className=`previewButton' it works
But if I made these changes.
I can't use the "classes" prop of a component to override the styles.
className={classes.previewButton}
SomeComponent.js
import { Button } from "#material-ui/core";
import classes "../../styles/globalStyle.module.scss";
{imageObj?.map((el, index) => (
<Button
className={classes.previewButton}
key={el.id}
onClick={() => setSelectedImage(index)}
>
<img className='imageButton' src={el.url} alt={el.imgName} />
</Button>
))}
globalStyle.module.scss
.previewButton {
border-radius: 10px;
border: 1px solid #dcdcdc;
margin-right: 7px;
margin-bottom: 7px;
opacity: 0.6;
&:hover {
border: 1px solid #3f51b5;
opacity: 1;
}
}
Maybe I missed something? Any help will help!

Styled-Components is giving an undefined component error

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?

cannot render any of my code to my react-appliaction

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/

Blank page when deploying React website on Netlify

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)

Categories