Wasp-lang•4mo ago

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

[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

Solution:

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

Jump to solution

8 Replies

kapa.ai•4mo ago

Hi @blckvmamba. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- 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 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: ---------------------- 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

miho•4mo ago

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

blckvmambaOP•4mo ago

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

SelectLocation.jsx

blckvmambaOP•4mo ago

vite.config.ts

blckvmambaOP•4mo ago

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

miho•4mo ago

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

miho•4mo ago

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"),
      ],
    },
  },
});

gives me this:

miho•4mo ago

Have you tried adding style={{ minHeight: "100vh", minWidth: "100vw" }} to the MapContainer?

Gaming

Programming

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