smooth-scroll | Adds smooth scrolling to anchor links | iOS library

i added two folders that was missing 'transversal-administration', 'transversal-translation' in the past i have just only: ['app']. the loader in the past load just the app folder

Here, try this little plugin that does just that. However, you should specify smooth scroll links yourself by adding "smooth-scroll" class to them like this: Smooth Scroll Link

Here's the solution I found using createRef()

App.js (This is the parent component) As you can see here the scrollDiv is declared and passed to the component I want to see when I clicked the button and the scrollSmoothHandler is passed to the component where the button resides.

I think all you need is to configure split-chunk-plugin. Here is the very simple configuration based on what you need:

As I was saying, it's not Netlify's fault since the project is not building locally. You should ensure always that your project is correctly coded in both environments (build and develop) since they have substantial differences between them. A project that works under gatsby develop doesn't mean that it's perfectly coded, only means that it work under certain conditions. You can check the overview between runtime and build-time in Gatsby's docs, the main difference relies on gatsby build's Gatsby Server-Side Rendering (SSR). Keep in mind that you are using jQuery, which points directly to the real DOM, having a high-performance impact on the site, while React, creates and manipulates a virtual DOM (vDOM) to avoid that kind of high-cost actions. It's odd using both approaches.

In addition, you are importing everything in the component, which will be used across your project in multiple components/pages. This may lead to multiple script rendering/loading if the component is rerendered.

Said that, your issue may be caused by:

• AOS.init();
• The script importation: since they aren't promises, they will be imported at the same time. If for some reason one of them is loaded first (the lighter) and it's dependant on the other one, it will break your project, since it won't be able to load. You are not loading jQuery, unless it's in scripts.js.

You have many approaches, from changing the approach and using a React-based one, to try to async the script importation (and loading jQuery before), but all the workarounds will need to be tested with some trials and errors:

I believe you should put the path variable inside the Header component so that it is re-evaluated on each render.

Just move the link embed code above the fade code. Like this:

I try to make a test with the MS Edge Version 87.0.664.60 and Google Chrome Version 87.0.4280.88.

On my side, the code works fine on both browsers.

Here is my test result: (Above is the MS Edge and below one is the Google Chrome browser)

You are making this test using the BrowserStack. It is can be possible that the issue is related to BrowserStack.

I suggest you try to make a test using the actual browsers. It may help you to find the cause of the issue.

Your code looks good, your image has its path prefixed. However, to make it effective you need to run the following snippet in the deploy command: