Has anyone succeeded in using leaflet package with opensaas? (Could be a Vite issue?)

10lloydj · 2024-08-07T21:41:31.173Z

[wasp ^0.14.0, macbook M2 Sonoma 14.5] I've implemented a map in jsx using "leaflet, react-leaflet, react-leaflet-draw". The page loads fine except the map. I've been able to build the same page using jsx in a different repo without wasp. (it only uses react to build this). When run (wasp start), I get `[ Client!] The request url "/../app/node_modules/leaflet-draw/dist/images/spritesheet.svg" is outside of Vite serving allow list.` To fix I add `path.resolve(__dirname, 'node_modules/leaflet-draw/dist/images')` to server.fs.allow This doesnt fix anything. leading to more errors, `[ Client!] The request url "/../app/.wasp/out/web-app/src/index.tsx" is outside of Vite serving allow list.` I resolve in the same way: "path.resolve(__dirname, '.wasp/out/web-app/src')" No more errors, but the map still isn't rendering. Any suggestions please? Thanks, Jordan

K

kapa.ai•8/7/24, 9:41 PM

Hi @blckvmamba. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

K

kapa.ai•8/7/24, 9:41 PM

----------------------
Hmm, I don't know enough to give you a confident answer yet. The knowledge sources provided do not contain specific information about using the leaflet package with opensaas in the Wasp framework.

However, it seems like you're encountering issues with Vite's serving allow list. There's a related discussion in one of the knowledge sources where a user was able to disable automatic browser opening by running

BROWSER=none wasp start

BROWSER=none wasp start

BROWSER=none wasp start

BROWSER=none wasp start and found a guide on customizing Vite configuration in Wasp here (https://wasp-lang.dev/docs/project/custom-vite-config). This might not directly solve your issue but could provide some insights.

For more specific help, I would recommend reaching out to the Wasp community or checking the Wasp documentation for more information.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

K

kapa.ai•8/7/24, 9:41 PM

Sorry @blckvmamba, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist:

Perhaps try again in 15mins?

Solution

M

miho•8/8/24, 7:31 AM

Pls try this https://gist.github.com/infomiho/9682e664948b84112074a69268f5673a

Gist

Using Wasp with @fontsource (Solution for the "The request url * is...

Using Wasp with @fontsource (Solution for the "The request url * is outside of Vite serving allow list" issue) - main.wasp

1

10lloydjOP•8/8/24, 8:57 PM

Still no luck, for reference this is the file. the buttons appear fine but not the map

SelectLocation.jsx2.7KB

1

10lloydjOP•8/8/24, 8:58 PM

1

10lloydjOP•8/8/24, 9:09 PM

I think I've found the map, but for some reason the div is 0 x 0

M

miho•8/9/24, 11:59 AM

Ok, I'll check this out and see if I can set it up

M

miho•8/9/24, 1:40 PM

import "leaflet/dist/leaflet.css"; // <- Leaflet styles

import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

export const MainPage = () => {
  const position: [number, number] = [51.505, -0.09];
  return (
    <MapContainer
      center={position}
      zoom={13}
      scrollWheelZoom={true}
      style={{ minHeight: "100vh", minWidth: "100vw" }}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={position}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
};

import "leaflet/dist/leaflet.css"; // <- Leaflet styles

import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

export const MainPage = () => {
  const position: [number, number] = [51.505, -0.09];
  return (
    <MapContainer
      center={position}
      zoom={13}
      scrollWheelZoom={true}
      style={{ minHeight: "100vh", minWidth: "100vw" }}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={position}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
};

import "leaflet/dist/leaflet.css"; // <- Leaflet styles

import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

export const MainPage = () => {
  const position: [number, number] = [51.505, -0.09];
  return (
    <MapContainer
      center={position}
      zoom={13}
      scrollWheelZoom={true}
      style={{ minHeight: "100vh", minWidth: "100vw" }}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={position}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
};

import "leaflet/dist/leaflet.css"; // <- Leaflet styles

import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet";

export const MainPage = () => {
  const position: [number, number] = [51.505, -0.09];
  return (
    <MapContainer
      center={position}
      zoom={13}
      scrollWheelZoom={true}
      style={{ minHeight: "100vh", minWidth: "100vw" }}
    >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Marker position={position}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  );
};

and

import { resolveProjectPath } from "wasp/dev";
import { defineConfig, searchForWorkspaceRoot } from "vite";
export default defineConfig({
  server: {
    open: false,
    fs: {
      allow: [
        // Keeping the original behaviour how Vite searches for the workspace root
        // https://vitejs.dev/config/server-options#server-fs-allow
        searchForWorkspaceRoot(process.cwd()),
        resolveProjectPath("./node_modules/leaflet-draw"),
        resolveProjectPath("./node_modules/leaflet"),
        resolveProjectPath("./node_modules/react-leaflet"),
        resolveProjectPath("./node_modules/react-leaflet-draw"),
      ],
    },
  },
});

import { resolveProjectPath } from "wasp/dev";
import { defineConfig, searchForWorkspaceRoot } from "vite";
export default defineConfig({
  server: {
    open: false,
    fs: {
      allow: [
        // Keeping the original behaviour how Vite searches for the workspace root
        // https://vitejs.dev/config/server-options#server-fs-allow
        searchForWorkspaceRoot(process.cwd()),
        resolveProjectPath("./node_modules/leaflet-draw"),
        resolveProjectPath("./node_modules/leaflet"),
        resolveProjectPath("./node_modules/react-leaflet"),
        resolveProjectPath("./node_modules/react-leaflet-draw"),
      ],
    },
  },
});

import { resolveProjectPath } from "wasp/dev";
import { defineConfig, searchForWorkspaceRoot } from "vite";
export default defineConfig({
  server: {
    open: false,
    fs: {
      allow: [
        // Keeping the original behaviour how Vite searches for the workspace root
        // https://vitejs.dev/config/server-options#server-fs-allow
        searchForWorkspaceRoot(process.cwd()),
        resolveProjectPath("./node_modules/leaflet-draw"),
        resolveProjectPath("./node_modules/leaflet"),
        resolveProjectPath("./node_modules/react-leaflet"),
        resolveProjectPath("./node_modules/react-leaflet-draw"),
      ],
    },
  },
});

import { resolveProjectPath } from "wasp/dev";
import { defineConfig, searchForWorkspaceRoot } from "vite";
export default defineConfig({
  server: {
    open: false,
    fs: {
      allow: [
        // Keeping the original behaviour how Vite searches for the workspace root
        // https://vitejs.dev/config/server-options#server-fs-allow
        searchForWorkspaceRoot(process.cwd()),
        resolveProjectPath("./node_modules/leaflet-draw"),
        resolveProjectPath("./node_modules/leaflet"),
        resolveProjectPath("./node_modules/react-leaflet"),
        resolveProjectPath("./node_modules/react-leaflet-draw"),
      ],
    },
  },
});

gives me this:

M

miho•8/9/24, 1:48 PM

Have you tried adding

style={{ minHeight: "100vh", minWidth: "100vw" }}

style={{ minHeight: "100vh", minWidth: "100vw" }}

style={{ minHeight: "100vh", minWidth: "100vw" }}

style={{ minHeight: "100vh", minWidth: "100vw" }} to the

MapContainer

MapContainer

MapContainer

MapContainer?

Has anyone succeeded in using leaflet package with opensaas? (Could be a Vite issue?)

Similar Threads

Similar Threads

Similar Threads