Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

LoadScript removes css source #3376

Open
emaborsa opened this issue Sep 10, 2024 · 0 comments
Open

LoadScript removes css source #3376

emaborsa opened this issue Sep 10, 2024 · 0 comments

Comments

@emaborsa
Copy link

emaborsa commented Sep 10, 2024

"dependencies": {
    "@react-google-maps/api": "^2.19.3",
    "classnames": "^2.5.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.51.5",
    "react-number-format": "^5.4.0",
    "react-router-dom": "^6.22.3",
    "react-select": "^5.8.0",
    "swr": "^2.2.5",
    "wretch": "^2.8.1"
  },

This is my index:

import { createRoot } from "react-dom/client";
import "./colors.css";
import App from "./components/App";
import "./global.css";

const container = document.getElementById("root");
const root = createRoot(container!);
root.render(<App />);

The project works fine. When in my code the LoadScript is loaded it works, but when I move to anothe raect page (route), the global.css get lost.

<LoadScript
          googleMapsApiKey={import.meta.env.VITE_GOOGLE_MAPS_API_KEY}
          language={auth.identity?.language}
          libraries={libraries}
          onError={() => {
            setMapError(true);
            setIsMapLoaded(true);
          }}
          onLoad={() => {
            setIsMapLoaded(true);
          }}
        >
          {isMapLoaded && !mapError && (
            <GoogleMap
              mapContainerStyle={{
                width: "100%",
                height: "100%",
                outline: "none",
              }}
              zoom={coordinates ? zoomCoordinates : zoomNoCoordinates}
              onLoad={onMapLoad}
              options={{
                disableDoubleClickZoom: true,
                mapTypeId: "satellite",
                mapId: "PROJECT_MAP_ID",
              }}
              onDblClick={onDblClick}
            />
          )}
        </LoadScript>

Here a short record:

10 09 2024_13 16 35_REC

If I use the jsApiLoader hook instead, I dont have the css problem, but it crashes when the language is cahnged:


  const { isLoaded: isMapLoaded, loadError: mapLoadError } = useJsApiLoader({
    googleMapsApiKey: import.meta.env.VITE_GOOGLE_MAPS_API_KEY,
    libraries: libraries,
    language: auth.identity?.language,
  });

  useEffect(() => {
    setMapError(!!mapLoadError);
    setIsPageLoading(!isMapLoaded);
  }, [mapLoadError, isMapLoaded]);

Any idea?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant