Custom Map Component: Works in Dev, Disappears After Publishing!

Ask us anything
1

Hi everyone! :waving_hand:

I’m experiencing a strange issue with a custom map component I’ve created:

The component repository is available here: https://github.com/patrykcodeless/nomadano_map_component

Problem Description

  1. Development Mode: The component works perfectly. It displays, is interactive, and behaves exactly as intended.

  2. Production Mode / Editor (After publishing): After compiling, publishing, and trying to add the component in the editor (or on the published page), nothing happens. It looks as if the component does not exist at all—it is completely invisible and fails to load.

The issue: The component in production behaves as if its code is not being executed or its resources are not being loaded.

What I Have Checked

  1. manifest.json File: All paths and dependencies seem to be correctly defined.

  2. Dependencies (e.g., JS/CSS libraries): I checked if external libraries (like the map library) are correctly loaded in the production environment.

  3. Console Errors: In production mode, there are no explicit JavaScript errors in the console that would indicate a problem loading the component’s JS file.

  4. Component Build: I am using the standard build process, which should theoretically generate the correct code for production.

Request for Help:

Has anyone encountered similar behavior? I would be very grateful if you could take a look at the repository and provide any suggestions on where I might look for the problem.

Thanks in advance for your help! :folded_hands:

2

Hi Patryk, welcome to the community :waving_hand:

I don’t know the answer to your question.

can you share some browser console logs?

I also asked an AI your question and this is what it came up with:

Ai generated answer

1. Double-check asset and dependency loading in production:

  • Ensure all external JS and CSS dependencies (map libraries, etc.) are referenced with fully qualified URLs and are accessible in production (not blocked by CORS, missing, etc.).
  • Test if the dependency URLs work directly in incognito mode or a different network.

2. Confirm build output and paths:

  • Review the component’s build output for differences between dev and production – sometimes relative paths work in dev but break on a live server.
  • Make sure the manifest.json is correctly exported and paths inside it match exactly to deployed file locations.

3. Verify resource loading with browser DevTools:

  • In your published app, use “Network” and “Sources” tabs in DevTools to check if all the JS and CSS files for the component are actually being loaded and do not have status errors (404, etc.).
  • Check if the map library (e.g., Leaflet, Mapbox) JS/CSS is actually present in the production page.

4. Test for silent JavaScript errors or failed imports:

  • Add temporary console.log() statements inside the component entry points or hooks that should run in production, and check the console to see if they fire.
  • Check for errors in the “Network” tab that might not show up as normal JS errors (CORS, failed imports, etc.).

5. Confirm build config matches WeWeb expectations:

  • Make sure your build process (Webpack/Vite/Parcel/etc.) outputs a format compatible with WeWeb custom components: single JS file, and that exports are not tree-shaken away or minified in a way that breaks WeWeb integration.

6. Try with a minimal example:

  • Reduce the component to a ‘hello world’ map with only basic features, and see if it loads in production. Gradually add more custom logic to see what breaks.

7. Export logs for support:

  • If there are no errors but also no render, provide screenshots of your component’s state in production (Network and Console tabs) and share with the community/support to get more targeted help.

8. Re-deploy and clear cache:

  • Try re-deploying the component after cleaning your build outputs.
  • Try accessing the published version in an incognito window or after clearing browser cache, in case an old or partially broken JS file is being loaded.

In the meantime I’ll ask if someone from our team has a clue about this.

3

Hello!

Thank you for all the advice and for helping me narrow down the issue. I’ve updated the information, which drastically changes the diagnosis.

My component DOES appear on the list of available components in WeWeb, but it DOES NOT get added to the editor when dragged onto the canvas.

:stop_sign: New Diagnosis

  • Component is visible: The manifest.json is correct. WeWeb successfully reads the component’s metadata.

  • Console is Clean: No errors (404s, JS errors, etc.) appear in the browser console upon dragging or during the build process.

  • No rendering: When dragged onto the layout, nothing happens (the canvas remains empty).

  • Default Component Works: I can still add a component based on the default WeWeb template to the project.

This symptom suggests that the error occurs during the component’s initialization/rendering within the WeWeb editor context. The WeWeb editor is likely “silently” catching a Vue error and aborting the process instead of displaying a message, especially since the console is clean.

:hammer_and_wrench: Request for Help

I have tried testing a minimal “Hello World” version, but I am still looking for the optimal configuration for Vite Library Mode that guarantees the main Vue module is initialized correctly by WeWeb.

I suspect the issue is related to either:

  1. Vue Conflict: Ensuring Vue is correctly marked as external in my build config.

  2. Module Format: The specific module export format expected by WeWeb.

Thank you for any further assistance!