I'm trying to use react-helmet in a React Typescript component like so
import { Helmet } from 'react-helmet'
interface TestComponentProps {}
const TestComponent: React.FC<TestComponentProps> = () => {
return (
<>
<Helmet>
<title>Content</title>
</Helmet>
</>
)
}
export default TestComponent
But I'm getting a TS error 'Helmet' cannot be used as a JSX component. Shown below
I've added the following dependencies with yarn
"#types/react-helmet": "^6.1.5",
"react-helmet": "^6.1.0",
How can I fix this TS error?
Related
This is the error I get and I have no idea why, so please help. I will add the snippet of code and the package.json bellow:
import React from "react";
import { Provider } from "react-redux";
import { store } from "../state";
import RepositoriesList from "./RepositoriesList";
function App() {
return (
<Provider store={store}>
<div>
<h1>Search for a Package</h1>
<RepositoriesList />
</div>
</Provider>
);
}
export default App;
I was having this issue with Node 16.16:
"react-redux": "7.2.4",
"#types/react-redux": "7.1.16",
seems to have resolved upgrading both packages:
"react-redux": "7.2.9",
"#types/react-redux": "^7.1.25",
(or just react-redux 8.x which no longer requires #types/react-redux).
I'm unsure of details/reasons, but their seems to be a flag for this at the top of the docs now: https://react-redux.js.org/using-react-redux/usage-with-typescript which links to this thread https://github.com/facebook/react/issues/24304#issuecomment-1094565891
import Slider from "react-slick";
i have imported react slick also installed it.
import React, { useEffect, useRef,useState } from 'react';
import Slider from "react-slick";
import '../Styles/Work.css' ;
const Work = () => {
return (
<div style={{height:"100vh"}} ref={ref} className='work-container' id="work">
<h1 ref={title} className='work-title'>
MY WORKS
{/* {inView && navigate('/#about')} */}
</h1>
</div>
)
}
export default Work
packagelock file
"react-scripts": "5.0.0",
"react-slick": "^0.28.1",
"react-slick-carousel": "^0.14.9",
it's displays in my package-lock too. what's the issue here?? i am using react with typescript
You have to install the types for 'react-slick' #types/react-slick . Make sure its on your package.json as well as r#types/react
16.8.2
#types/react-dom
As you use typescript, you have to install it's type by following:
npm install --save #types/react-slick
I have a problem with a new nextjs application, I have configured Material UI
Each time I refresh the page (hard) the style is not correct anymore, I have to redo modifications in each file to find my previous style...
I show you my _app and _document files
Thanks in advance for your help
_app.js
import React from "react";
import { CacheProvider } from "#emotion/react";
import { CssBaseline } from "#mui/material";
import { ThemeProvider } from "#mui/styles";
import createEmotionCache from "../styles/createEmotionCache";
import theme from "../config/MUITheme";
const clientSideEmotionCache = createEmotionCache();
const MyApp = ({ Component, emotionCache = clientSideEmotionCache, pageProps }) => (
<CacheProvider value={emotionCache}>
<ThemeProvider theme={theme}>
<CssBaseline />
<Component {...pageProps} />
</ThemeProvider>
</CacheProvider>
);
export default MyApp;
_document.js
import * as React from "react";
import Document, { Html, Head, Main, NextScript } from "next/document";
import createEmotionServer from "#emotion/server/create-instance";
import createEmotionCache from "../styles/createEmotionCache";
export default class MyDocument extends Document {
render() {
return (
<Html lang="en">
<Head>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
MyDocument.getInitialProps = async (ctx) => {
const originalRenderPage = ctx.renderPage;
const cache = createEmotionCache();
const { extractCriticalToChunks } = createEmotionServer(cache);
/* eslint-disable */
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App) =>
function EnhanceApp(props) {
return <App emotionCache={cache} {...props} />;
},
});
/* eslint-enable */
const initialProps = await Document.getInitialProps(ctx);
const emotionStyles = extractCriticalToChunks(initialProps.html);
const emotionStyleTags = emotionStyles.styles.map((style) => (
<style
data-emotion={${style.key} ${style.ids.join(" ")}}
key={style.key}
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: style.css }}
/>
));
return {
...initialProps,
// Styles fragment is rendered after the app and page rendering finish.
styles: [...React.Children.toArray(initialProps.styles), ...emotionStyleTags],
};
};
Before refresh :
After refresh :
Environment :
"next": "12.1.0",
"react": "17.0.2",
"#emotion/cache": "^11.7.1",
"#emotion/react": "^11.8.1",
"#emotion/server": "^11.4.0",
"#emotion/styled": "^11.8.1",
"#fontsource/roboto": "^4.5.3",
"#mui/icons-material": "^5.4.4",
"#mui/material": "^5.4.4",
"#mui/styles": "^5.4.2"
You can reproduce with : https://codesandbox.io/s/throbbing-rain-72v10e
I had the same problem for months and I realized even though your app.js and document.js is fine by hard refreshing it takes a bit to read theme(I still don't know why). My workaround for this was fully load the components that had this issue on client side. Components that don't need to be SSR you can turned off SSR feature for them. you can do this in two ways
turn off SSR when importing:
export const component = dynamic(
() => import('../components/component'),
{
ssr: false,
}
);
turn off ssr with a wrapper around component:
import React from 'react';
import dynamic from 'next/dynamic';
const NoSSRWrapper = props => <React.Fragment>{props.children}</React.Fragment>;
export default dynamic(() => Promise.resolve(NoSSRWrapper), {
ssr: false,
});
return (
<NoSSRWrapper>
//your component code
</NoSSRWrapper>
)
this way everything Waites and loads fully on client side therefore refreshing/hard refreshing doesn't affect the load of CSS.
this link was really helpful for me
I get the error message: Invalid hook call. Hooks can only be called inside of the body of a function component when I try to run my react app.
import React from "react";
import BarChart from "../components/BarChart";
import LineChart from "../components/LineChart";
import Navbar from "../components/Navbar";
import { makeStyles } from "#material-ui/core/styles";
const useStyles = makeStyles({
row: {
display: "flex",
flexDirection: "row"
}
});
const Index = () => {
const classes = useStyles();
return (
<div>
<Navbar />
<div className={classes.row}>
<BarChart />
<LineChart />
</div>
</div>
);
};
export default Index;
It fails in line 16 (const classes = useStyles();).
The Navbar, BarChart and LinChart components is just components that I have created and it doesn't seem like the code breaks in these components. I'm able to run my code without any error messages if iI remove line 16.
Any ideas what might help?
I tried makeStyles locally and it worked perfectly fine. Kindly check your dependencies and update them to latest then try again.
I'm currently having:
"react": "^16.8.2", "react-dom": "^16.8.2", "#material-ui/core": "^4.9.12"
I have the following React Todo component:
import React, { useState } from 'react';
const todo = props => {
const inputState = useState('') // problem with this line
return (
<React.Fragment>
<input type="text" />
</React.Fragment>
)
}
export default todo
When I run the app I get the following error in the browser:
./src/Todo.js
Line 5: React Hook "useState" is called in function "todo" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
I am using create-react-app to build my app and I am using the following versions of React.
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.0"
You need to write your component name with a capital first letter for it to be seen as a Component.
import React, { useState } from 'react';
const Todo = props => {
const inputState = useState('') // problem with this line
return (
<React.Fragment>
<input type="text" />
</React.Fragment>
)
}
export default Todo