Thank you so much I spend 1-2 hours and count figure out to add .leaflet-container { height: 100vh; width: 100vw; } in app.css , which made all the difference and i have no idea how you figured this out as this is not mentioned in the documentation as well, Kudos to you and thankkkkkk youuuuu.
I am getting an error ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: unexpected token(10:41) File was processed with these loaders: *./node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. useEffect (function updatePathOptions(){ if(props.pathOptions!== optionsRef. current) { const options = props.pathOptions??{}; element.instance.setStyle(options); optionsRef.current = options;
I am a frontend developer. I had been doing r&d on react native and ionic. I faced map render bug and spent few days on it, still could not figure out solution. Then i came to this vedio. I would say that you saved me. 🥰🥰 thank you so much.
error: ./node_modules/@react-leaflet/core/esm/path.js 10:41 Module parse failed: Unexpected token (10:41) File was processed with these loaders: * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js You may need an additional loader to handle the result of these loaders. | useEffect(function updatePathOptions() { | if (props.pathOptions !== optionsRef.current) { > const options = props.pathOptions ?? {}; | element.instance.setStyle(options); | optionsRef.current = options;
so I'm getting a couple of errors two invalid hook calls uncaught type error (reading 'useState`) above error in the cannot read properties of null (reading 'useState') cannot perform a React state update on an unmounted component If this helps I'm trying to render this on a separate route on a separate file from `App.js`. this is such a POS
My marker is showing as a Square but can't seen to find a solution on making it show as the default marker, I t's like it's unable to style the marker as it should normally but it reders the map fine with the added CCS style link
for sure guys, come on!! we spent minutes here, it might be hours, if you could do that in 1 minute will be great, i think, i'll create a video for that, because most of people here are positing videos for more than 10 minutes to show something easy, to do
I just landed here today; this series looks great, planning to binge watch this Though I'll like to have a different layout, hope you can assist , as css is not my strong soup
great video series and as always very helpful in my learning process. One thing I cannot find code samples of or video tutorials for that matter is the signing in of other strava athletes into the system and then persisting the athlete's information into the cycle. Even the documentation does not do a great job of samples. Would you consider create a caveat to both your strava series?
@@Franchyze923 thank you again for the help. I was able to extend you example a bit with pure vanilla js here: scotttct.github.io/StravaMapTable/index.html
@@Franchyze923 I would like to be able to from a splash page initiate the OAuth process then send post back to a data page with gets the code and then access code under the hood the finally onto the page that displays data or map
Why does every react tutorial for anything start with creating a new project? Most people have a project and just want to get a component to work. "Let's learn how to resize an Image ... start by creating a new project guys".
Thank you so much I spend 1-2 hours and count figure out to add
.leaflet-container {
height: 100vh;
width: 100vw;
}
in app.css , which made all the difference and i have no idea how you figured this out as this is not mentioned in the documentation as well, Kudos to you and thankkkkkk youuuuu.
awesome! glad it helped you out
Thank you! I was trying to do my first react app and finally find yours, after 10 tutorials and recipes!
This is so helpful! I really like that you don't do everything perfectly the first time. It makes me feel much better as a total noob.
Thanks! Glad it helped you out.
9:43 haha same for me all the time I launch my code. Thanks for the video!
You’re welcome!
Thanks! The part about including the CSS was the issue I had and help me out.
Thank you so much for this! I've been stuck forever and it was adding the .leaflet-container styles that was messing me up.
You're welcome! Glad it helped you out
I am getting an error
./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: unexpected token(10:41)
File was processed with these loaders:
*./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
useEffect (function updatePathOptions(){
if(props.pathOptions!== optionsRef. current) {
const options = props.pathOptions??{};
element.instance.setStyle(options);
optionsRef.current = options;
Yeah. A recent update seems to have broken some of this functionality. Too bad.
@Dionysis P did you find a way to solve this?
Need to update the config file to;
"browserslist":
[
">0.2%",
"not dead",
"not op_mini all"
],
I found this solution on stack overflow
Thanks for sharing this fix! Might be time for me to revisit this video and possibly make an updated one.
I am a frontend developer. I had been doing r&d on react native and ionic. I faced map render bug and spent few days on it, still could not figure out solution. Then i came to this vedio. I would say that you saved me. 🥰🥰 thank you so much.
Awesome! Glad it helped you
Hey bro I was trying ur way but I get this error , could U plzzz help me?? and editing the JSON.package doesn't work before U suggest it :)
Thanks a lot!! You spared me so much time with this video!
This tutorial really helped me a lot, thank you very much!
You're welcome!
error:
./node_modules/@react-leaflet/core/esm/path.js 10:41
Module parse failed: Unexpected token (10:41)
File was processed with these loaders:
* ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| useEffect(function updatePathOptions() {
| if (props.pathOptions !== optionsRef.current) {
> const options = props.pathOptions ?? {};
| element.instance.setStyle(options);
| optionsRef.current = options;
so I'm getting a couple of errors
two invalid hook calls
uncaught type error (reading 'useState`)
above error in the
cannot read properties of null (reading 'useState')
cannot perform a React state update on an unmounted component
If this helps I'm trying to render this on a separate route on a separate file from `App.js`. this is such a POS
did you find the solution to this issue? I am facing it as well.
@@Anshaj Yes, I downgraded to React Leaflet version 3.2.0. Using an older version done the trick for me. I am using React version 17.0.2
My marker is showing as a Square but can't seen to find a solution on making it show as the default marker, I t's like it's unable to style the marker as it should normally but it reders the map fine with the added CCS style link
Thanks, i knew about css, but didn't know you need to style it.
You really helped me! Excelent tutorial
Ahh yes that damn css, thanks sir
You’re welcome!
Thanks! I solved the css issue including this line of code in the top of the component: import 'leaflet/dist/leaflet.css';
for sure guys, come on!! we spent minutes here, it might be hours, if you could do that in 1 minute will be great, i think, i'll create a video for that, because most of people here are positing videos for more than 10 minutes to show something easy, to do
Super helpful man, thanks!
Thanks for watching!
This is so helpful thank you a lot!
You're welcome!
I just landed here today; this series looks great, planning to binge watch this
Though I'll like to have a different layout, hope you can assist , as css is not my strong soup
great video series and as always very helpful in my learning process. One thing I cannot find code samples of or video tutorials for that matter is the signing in of other strava athletes into the system and then persisting the athlete's information into the cycle. Even the documentation does not do a great job of samples. Would you consider create a caveat to both your strava series?
Thanks, I can take a look into this but have a feeling it might be a little tricky. What exactly do you envision?
@@Franchyze923 thank you again for the help. I was able to extend you example a bit with pure vanilla js here:
scotttct.github.io/StravaMapTable/index.html
@@Franchyze923 I would like to be able to from a splash page initiate the OAuth process then send post back to a data page with gets the code and then access code under the hood the finally onto the page that displays data or map
@@scotttct Wow! That looks awesome, nice work. Glad the videos helped. Is the code on GitHub? I'd like to take a look
@@scotttct yea, that would be cool if we could do something like that. I'll try to look into it when I get some time
very much helpful
great video
Thanks a lot!
You're the best man, cheers
Thanks for watching!
Thank you so much bro.
Bro.. Thank You very much! I love You
You're welcome!
Thank you so much for this
You're Welcome!
Thank you so much for this...
Thanks for watching!
Many Many thanks❤❤❤❤
I thought I was the only one got confused with the react-leaflet docs
🤣 nope, you're not alone
you don't need to show react.js from the rough.Just show how to use Map in react.js as it says in the video title.
thx, this shit Leaflet has a bad documentation & blocked website for Russian users, you realy save my test-task
Why does every react tutorial for anything start with creating a new project? Most people have a project and just want to get a component to work. "Let's learn how to resize an Image ... start by creating a new project guys".