Cannot access dotenv variables from node module

I need to access dotenv variables from within a nested node module using process.env.[VARIABLE].

My file structure looks like this:

root
├── .env
└── server
    ├── server.js
    └── database
        ├── db.js
        └── models.js

inside server.js I load the env config at the beggining of import statements like this:

import dotenv from 'dotenv'
dotenv.config({ path: '../.env' });

console.log(process.env.DB_HOST) //This works as it should

import express from 'express'
import cors from 'cors'
import sequelize from './database/db.js'
import {User} from './database/models.js'


const app = express();
const PORT = process.env.SERVER_PORT || 5000;
// Middleware

app.use(cors());
app.use(express.json());

// Basic health check route
app.get('/api/health', (req, res) => {
  res.json({ status: 'Server is running' });
});


// Start the server
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

If I log any of the variables i set up inside .env file from within server.js it works as it should. However if I try to log it from the db.js I get undefined value.

import Sequelize from 'sequelize';
console.log(process.env.DB_HOST) ///returns undefined
console.log(process.env) ///returns the object containing env variables excluding the ones I set in my .env file

const sequelize = new Sequelize(process.env.DB_NAME, process.env.DB_USER, process.env.DB_PASSWORD, {
  host: process.env.DB_HOST,
  dialect: 'mysql',
  port: process.env.DB_PORT || 3306
});

export default sequelize;

Can anyone tell me what am I doing wrong? I tried changing the path to the .env file into an absolute one but that didn’t help. I also experimented with positioning the dotenv.config before other imports as I found out this could be the reason but with no success.

Is it possible to run java script on client side when implementing a telegram bot?

Is it possible to run java script on client side when implementing a telegram bot?

To be more specific, I want to generate key pair on client, but don’t let the bot know the client private key, and use this privkey to sign messages and crypto transactions.

To run javascript on node.js bot code to generate and manage privkey does not make the bot trustless.

How to detect multiple tabs and show a notification with a link in a browser extension?

I’m developing a browser extension designed to help users manage their tabs more efficiently. The extension is built using HTML, CSS, and JavaScript, and I’m utilizing the WebExtensions API to handle tab-related events.

In my extension, I want to detect when a user opens multiple tabs (e.g., more than three tabs within a short time span) and display a notification with a link to my LESCO bill-checking website (e.g., https://lescobil.pk). I’ve implemented the following code to monitor tab creation:

let openedTabs = [];
let timeWindow = 5000; // 5 seconds

chrome.tabs.onCreated.addListener((tab) => {
    const now = Date.now();
    openedTabs.push(now);

    // Remove timestamps older than 5 seconds
    openedTabs = openedTabs.filter((timestamp) => now - timestamp < timeWindow);

    if (openedTabs.length > 3) {
        console.log("User opened multiple tabs quickly!");
        
        // Create a notification with a link
        chrome.notifications.create({
            type: "basic",
            iconUrl: "icon.png",
            title: "Multiple Tabs Detected",
            message: "Check your LESCO bill now!",
            buttons: [{ title: "Visit LESCO Website" }],
        });

        // Add a listener for the button click
        chrome.notifications.onButtonClicked.addListener((notificationId, buttonIndex) => {
            if (buttonIndex === 0) {
                chrome.tabs.create({ url: "https://lescobil.pk" });
            }
        });
    }
});

While this code works for most cases, I’ve noticed the following issues:

  1. Edge cases: Sometimes, the event doesn’t trigger for tabs opened in bulk (e.g., opening a folder of bookmarks).
  2. Performance concerns: The filter operation might become inefficient if many tabs are opened rapidly.
  3. Cross-browser compatibility: I’m uncertain whether the same approach works seamlessly in Firefox and Edge extensions.

My question:

  1. Is there a more reliable or efficient way to detect when a user opens multiple tabs within a short timeframe?
  2. Are there alternative APIs or design patterns for handling bulk tab creation events?

FlatList infinite scroll isn’t fetching more data from paginated API

PREMISE
First my api was a simple endpoint for fetching user chat history but the backend team changed the api to add 3 params: cursor,limit and searchTerm. And I was asked to implement it in react native frontend for infinite scrolling using flatlist along with a search feature.

ISSUE
The api has 35 objects but in my implementation as soon as I reach the end of the first batch [limit] rendered no new data is fetched

My API response

{
    "success": true,
    "data": {
        "sessions": [
            {
                "id": "6d84c2dd-5386-4a8e-b946-ddd65a2f1dde",
                "title": "Yogeshwar chawla+1733847198813",
                "userId": "58162f9d-cd92-4fa2-b637-151d7763c0b5",
                "personalityId": "381ed434-1b6a-4c68-a19d-3f268e03c5c6",
                 "personality":"blabla",
                 chats": [
                    {
                        "role": "human",
                        "content": "According to my steps what should I do next, hiking or cycling?"
                    },
                    {
                        "role": "ai",
                        "content": "Asity workout t"
                    }
                ],
                "createdAt": "2024-12-10T16:13:19.937Z",
                "updatedAt": "2024-12-10T16:13:19.937Z"
            },
            {34 same objs}
   ],
        "nextCursor": null
    },
    "message": "User sessions fetched successfully"
}

CODE

  //The states
  const {sessionId} = route.params;
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState();
  const [jwtToken, setjwtToken] = useState();
  const [listData, setListData] = useState([]);
  const [search, setSearch] = useState('');
  const [cursor, setCursor] = useState(null);
  const [hasMore, setHasMore] = useState(true);

  //function to fetch all data
  const fetchMyList = async () => {
    if (loading || !hasMore) return;
    try {
      const limit = 15;
      setLoading(true);
      const token = await AsyncStorage.getItem('jwtToken');
      setjwtToken(token);
      const listResp = await fetch(
        `${BACKEND_URL}/chat/sessions?cursor=${cursor || ''}&limit=${limit}${
          search ? `&searchTerm=${search}` : ''
        }`,
        {
          method: 'GET',
          headers: {
            Authorization: `Bearer ${token}`,
            'Content-Type': 'application/json',
          },
        },
      );
      // console.log('list response is', listResp);
      const listJSON = await listResp.json();
      // console.log('list JSON is', listJSON);
      const {success, message} = listJSON || {};
      if (!success) {
        console.log('error 1');
        setError(message || 'An error occurred while fetching data');
      } else {
        const {sessions, nextCursor} = listJSON.data || {};
        console.log('nextCursor is', nextCursor);
        if (sessions && sessions.length > 0) {
          setListData(prev => [...prev, ...sessions]);
          setCursor(nextCursor);
          setHasMore(!!nextCursor);
          // setListData(sessions);
          // setFilteredData(sessions);
        } else {
          setHasMore(false);
        }
      }
    } catch (error) {
      setError(error.message);
    } finally {
      setLoading(false);
    }
  };

  //functions to use search
  const handleSearchChange = text => {
    setSearch(text);
    setListData([]);
    setCursor(null);
    setHasMore(true);
  };

  const clearSearch = () => {
    setSearch('');
    setListData([]);
    setCursor(null);
    setHasMore(true);
  };

  //useEffect to call it immediately as screen mounts or search param changes
  useEffect(() => {
    fetchMyList();
  }, [search]);

  //React native code
  <View style={styles.searchWrapper}>
        <View style={styles.searchContainer}>
          <Ionicons
            name="search"
            size={responsiveFontSize(20)}
            color="black"
            style={styles.searchIcon}
          />
          <TextInput
            style={styles.searchInput}
            placeholder="Search History"
            placeholderTextColor="grey"
            value={search}
            onChangeText={text => {
              handleSearchChange(text);
            }}
          />
          <TouchableOpacity onPress={clearSearch}>
            <Ionicons
              name="close"
              size={responsiveFontSize(20)}
              color="black"
              style={styles.cancelIcon}
            />
          </TouchableOpacity>
        </View>
      {loading ? (
        <View style={styles.listContainer}>
          <SkeletonLoader count={5} />
        </View>
      ) : (
        <FlatList
          data={listData}
          keyExtractor={item => item.id}
          renderItem={renderBoxComponent}
          contentContainerStyle={styles.listContainer}
          showsVerticalScrollIndicator={false}
          initialNumToRender={5}
          maxToRenderPerBatch={5}
          onEndReachedThreshold={0.5}
          onEndReached={fetchMyList}
          ListFooterComponent={loading ? <SkeletonLoader count={2} /> : null}
        />
      )}   

Now can someone help me debug this problem or help me fix it

Why my streamlines from leaflet-velocity map are going to land?

I try to show currents from Black Sea on a map with streamlines (with leaflet-velocity).

But the map looks bad. Why the currents are show on the land ?

In Version 2, I change dx and dy and VelocityScale.

The map is here: https://syroco.rmri.ro/earth/index.html

I keep the original layer (Ocean Current -Great Barrier Reef) , to see the diference between layers.

I look forward to any suggestion, idea.

My JS code:

function initDemoMap() {
      var Esri_WorldImagery = L.tileLayer(
        "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}",
        {
          attribution:
            "SYROCO 2024" +
            "NIMRD 'Grigore Antipa'"
        }
      );

      var Esri_DarkGreyCanvas = L.tileLayer(
        "http://{s}.sm.mapstack.stamen.com/" +
          "(toner-lite,$fff[difference],$fff[@23],$fff[hsl-saturation@20])/" +
          "{z}/{x}/{y}.png",
        {
          attribution:
            "SYROCO 2024" +
            "NIMRD 'Grigore Antipa'"
        }
      );

      var baseLayers = {
        Satellite: Esri_WorldImagery,
        "Grey Canvas": Esri_DarkGreyCanvas
      };

      var map = L.map("map", {
        layers: [Esri_WorldImagery]
      });

      var layerControl = L.control.layers(baseLayers);
      layerControl.addTo(map);
      map.setView([43, 35], 7);

      return {
        map: map,
        layerControl: layerControl
      };
    }

    // demo map
    var mapStuff = initDemoMap();
    var map = mapStuff.map;
    var layerControl = mapStuff.layerControl;

    // load data (u, v grids) from somewhere (e.g. https://github.com/danwild/wind-js-server)
    $.getJSON("water-gbr.json", function(data) {
      var velocityLayer = L.velocityLayer({
        displayValues: true,
        displayOptions: {
          velocityType: "GBR Water",
          position: "bottomleft",
          emptyString: "No water data"
        },
        data: data,
        maxVelocity: 0.6,
        velocityScale: 0.1 // arbitrary default 0.005
      });

      layerControl.addOverlay(velocityLayer, "Ocean Current - Great Barrier Reef");
    });

    //dx=0.15  dy=0.03
    $.getJSON("cuthr_13Dec2024.json", function(data) {
      var velocityLayer = L.velocityLayer({
        displayValues: true,
        displayOptions: {
          velocityType: "GBR Water",
          position: "bottomleft",
          emptyString: "No water data"
        },
        data: data,
        //minVelocity: -0.44,
        maxVelocity: 0.26,
        velocityScale: 0.11 // arbitrary default 0.005
      });

      layerControl.addOverlay(velocityLayer, "Black Sea Current - Version 1");
    });

    // dx=0.09 dy=0.04 
    $.getJSON("cuthr_13Dec2024_8.json", function(data) {
      var velocityLayer = L.velocityLayer({
        displayValues: true,
        displayOptions: {
          velocityType: "GBR Water",
          position: "bottomleft",
          emptyString: "No water data"
        },
        data: data,
        minVelocity: -0.44,
        maxVelocity: 0.3,
        velocityScale: 0.3 // arbitrary default 0.005
      });

      layerControl.addOverlay(velocityLayer, "Black Sea Current - Version 2");
    });

How to use custom icons in leaflet controls?

I want to replace the default buttons in my leaflet map with custom ones, so that I can apply my own style and functionality on them.
The buttons are created and placed in the map and the functions are working correctly, but somehow the icons are not rendered.

Here the code of my IconButton component:

import {useMap} from "react-leaflet";
import {useEffect} from "react";
import L from "leaflet";
import 'leaflet/dist/leaflet.css';
import locateIcon from '../assets/my-location.svg'

export default function CustomIconButton() {

    const map = useMap();

    useEffect(() => {

        const MyLocateButton = L.Control.extend({

            onAdd: () => {
                const customIconButton = L.DomUtil.create("button", 'locate-button');
                customIconButton.onclick = () => {alert('Button clicked!');};

                customIconButton.innerHTML = "<img src={locateIcon} />";

                return locateButton;
            },
        });

        const control = new MyLocateButton({position: "topleft"});
        map.addControl(control);

        return () => {
            map.removeControl(controlInstance);
        };

    }, [map]);

    return null;
}

Why is Mapbox selecting the wrong feature on click, even without zoom changes?

I’m facing an issue where, when clicking on a feature on a Mapbox map, it selects the wrong feature, even though the cursor is visually placed over the correct feature. This happens even when I haven’t interacted with the zoom level or made any map changes.

When I click on a feature (e.g., a region or point of interest), the modal opens with data from a feature that is nearby, not the one under the cursor. The cursor appears visually on the correct feature, but the selected feature is incorrect.

This issue is happening even when I don’t zoom in or out — simply by clicking on a feature after loading the map.

    const zoomLevel = map.getZoom();

    if (zoomLevel > 9) return;  // Restrict action for zoom levels greater than 9

    // Get features under the cursor
    const features = map.queryRenderedFeatures(event.point, {
        layers: ['epci']
    });

    if (features.length === 0) return;

    const clickedFeature = features[0];
    const epciCode = clickedFeature.properties.code;
    const epciName = formatEpciName(clickedFeature.properties.nom);

    console.log(`Clicked on feature: ${epciName}, Code: ${epciCode}`);
});

I want to make sure that when I click on a feature, I’m selecting the feature directly under the cursor, not a nearby feature. The issue seems to be with the way the position is being captured, but I am not sure how to address it.

Is there a better way to ensure that the feature selected corresponds accurately to the cursor position on the map, even if it appears shifted?

Thank you

Using map.queryRenderedFeatures(event.point) to capture the features under the cursor.
The problem occurs whether I zoom or not — even after just loading the map and clicking on a feature.
I’ve tried adjusting the zoom level but the issue still persists.

jhipster angular compiled successfully, but AggregateError

PREVIOUS ANSWERS DONT WORK SO ITS NOT ALREADY ANSWERED, there are SO answers suggesting to use earlier downgrade node. jhipster8 build successful, then AggregateError which says,

As mentioned in a recent GitHub issue, the current workaround for this
problem is to downgrade the Node version to 18.18.2.

wont work since there is minimum node version required for jhipster 8.7.3 and thats higher then 18.18.2. And using higher version node would still resulted in aggregateError (I tried 4 versions of node already). So what is that issue anyway? What it means aggregateError and how to resolve it? Here is the output:

> npm start

> [email protected] start
> ng serve --hmr

NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack.
√ Browser application bundle generation complete.

Initial chunk files                                                                             | Names                                   |  Raw size
vendor.js                                                                                       | vendor                                  |   2.35 MB | 
styles.css, styles.js                                                                           | styles                                  | 524.38 kB | 
polyfills.js                                                                                    | polyfills                               | 352.13 kB | 
runtime.js                                                                                      | runtime                                 |  52.26 kB | 
main.js                                                                                         | main                                    |   1.53 kB | 

                                                                                                | Initial total                           |   3.28 MB

Lazy chunk files                                                                                | Names                                   |  Raw size
src_main_webapp_bootstrap_ts.js                                                                 | bootstrap                               |   3.63 MB | 
src_main_webapp_app_account_account_route_ts.js                                                 | account-account-route                   | 186.32 kB | 
src_main_webapp_app_admin_metrics_metrics_component_ts.js                                       | metrics-metrics-component               | 181.89 kB | 
src_main_webapp_app_layouts_navbar_navbar_component_ts.js                                       | layouts-navbar-navbar-component         | 167.16 kB | 
src_main_webapp_app_admin_user-management_list_user-management_component_ts.js                  | list-user-management-component          |  55.04 kB | 
default-src_main_webapp_app_admin_user-management_update_user-management-update_component_ts.js | update-user-management-update-component |  41.05 kB | 
src_main_webapp_app_entities_admin_authority_list_authority_component_ts.js                     | list-authority-component                |  33.76 kB | 
src_main_webapp_app_admin_health_health_component_ts.js                                         | health-health-component                 |  29.70 kB | 
src_main_webapp_app_admin_configuration_configuration_component_ts.js                           | configuration-configuration-component   |  24.29 kB | 
src_main_webapp_app_admin_logs_logs_component_ts.js                                             | logs-logs-component                     |  23.61 kB | 
src_main_webapp_app_home_home_component_ts.js                                                   | home-home-component                     |  19.79 kB | 
src_main_webapp_app_admin_user-management_detail_user-management-detail_component_ts.js         | detail-user-management-detail-component |  18.91 kB | 
src_main_webapp_app_entities_admin_authority_update_authority-update_component_ts.js            | update-authority-update-component       |  18.12 kB | 
common.js                                                                                       | common                                  |  18.09 kB | 
src_main_webapp_app_login_login_component_ts.js                                                 | login-login-component                   |  16.15 kB | 
src_main_webapp_app_entities_admin_authority_authority_routes_ts.js                             | admin-authority-authority-routes        |   8.72 kB | 
src_main_webapp_app_entities_admin_authority_detail_authority-detail_component_ts.js            | detail-authority-detail-component       |   8.66 kB | 
src_main_webapp_app_admin_user-management_user-management_route_ts.js                           | user-management-user-management-route   |   5.97 kB | 
src_main_webapp_app_admin_admin_routes_ts.js                                                    | admin-admin-routes                      |   2.76 kB | 
src_main_webapp_app_admin_docs_docs_component_ts.js                                             | docs-docs-component                     |   2.37 kB | 
src_main_webapp_app_entities_entity_routes_ts.js                                                | entities-entity-routes                  |   1.24 kB | 

Build at: 2024-12-13T10:00:38.781Z - Hash: 483ed856f6b48d5f - Time: 28869ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


√ Compiled successfully.
AggregateError

How to resolve .graphql files in Next.js using Turbopack?

I am migrating my Next.js 15 project to use Turbopack for development (next dev –turbo). My project imports .graphql files directly, and I’m encountering issues with resolving these files.

For example, when importing a .graphql file:
import QUERY from '@/graphql/queries/getSomeData.graphql';

I receive the following error:
Module not found: Can't resolve '@/graphql/queries/getSomeData.graphql'

I attempted to configure Turbopack in my next.config.ts to process .graphql files using graphql-tag/loader:

experimental: {  
    turbo: {  
        rules: {  
            '*.graphql': {  
                loaders: ['graphql-tag/loader'],  
                as: '*.js',  
            },  
        },  
        resolveExtensions: ['.graphql', '.gql', '.js', '.jsx', '.ts', '.tsx'],  
    },  
},

With this setup, I expected Turbopack to resolve .graphql files like Webpack does. However, the error persists, and Turbopack doesn’t seem to handle .graphql files. This might be because Turbopack is still a relatively new tool, and it doesn’t yet cover all the features Webpack offers, especially when it comes to handling custom loaders. I’d appreciate any insights or suggestions on how to resolve this issue.

WebShare Api sharing file and text

when i am sharing file with WebShare Api its not showing the text while sharing the file its showing text only in email

const file = new File([this.pdfBlobforData], `${name}.pdf`, {
      type: 'application/pdf',
    });
    if (navigator.canShare && navigator.canShare({ files: [file] })) {
      navigator.share({
        title: 'Check out this',
        text: 'Check it out!',
        files: [file], // Share the PDF file
      }).then(() => {
        console.log('Shared successfully');
      }).catch((error) => {
        console.error('Error sharing', error);
      });
    } else {
      alert('Your browser does not support sharing files.');
    }

i want to share file along with title and text

When is sender.tab undefined in Chrome extension runtime message passing?

Context: the content script file in my MV3 extension is injected into every page as such via the manifest.json:

  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "js/contentScript.js"
      ],
      "match_origin_as_fallback": true,
      "match_about_blank": true,
      "all_frames": true,
      "run_at": "document_idle"
    }
  ],

When the extension is first installed, I additionally run the following via the background.js to inject the script into existing tabs:

chrome.scripting.executeScript({ files: ['js/contentScript.js',], target: { tabId: 123, allFrames: true }, })

When a user takes some action on the page, like keydown or mouse click, the content script file sends a message using chrome.runtime.sendMessage, which is received by a background.js file using chrome.runtime.onMessage.addListener((msg, sender) => { }).

Problem: I have noticed the sender.tab value is often undefined for many of my extension users. When I try to access its id, I get an error: “Cannot read properties of undefined (reading ‘id’)”. I have been unable to reproduce this issue on my own. I have checked that this specific message is only sent by the content script (not by the offscreen document, for example)

Question: In what particular cases will the sender.tab value be undefined when sending this message from the content script?

disable already selected item of drop down

I am using choice.js library to manage my drop downs. I have three on the same page with the same options(choices). I want to disable a choice, once its selected in a drop down and stop it from appearing as a selectable choice in the subsequent drop downs. How do I do so using choices.js? Any idea?

here is what i tried, but its not working :

<script>
    // Initialize an array to track selected choices
    let selectedChoices = [];

    // Initialize Choices.js for all select elements with the 'js-choice' class
    document.querySelectorAll('.js-choice').forEach(element => {
        const choiceInstance = new Choices(element, {
            shouldSort: false, // Prevent sorting if not needed
            searchEnabled: false, // Disable the search box
            placeholder: true,       // Enable placeholder functionality
            placeholderValue: 'Select a Question', // Set placeholder text
            allowHTML: true,         // Allow HTML if needed for custom placeholders
            duplicateItemsAllowed: false,
            itemSelectText: 'Click to select'
        });

        // Add event listener for 'change' event
        element.addEventListener('change', function () {
            const selectedValue = choiceInstance.getValue(true); // Get the selected values (only values, not full objects)
            if (selectedValue.length > 0) {
                const value = selectedValue[0];
                // If the selected value is not already in the list, add it
                if (!selectedChoices.includes(value)) {
                    selectedChoices.push(value);
                    disableChoicesInOtherDropdowns();
                }
                console.log('Selected values:', selectedChoices);
            }
        });
    });

    // Function to disable choices in other dropdowns
    function disableChoicesInOtherDropdowns() {
        // Loop through each select element with the 'js-choice' class
        document.querySelectorAll('.js-choice').forEach(element => {
            const choiceInstance = Choices.instances[element.id]; // Get the Choices instance
            const allChoices = choiceInstance._store.getStore().choices; // Get all choices (as objects)
            
            // Loop through all choices and disable the ones that are selected
            allChoices.forEach(choice => {
                // Disable choices that are in the selectedChoices array
                if (selectedChoices.includes(choice.value)) {
                    choice.disabled = true;  // Disable the choice
                } else {
                    choice.disabled = false; // Enable choices that are not selected
                }
            });

            // Refresh the choices display after modifying their disabled state
            choiceInstance.setChoices(allChoices, 'value', 'label', true);
        });
    }
</script>

How to Implement “Append to Body” for @shentao/vue-multiselect 2.1.6 in Vue 2.6

I am using Vue 2.6 with @shentao/vue-multiselect version 2.1.6. I’ve created a reusable component where I bind all props and events to the multiselect component. Here’s my code:

Here is the component:

<template>
<div>
 <multiselect
        :id="'select-' + new Date()"
        :ref="'multiselect-' + new Date()"
        v-model="localValue"
        :multiple="multiple"
        :searchable="searchable"
        :placeholder="placeholder"
        :close-on-select="closeOnSelect"
        :track-by="trackBy || valueField"
        :label="label || textField"
        :clear-on-select="clearOnSelect"
        :hide-selected="hideSelected"
        :allow-empty="allowEmpty"
        :reset-after="resetAfter"
        :taggable="taggable"
        :tag-placeholder="tagPlaceholder"
        :options="options"
        :tag-position="tagPosition"
        :max="max"
        :options-limit="optionsLimit"
        :group-label="groupLabel"
        :group-select="groupSelect"
        :block-keys="blockKeys"
        :internal-search="internalSearch"
        :preserve-search="preserveSearch"
        :preselect-first="preselectFirst"
        :prevent-autofocus="preventAutofocus"
        :limit="limit"
        :limit-text="limitText"
        :disabled="disabled"
        :open-direction="openDirection"
        :max-height="maxHeight"
        :show-no-options="showNoOptions"
        :show-no-results="showNoResults"
        @select="handleSelect"
        @remove="handleRemove"
        @search-change="handleSearchChange"
        @tag="handleTag"
        @open="handleOpen"
        @close="handleClose"
      />
</div>
</template>

Problem:

The vue-multiselect version I am using does not support the appendToBody feature natively. As a result, dropdown menus are constrained within the component’s container, causing layout issues in some scenarios (e.g., dropdowns cut off or overlapping).

I attempted to implement a custom solution by manually moving the dropdown element to the , but this caused misalignment issues (e.g., the dropdown does not align with the input box).
Question:

What is the best way to implement an append to body functionality for this specific version of @shentao/vue-multiselect?
How can I ensure proper alignment and avoid positioning issues when appending the dropdown to the <body>?

Additional Notes:

I am looking for a solution compatible with Vue 2.6 and @shentao/vue-multiselect 2.1.6.
If there are alternative libraries or hacks that work seamlessly, I am open to suggestions.