Here is a short background...
I migrated react from v17 to v18 successfully. App is running without errors.
After that I upgraded react-scripts from v4 to v5. There are no errors in the terminal but when i run the app, it's crashed (white screen). There is a strange error in console Uncaught TypeError: Cannot read properties of undefined (reading 'default')
Here is a screenshoot of the actual error:
This is the file where the above error is thrown:
import { Outlet } from 'react-router-dom';
import DashboardNavbar from '../DashboardNavbar';
import DashboardSidebar from '../DashboardSidebar';
import { StyledRoot, StyledContainer } from './DashboardLayout.styles';
const DashboardLayout = () => (
<StyledRoot>
<DashboardNavbar />
<DashboardSidebar />
<StyledContainer>
<Outlet />
</StyledContainer>
</StyledRoot>
);
export default DashboardLayout;
Dependencies from package.json
{
...
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"typescript": "^4.8.4",
...
}
Do you have any idea why is this happening?
Related
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
Currently I'm using react-markdown as my markdown component in my react project. Along with this I'm also using rehype-raw and remark-gfm. Whenever I run the project I get the following error:
The following is my package.json:
"dependencies": {
"next": "11.1.2",
"next-images": "^1.8.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-markdown": "^7.0.1",
"rehype-raw": "^6.1.0",
"remark-gfm": "^2.0.0",
},
and my component:
import ReactMarkdown from "react-markdown";
import styles from "../styles/Home.module.css";
import remarkGfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
export default function Home({ posts }) {
return (
<main className={styles.main}>
{posts &&
posts.map((image) => (
<div style={{ height: "100%" }}>
<ReactMarkdown
children={image.Content}
rehypePlugins={[rehypeRaw]}
/>
</div>
))}
</main>
);
}
Error shown in logs:
I experienced similar error too, then I've found this solution:
https://github.com/vercel/next.js/issues/25454#issuecomment-903513941
ReactMarkdown is an ESM module which means it cannot be required but rather imported. If you are actually importing in your code, it can be, that the transpiler (e.g.: Babel) changes this, hence the error. So this can be a possible cause of the error.
What you can do to solve this (also described in the issue commit by others):
npm i next-transpile-modules
In next.config.js do the following:
const withTM = require('next-transpile-modules')(['react-markdown']);
module.exports = withTM({
...restOfYourConfig
})
Import ReactMarkdown like this: import ReactMarkdown from 'react-markdown/react-markdown.min';
Other sources:
https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
https://nextjs.org/docs/messages/import-esm-externals
https://www.npmjs.com/package/next-transpile-modules
when I tried to use matrial UI textfield I got the invalid hook call error. how to fix it ?
import './Login.css';
import TextField from "#material-ui/core/TextField";
const Login = () => {
return(
<div className="login">
<div className="loginContainer">
//***** <TextField /> *****//
</div>
</div>
);
}
export default Login;
When I remove the TextField Component it works fine. when I add it it says
Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
I have the react and react-dom same versions
"react": "^17.0.2",
"react-dom": "^17.0.2"
but still I got the error, can anyone give me the reason why it is so ?
I have react and react-dom versions 17.0.2 in package.json before
Then I changed it to
{
"#material-ui/core": "latest",
"react": "latest",
"react-dom": "latest"
}
and then I executed the "npm install" It installed the latest versions of all the dependencies mentioned above. This fixed the issue.
Background
App is created via npx create-react-app rrts --typescript. Which sets up React, Redux, Typescript.
Visual Representation Of The Problem
(Content is the component with sentences)
https://gyazo.com/bb14af9cb3f0870107ec775a328e60c0
Description of Problem
When the Logo is clicked (which has <Link to="\">) is clicked, the component (called Content) that is supposed to show up dissapears. Content renders when the page loads, but it disappears if the logo is clicked.
What I have tried
I re-built my app with
https://codesandbox.io/s/gracious-forest-0ilef?file=/src/reducers/index.tsx
The sandbox works perfectly. None of the components are
disappearing when <Link to=url/> is clicked. Concluding that how
I set up the code is not the issue. In my actual project, I
believe the issue is in import history and typescript because <Router history={history}> works in non-typescript react projects.
Particulary here in history.tsx
import { createBrowserHistory } from "history";
export default createBrowserHistory();
I installed it via npm -i history --save. Docs. Not
installing history would give me a history module not found
on my imports.
Picture of console.log(history) being used in App.tsx:
My dependencies:
"#types/jest": "^24.9.1",
"#types/node": "^12.12.50",
"#types/react": "^16.9.42",
"#types/react-dom": "^16.9.8",
"#types/react-router-dom": "^5.1.5",
"cloudinary-react": "^1.6.2",
"#types/react-redux": "^7.1.9",
"axios": "^0.19.2",
"react-redux": "^7.2.0",
"react-router-dom": "^5.2.0",
"redux": "^4.0.5",
"redux-devtools-extension": "^2.13.8",
"redux-thunk": "^2.3.0",
"history": "^5.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"typescript": "^3.7.5"
[1]: https://www.npmjs.com/package/history
Came across history/createBrowserHistory broken for TS on latest release (v4.9.0)
Tried the suggestion of renaming history.tsx to browserhistory.tsx. Did not work.
What the poster said:
In history.ts,
import { createBrowserHistory } from 'history' // --> seems like a conflict
export default createBrowserHistory()
so I renamed my file to browserhistory.ts and it worked fine again.
In browserhistory.ts,
import { createBrowserHistory } from 'history' // --> no more conflict occurs
export default createBrowserHistory()
Solved in:
https://github.com/ReactTraining/history/issues/822
npm install history 5.0.0 is bugged. and history,push() will somehow make your component dissapear.
Installing npm install history#4.10.1 solved the issue.
I have this simple code to show the text field:
I get the error
Error in /turbo_modules/react#16.13.0/cjs/react.development.js (1465:13)
Invalid hook call.
The code is at this link https://stackblitz.com/edit/react-6dgvfj?file=UserForm.js
import React, { Component } from 'react';
import compose from 'recompose/compose';
import { connect } from 'react-redux';
import TextField from '#material-ui/core/TextField';
const UserForm = props => {
return (
<div>
This is userform component.
<TextField id="standard-basic" label="Standard" />
</div>
);
}
export default UserForm;
react and react-dom packages always get released in pair. So they are bound to be of same release, to work together. In your case, react was of 16.12.0 and react-dom of 16.13.0
Your package.json
"dependencies": {
"#material-ui/core": "^4.9.5",
"#types/react": "^16.8.6",
"react": "^16.13.0",
"react-dom": "16.12.0"
},
change it to
"react": "16.13.0",
"react-dom": "16.13.0"