Not sure if we are missing something obvious here.The documentation for slices says that you're supposed to be able to use children as usual for a slice component.
But whenever I add a child of any type. Like fragment, custom component or just plain HTML i get this:
The error goes away if I remove child props.
The rendered slice component looks like this:
const Layout = ({
children,
data,
}: SliceComponentProps<LayoutProps>) => {
const { meetingPlace, menuCards, menuItem } =
data.contentfulMeetingPlacePageHome;
return (
<>
{meetingPlace && (
<TabBar
menuGroups={menuItem}
menuCards={menuCards}
logo={meetingPlace?.logo}
socialMediaLinks={meetingPlace?.socialMediaLinks}
meetingPlace={meetingPlace}
/>
)}
<div className="relative lg:px-28 xl:container xl:px-28">
{meetingPlace && (
<Header meetingPlace={meetingPlace} logo={meetingPlace?.logo} />
)}
{children}
</div>
</>
);
};
export default Layout;
export const query = graphql`
...
`;
And
Inside gatsby-node I run the following code to create the slice:
actions.createSlice({
id: 'layout',
component: path.resolve('./src/components/layout/layout.tsx'),
});
I get same error even I make a simple dummy slice component with no data as long as it a child of any kind.
Have the following gatsby packages in the project:
"gatsby": "5.3.3",
"gatsby-plugin-google-tagmanager": "^5.3.1",
"gatsby-plugin-image": "^3.3.2",
"gatsby-plugin-manifest": "^5.3.1",
"gatsby-plugin-react-helmet": "^6.3.0",
"gatsby-plugin-react-svg": "^3.3.0",
"gatsby-plugin-robots-txt": "^1.8.0",
"gatsby-plugin-sass": "^6.3.1",
"gatsby-plugin-sharp": "^5.3.2",
"gatsby-plugin-sitemap": "^6.3.1",
"gatsby-source-contentful": "^8.3.1",
"gatsby-source-filesystem": "^5.3.1",
"gatsby-transformer-inline-svg": "^1.2.0",
"gatsby-transformer-sharp": "^5.3.1",
"gatsby-plugin-postcss": "^6.3.0",
Related
I cannot override default style of MUI Rating component. No matter what it defaults to medium 24 fontSize, and does not increase it. What had I done wrong?
import { Rating } from '#mui/material';
export const Stars = () => {
return (
<>
<Rating name="size-large" defaultValue={2} size="large" />
<Rating
name="size-large"
value={4.5}
precision={0.5}
sx={{ fontSize: '48px' }}
size="large"
readOnly
/>
</>
);
};
package.json
"dependencies": {
"#emotion/react": "^11.10.6",
"#emotion/styled": "^11.10.6",
"#mui/icons-material": "^5.11.0",
"#mui/lab": "^5.0.0-alpha.115",
"#mui/material": "^5.11.9",
"#tanstack/react-query": "^4.22.0",
"axios": "^1.2.2",
"formik": "^2.2.9",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.2",
"styled-components": "^5.3.6",
"yup": "^0.32.11"
},
You're probably not calling this component and seeing some other component. Your code has the first stars with a default value of 2, but your screenshot shows the value at 440 / 550.
Or you may have an MUI Ratings style override or global stylesheet preventing the inline sx styling from taking hold.
You can right click Inspect the stars you are expecting to have a font-size: 48px then see what CSS stylesheet it's getting it's actual font-size from.
Using your code and dependencies in a simple sandbox I see the larger stars as expected.
I am trying to preload/prefetch an image so that I don't have to be connected to the internet at the exact moment to display the image. It's for a "you are offline" page in my app.
My app is written in React and I am using webpack for my bundler.
I was reading online that the webpack magic comments feature might be able to do that.
https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c
It's not working for me.
The image that I am trying to preload/prefetch does not show and there is no <link rel tag added to the DOM.
Checkout the demo repository here:
https://github.com/aubreyquinn/preload-webpack-demo/tree/main
package.json:
"devDependencies": {
"#babel/core": "^7.19.6",
"#babel/preset-env": "^7.19.4",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.11.1"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
You have to use the useState hook to trigger the re-render, The webpack prefetching is working fine but react is not re-rendering since it is unaware of such loading.
import React, { useEffect, useState } from "react";
import Flowers from "../assets/flowers.jpg";
// Home component
const Home = () => {
const [lilies, setLilies] = useState(null);
useEffect(() => {
import(/* webpackPrefetch: true */ "../assets/lilies.jpg").then((res) => {
console.log(res);
setLilies(res.default);
});
}, []);
return (
<>
<div>React Application</div>
<img src={Flowers} height={200} />
<img src={lilies} height={200} />
</>
);
};
export default Home;
Try the above code out, it's working just fine.
I'm attempted to develop a new feature for my blog, that is a Markdown editor for writing articles.
I chosed #tailwindcss/typography and markdown-it to do that, so this is my whole dependencies:
package.json
{
"dependencies": {
"firebase": "^9.0.0-beta.7",
"markdown-it": "^12.2.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0"
},
"devDependencies": {
"#babel/core": "^7.15.0",
"#babel/preset-env": "^7.15.0",
"#babel/preset-react": "^7.14.5",
"#tailwindcss/typography": "^0.4.1",
"autoprefixer": "^10.3.2",
"babel-loader": "^8.2.2",
"css-loader": "^6.2.0",
"dotenv-webpack": "^7.0.3",
"html-webpack-plugin": "^5.3.2",
"postcss": "^8.3.6",
"postcss-cli": "^8.3.1",
"postcss-loader": "^6.1.1",
"style-loader": "^3.2.1",
"tailwindcss": "^2.2.7",
"webpack": "^5.51.1",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.0.0"
}
}
Below code is the component for this feature, including a editing area and a preview area. However, it didn't work.
When I run this code, it is rendered out like this, without typographing the <h1> tag.
However, if I repalce md.render(markdown) with <h1>hello</h1>(the markdown-it's rendering result), it seems "work", looking like this.
Editor.jsx
import React, { useState } from "react";
const md = require("markdown-it")('commonmark');
const Editor = () => {
const [markdown, setMarkdown] = useState("# hello");
const onTextChange = (e) => {
setMarkdown(e.target.value);
}
return (
<div>
<form>
<textarea onChange={(e) => onTextChange(e)}>
{markdown}
</textarea>
</form>
<div id="preview" className="prose">
{md.render(markdown)} {/* <h1>hello</h1> */}
</div>
</div>
)
}
export default Editor;
Why these things happened? and how can I make it run with expections?
use react-markdown instead of markdown-it
here is an example:
import ReactMarkdown from "react-markdown";
<div className="prose">
<ReactMarkdown>{markdown}</ReactMarkdown>
</div>
it will render the provided content as DOM in the page, and Tailwind/typography perfectly styles those elements.
I have a problem with pigeon-maps in my reactjs-app. Using the mouse to navigate through the map works fine, but zooming with the scroll wheel does not work. However, a double-click zooms in the map, but then i have no way of zooming out again.
zoom and center are controlled variables.
<Map
limitBounds='edge'
center={center}
onBoundsChanged={res => {setCenter(res.center); setZoom(res.zoom)}}
zoom={zoom}
provider={provider}
onClick={changeLocation}
width={width}
height={height}
zoomOnMouseWheel={true}
animate={true}>
{renderMarkers()}
</Map>
Once rendered the component looks like this:
These are the dependencies i am using:
"dependencies": {
"#types/jest": "^25.1.4",
"#types/node": "^13.9.0",
"#types/react": "^16.9.23",
"#types/react-dom": "^16.9.5",
"axios": "^0.19.0",
"classnames": "^2.2.6",
"pigeon-maps": "^0.14.0",
"pigeon-overlay": "^0.2.3",
"react": "^16.11.0",
"react-cookie": "^4.0.3",
"react-dom": "^16.11.0",
"react-redux": "^7.1.3",
"react-router": "^5.1.2",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.1",
"react-spring": "^8.0.27",
"react-use-clipboard": "1.0.2",
"reactjs-popup": "^1.5.0",
"redux": "^4.0.5",
"sockjs-client": "^1.4.0",
"stompjs": "^2.3.3",
"typescript": "^3.8.3"
}
If any of you have an Idea what might be causing my problem, i would be thankful if you shared it with me.
Best regards,
Koenigstein
edit: the whole code :
import React, {useEffect, useState} from 'react'
import Map from "pigeon-maps";
import "./editor.css";
export default function EditorInterface(props) {
const [selectedLocation, setSelectedLocation] = useState([0,0]);
const defaultWidth = window.innerWidth * 0.6;
const defaultHeight = window.innerHeight * .50 - 24;
const [zoom, setZoom] = useState(13);
const [width, setWidth] = useState(defaultWidth);
const [height, setHeight] = useState(defaultHeight);
const [center, setCenter] = useState([49.750049, 6.637275]);
const provider = (x, y, z) => {
const s = String.fromCharCode(97 + (x + y + z) % 3);
return `https://${s}.tile.openstreetmap.org/${z}/${x}/${y}.png`
};
const changeLocation = (e) =>{
setSelectedLocation(e.latLng);
};
return (
<div className="wrapper">
<div>
<Map
limitBounds='edge'
center={center}
onBoundsChanged={res => {setCenter(res.center); setZoom(res.zoom)}}
zoom={zoom}
provider={provider}
onClick={changeLocation}
width={width}
height={height}
zoomOnMouseWheel={true}
animate={true}>
</Map>
</div>
</div>
);
};
The component is being used here:
import React from 'react';
import {
BrowserRouter as Router,
Route} from "react-router-dom";
import AdminInterface from "./components/admininterface/AdminInterface";
import Watermark from "./components/watermark/Watermark";
import UserInterface from "./components/userinterface/UserInterface";
import EditorInterface from "./components/editorinterface/EditorInterface"
const App = () => {
return (
<Router>
<Route exact path={"/"} render={() =>
<UserInterface/>
}/>
<Route path={"/admin"} render={() =>
<AdminInterface/>
}/>
<Route path={"/scenarioCreator"} render={() =>
<EditorInterface/>
}/>
<Watermark/>
</Router>
);
};
export default App;
I will close this for now, because as DILEEP THOMAS pointed out, there is nothing wrong with the code, there seems to be something wrong with my project configuration or something else.
I will try to figure it out myself first.
According to pigeon-maps docs, you need to press (cmd/win) key while zooming with the mouse wheel
metaWheelZoom - Zooming with the mouse wheel only works when you hold down the meta (cmd/win) key. Defaults to false.
Docs here : https://github.com/mariusandra/pigeon-maps
I am trying to use the material UI snackbar to show pop up errors in my react application.
I am using a container view. In that view, it does some stuff and errors can be thrown. If it does get an error, I want to render my custom snackbar component.
This is my ErrorPopup component:
import React from 'react';
import { Snackbar } from '#material-ui/core';
import MuiAlert, { AlertProps } from '#material-ui/lab/Alert';
function Alert(props: AlertProps) {
return <MuiAlert elevation={6} variant="filled" {...props} />;
}
interface ErrorProps {
message: string;
}
export default function ErrorPopup(props: ErrorProps) {
const [open, setOpen] = React.useState(true);
const handleClose = () => {
setOpen(false);
};
return (
<div>
{props.message !== '' ? (
<Snackbar open={open} autoHideDuration={6000} onClose={handleClose}>
<Alert onClose={handleClose} color="error">
{props.message}
</Alert>
</Snackbar>
) : (
''
)}
</div>
);
}
In my main view, I call this component like so:
<ErrorPopup message={this.state.errors} />
What seems to happen is I get errors that seem to me to indicate something about the WithStyles + typescript issue crops up, but I am out of my depth to fully understand what is going on. I just expected it to work as all my material UI stuff has worked up until now.
I have tried a couple of quick cut n paste run n gun type fixes off the net (as you do), but I clearly don't know what exactly is going on, so I need to at least start there.
Here is a screen grab:
With styles errors perhaps?
First off, is this approach to showing the errors ok?
Secondly, can anyone point me in the right direction here?
Frustratingly, I just ran an npm update on my project, and things started to work.
For anyones reference, my dependencies in package.json
"dependencies": {
"#material-ui/core": "^4.8.3",
"#material-ui/icons": "^4.5.1",
"#material-ui/lab": "^4.0.0-alpha.39",
"#types/pouchdb": "^6.4.0",
"#types/react-router-dom": "^5.1.3",
"clsx": "^1.0.4",
"highcharts": "^7.2.1",
"highcharts-react-official": "^2.2.2",
"pouchdb": "^7.1.1",
"pouchdb-find": "^7.1.1",
"pubnub": "^4.27.3",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.3.0",
"request": "^2.88.0",
"typescript": "^3.7.4"
},
Whilst this solves my original problem getting it working, is this the right approach?
Cheers