I am creating a new website in Angular V20. I have created a new module and added a new component to the module declarations and exports. I am exporting the component in its script. When I attempt to import the new component from the module into my app.routes.ts file, it throws the error:

No matching export in “module” for import “Component name”.

Then tells me there is an error on the import of the component in my routing file. When I hover over the import in VS code, it states, “Module ‘module location’ declares ‘component’ locally, but it is not exported.”

What is causing this error and why can’t I use my module to import my component? Thanks for any and all help!

Component Code:

import { Component } from '@angular/core';

@Component({
  selector: 'event-view',
  imports: [],
  templateUrl: './event-view.html',
  styleUrl: './event-view.css'
})
export class EventView { }

Module code:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { EventView } from './event-view/event-view';


@NgModule({
  declarations: [ EventView ],
  imports: [
    CommonModule
  ],
  exports: [ EventView ]
})
export class PagesModule { }

app.routes.ts:

import { Routes } from '@angular/router';
import { EventView } from '../Pages/pages-module';

export const routes: Routes = [
    {   
        path: '/recipient/:id',
        component: EventView
    }
];

I have tried removing the standalone from the component but then it wouldn’t go into the module without errors. I have tried checking if there is a missing attribute on my component and if there is anything missing on my module, but everything looks good.

Note: My problem seems to be more to do with synchronous vs asynchronous JavaScript than with PouchDB.

I have a PouchDB database containing documents that each have one attachment.

The attachments are simply UTF8 text.

The attachments blobs are created with const blob_content = new Blob([content], {type: 'text/plain'});

I can get one attachment fine with the following:

db_notes.getAttachment(id, 'content.txt').then(function(blob) {
   const reader = new FileReader();
   reader.readAsText(blob);
   reader.onload = () => { 
      processContent(reader.result);
   };
}).catch(function(err) {
   console.log(err);
});

But I need to get all of the documents with the extracted blob content.

My extraction code, so far, is:

db_notes.allDocs({
         include_docs: true
      ,  attachments: true
      ,  binary: true
   }).then(function(result) {
      allNotesIncContent = result.rows.map(({doc}) => docToDocObj(doc));
      console.log("allNotesIncContentn ", allNotesIncContent );
   }).catch(function(err) {
      console.log(err);
   });

and

function docToDocObj(doc) {
   rawBlobData = doc._attachments['content.txt'].data;
   rawBlobData.text().then(function(content) {
      objToReturn =
               {  id: doc._id
               ,  rev: doc._rev
               ,  content: content
               }
      console.log("objToReturnn ", objToReturn );
      return objToReturn;
   }).catch(function(err) {
      console.log("Blob.text error: ", err);
   });
};

At the console I see:

(9) [undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

followed by a succession of

objToReturn
{id: ‘1756756073636’, rev: ‘1-7bd7518103126469453c4cf04968b189’, content: ‘Some text’, …}

I’m guessing this is because rawBlobData.text() is an asynchronous function that is taking too long to return its results.

I have naively played with returning a Promise instead, but I’ve failed to construct the correct code — I end up with a .then not defined error.

I’m building a SvelteKit application where users can edit student details on a dynamic route (/student/[id]). I’m using Supabase for the database and SvelteKit Superforms to handle the form.

The editing functionality works correctly. However, I’m facing a strange issue with data consistency only on page reloads.

The Problem

When I navigate from my student list page (/students) to a specific student’s detail page (/student/[id]), the data is fetched and the form is populated correctly.

The issue occurs when I reload the page directly on a detail page (e.g., /student/123-abc-456).

Observed behavior on reload:

The correct student data is fetched from the load function and displayed on the page for a brief moment.
After a split second, the data within the form fields (managed by superForm) is replaced by the data of another student. I could confirm this with the SuperDebug Component

The non-form data on the page (like the header ) which uses data.student remains correct. This suggests the issue is specific to the Superforms store ($form).

I’ve confirmed through logging that the data.student object passed from +page.server.ts is always correct. The issue seems to be with how the $form store is being hydrated or updated on the client side after a full page load.

What could be causing the $form store to be updated with incorrect data after a page reload, and how can I ensure it stays in sync with the data loaded for the current page?

+page.server.ts

import { supabase } from '$lib/supabaseClient';

import type { PageServerLoad } from './$types';
import type { Actions } from '@sveltejs/kit';
import { zod } from 'sveltekit-superforms/adapters';
import { superValidate } from 'sveltekit-superforms';

import { fail } from '@sveltejs/kit';
import type { Student } from '$lib/types';

import z from 'zod';

const studentSchema = z.object({
    id: z.string().uuid(),
    first_name: z.string().min(2, 'Vorname ist erforderlich.'),
    last_name: z.string().min(2, 'Nachname ist erforderlich.'),
    email: z.string().email('Ungültige E-Mail-Adresse.').nullable(),
    phone_number: z.string().nullable()
});

// This is responsible for loading the data from the database
export const load: PageServerLoad = async (event) => {
    const id = event.params.id;

    const { data: student, error } = await supabase
        .from('students')
        .select('*')
        .eq('id', id)
        .single<Student>();

    if (error || !student) {
        console.error('Error loading student:', error?.message);
    }

    const form = await superValidate(student, zod(studentSchema));

    return { student, form };
};

// This is responsible for the form submission
export const actions: Actions = {
    default: async ({ request }) => {
        const form = await superValidate(request, zod(studentSchema));

        if (!form.valid) {
            return fail(400, { form });
        }

        const { error } = await supabase.from('students').update(form.data).eq('id', form.data.id);

        if (error) {
            console.error('Error updating student:', error.message);
            return fail(400, { form });
        }

        return { form };
    }
};

+page.svelte

<script lang="ts">
    import Button from '$lib/components/ui/button/button.svelte';
    import * as Tabs from '$lib/components/ui/tabs';
    import * as Card from '$lib/components/ui/card';
    import type { PageData } from './$types';

    import ChevronLeft from '@lucide/svelte/icons/chevron-left';
    import SuperDebug, { superForm } from 'sveltekit-superforms';
    import { Badge } from '$lib/components/ui/badge';
    import Mail from '@lucide/svelte/icons/mail';
    import Phone from '@lucide/svelte/icons/phone';
    import Pencil from '@lucide/svelte/icons/pencil';
    import FormButton from '$lib/components/ui/form/form-button.svelte';
    import Input from '$lib/components/ui/input/input.svelte';

    export let data: PageData;

    const { form, errors, enhance } = superForm(data.form);
    console.log($form);
</script>

{#if data.student}
    {#key data.student.id}
        <SuperDebug data={$form} />
        <header class="border-text-muted-foreground border-b">
            <h1 class="mt-4 mb-2 text-2xl font-bold">
                <Button variant="ghost" href="/students">
                    <ChevronLeft size="18" />
                </Button>
                Schülerprofil von {data.student.first_name}
                {data.student.last_name}
            </h1>
        </header>
        <div class="mt-8 flex flex-col gap-y-4 lg:flex-row lg:gap-x-4">
            {#if data.student}
                <Tabs.Root value="overview" class="w-full">
                    <Tabs.List>
                        <Tabs.Trigger value="overview">Übersicht</Tabs.Trigger>
                        <Tabs.Trigger value="password">Password</Tabs.Trigger>
                    </Tabs.List>
                    <Tabs.Content value="overview">
                        <div class="grid gap-4 xl:grid-cols-3">
                            <div class="space-y-4 xl:col-span-1">
                                <Card.Root>
                                    <Card.Header>
                                        <Card.Title class="relative flex flex-col items-center gap-2">
                                            <div class="circle-avatar">
                                                <img
                                                    alt="Student's avatar"
                                                    src="https://images.unsplash.com/photo-1517365830460-955ce3ccd263?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=384&q=80"
                                                    class="h-24 w-24 rounded-full"
                                                />
                                            </div>
                                            <h2 class="font-bold tracking-tight lg:text-xl">
                                                {data.student.first_name}
                                                {data.student.last_name}
                                            </h2>

                                            <div class="flex flex-row gap-2">
                                                <Badge variant="secondary" class="w-fit">
                                                    {data.student.driving_class}
                                                </Badge>
                                            </div>
                                        </Card.Title>
                                        <Card.Content class="mt-5 flex flex-col gap-4">
                                            <div class="flex flex-row items-center gap-2">
                                                <Mail size="18" />
                                                <a class="text-sm text-muted-foreground" href="mailto:{data.student.email}">
                                                    {data.student.email}
                                                </a>
                                            </div>
                                            <div class="flex flex-row items-center gap-2">
                                                <Phone size="18" />
                                                <span class="text-sm text-muted-foreground">
                                                    {data.student.phone_number}
                                                </span>
                                            </div>
                                        </Card.Content>
                                    </Card.Header>
                                </Card.Root>
                            </div>

                            <div class="space-y-4 xl:col-span-2">
                                <Card.Root>
                                    <Card.Header class="relative">
                                        <h2 class="mb-5">Schüler-Info</h2>
                                        <Pencil
                                            size="1.5rem"
                                            class="text-muted-foreground hover:cursor-pointer hover:text-primary"
                                            style="position: absolute; top: 0rem; right: 2rem;"
                                        />
                                        <Card.Content class="px-0">
                                            <form method="POST" use:enhance>
                                                <input type="hidden" name="id" bind:value={$form.id} />
                                                <div class="mb-4 flex flex-col gap-2">
                                                    <label for="first_name">Vorname</label>
                                                    <Input
                                                        type="text"
                                                        name="first_name"
                                                        class="input w-full"
                                                        bind:value={$form.first_name}
                                                    />
                                                    {#if $errors.first_name}
                                                        <p class="text-error">{$errors.first_name}</p>
                                                    {/if}
                                                </div>
                                                <div class="mb-4 flex flex-col gap-2">
                                                    <label for="last_name">Nachname</label>
                                                    <Input
                                                        type="text"
                                                        name="last_name"
                                                        class="input"
                                                        bind:value={$form.last_name}
                                                    />
                                                    {#if $errors.last_name}
                                                        <p class="text-error">{$errors.last_name}</p>
                                                    {/if}
                                                </div>
                                                <div class="mb-4 flex flex-col gap-2">
                                                    <label for="email">E-Mail Adresse</label>
                                                    <Input type="email" name="email" class="input" bind:value={$form.email} />
                                                    {#if $errors.email}
                                                        <p class="text-error">{$errors.email}</p>
                                                    {/if}
                                                </div>
                                                <div class="mb-4 flex flex-col gap-2">
                                                    <label for="phone_number">Telefonnummer</label>
                                                    <Input
                                                        type="tel"
                                                        name="phone_number"
                                                        class="input"
                                                        bind:value={$form.phone_number}
                                                    />
                                                    {#if $errors.phone_number}
                                                        <p class="text-error">{$errors.phone_number}</p>
                                                    {/if}
                                                </div>
                                                <FormButton type="submit" class="w-full">Speichern</FormButton>
                                            </form>
                                        </Card.Content>
                                    </Card.Header>
                                </Card.Root>
                            </div>
                        </div>
                    </Tabs.Content>
                    <Tabs.Content value="password">Change your password here.</Tabs.Content>
                </Tabs.Root>
            {:else}
                <p>Fehler beim Laden des Schülers.</p>
            {/if}
        </div>
    {/key}
{/if}

I visited a website Tried to copy a selected part. But no selection and copy way was working .. Also I cant see the inspect ! How did they do this?

Its not like so protected info . Its a public website also it was roadmap that i wanted to copy and just search on another tab. anyway this feature seems cool to me .

I am using DataTables multi item selection and like to submit the selected rows to my form.

Of course, I could manually create an input element for each row in my table:

<input type="hidden" id="row_0" name="par" value="456" disabled="disabled" />
<input type="hidden" id="row_1" name="par" value="876" disabled="disabled" />
...

and then toggle the disabled attribute based on the row selection. Something like this:

for (let row of table.rows({ selected: true })) {
  $(`#row_${row.index()}`).removeAttr("disabled");
}

But maybe there is an easier solution which requires less coding, I did not find any.

TypeScript Error: “Cannot redeclare block-scoped variable ‘x'” when variables are in different files

I’m working on a Node.js/TypeScript project and I’m encountering a strange error. I have two separate TypeScript files with variables that have the same name, but TypeScript is complaining about redeclaration.

My setup:

File B (module-practice.ts):

const x = 'Variable X';
console.log(x);
// other code...
module.exports = () => {
  console.log('I am X ......');
  console.log(x);
};

File A (index.ts):

const fn = require('./module-practice');
console.log(fn);
const x = 'Again Variable X';  // Error happens here
fn();

The error I’m getting:

Cannot redeclare block-scoped variable 'x'.

What I’ve tried:

When I add export {}; in file A (index.ts), the error goes away.

My question:

1. Why am I getting this error when the variables are in completely different files?
2. Why does adding export {}; fix the issue?
3. Is this the correct solution or is there a better approach?

I’m confused because I thought each file would have its own scope for variables, especially.

How can i make my angular application maintain the user session on page refresh but automatically log out the user when the browser tab or windows is closed?

What I Tried

1. I used the beforeunload event in Angular (window.addEventListener(‘beforeunload’, …)) to know when the tab is closing.

2. I called my authService.logout() inside this event to log the user out.

3. But I noticed this also runs when the page refreshes or when the user navigates away, which I don’t want.

4. I also checked the MDN docs and tried using returnValue for the unload event, but it shows the generic browser message and still activates on refresh.

What I Expected

1. When the user refreshes the Angular page, the session/token should be kept so they remain logged in.

2. When the user closes the browser or tab, the app should log them out automatically, clearing tokens/session both locally and on the backend.

I wanna make a dropdown list with all languages and the selected language be translated automatically like using Google Translate API instead of make [data-en] or [data-ar] attributes to translate text contents manually.

This is an Example of the translation Way I do..

// Language Switcher
    const langButtons = document.querySelectorAll('.lang-btn');
    
    langButtons.forEach(button => {
        button.addEventListener('click', function() {
            const lang = this.getAttribute('data-lang');
            
            // Update active button
            langButtons.forEach(btn => btn.classList.remove('active'));
            this.classList.add('active');
            
            // Update language attributes
            document.body.setAttribute('data-lang', lang);
            document.body.setAttribute('dir', lang === 'ar' ? 'rtl' : 'ltr');
            
            // Update all text elements
            updateTextContent(lang);
        });
    });

    // Function to update text content based on language
    function updateTextContent(lang) {
        const elements = document.querySelectorAll('[data-en], [data-ar]');
        
        elements.forEach(element => {
            if (lang === 'en') {
                if (element.hasAttribute('data-en')) {
                    if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
                        element.setAttribute('placeholder', element.getAttribute('data-en'));
                    } else {
                        element.textContent = element.getAttribute('data-en');
                    }
                }
            } else if (lang === 'ar') {
                if (element.hasAttribute('data-ar')) {
                    if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') {
                        element.setAttribute('placeholder', element.getAttribute('data-ar'));
                    } else {
                        element.textContent = element.getAttribute('data-ar');
                    }
                }
            }
        });
    }

<header class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo">
                    <h2 data-en="ABC Therapy" data-ar="ABC ثيرابي">ABC Therapy</h2>
                </div>
                <nav class="navigation">
                    <a href="#home" class="nav-link active" data-en="Home" data-ar="الرئيسية">Home</a>
                    <a href="#testimonials" class="nav-link" data-en="Testimonials" data-ar="آراء المرضى">Testimonials</a>
                    <a href="#services" class="nav-link" data-en="Services" data-ar="الخدمات">Services</a>
                    <a href="#about" class="nav-link" data-en="About" data-ar="من نحن">About</a>
                    <a href="#contact" class="nav-link" data-en="Contact" data-ar="تواصل معنا">Contact</a>
                </nav>
                <div class="header-actions">
                    <button class="appointment-btn" data-en="Book Appointment" data-ar="احجز موعد">Book Appointment</button>
                </div>
            </div>
        </div>
    </header>

HTML Document to tranlate only from English to Arabic or vice versa

here is the code

  const browser = await chromium.launch();
  console.log('browser',browser);
  const context = await browser.newContext({
    acceptDownloads: true
  });
  const page = await context.newPage();
  await page.goto(pageUrl, { waitUntil: 'domcontentloaded' });

  // Get all PDF links (anchors ending with .pdf)
  const pdfLinks: string[] = await page.$$eval(
    "a[href$='.pdf']",
    anchors => anchors.map(a => (a as HTMLAnchorElement).href)
  );

  console.log(`Found ${pdfLinks.length} PDF(s).`);

  for (const rawLink of pdfLinks) {
    const pdfUrl = new URL(rawLink, pageUrl).toString();
    // Open link in a new tab to trigger download
    const [download] = await Promise.all([
      page.waitForEvent('download'),
      page.click(`a[href='${pdfUrl}']`).catch(async () => {
        const pdfPage = await context.newPage();
        await pdfPage.goto(pdfUrl);
        await pdfPage.close();
      })
    ]);
    const urlObj = new URL(pdfUrl);
    const filename = path.basename(urlObj.pathname);
    const filepath = path.join(downloadDir, filename);
    await (download as Download).saveAs(filepath);
    console.log(`Downloaded: ${filepath}`);
  }

  await browser.close();

Expected result is all the pdf will be downloaded but in reality browser only opens the first pdf but not downloading it, the rest of pdf pages are not opening and the browser just closed down.

any idea how to solve it?

I’m building an collection of functions and need to have this collection have default options, which the user can set on use.

(function (blackout, $, undefined) {
    blackout.text = "Please wait ...";
    blackout.timeout = 1000;
    blackout.img = "/Content/Images/loader.png";
    var defaultOptions = {
        text: "Please wait...",
        timeout: 1000,
        img: "/Content/Images/loader.png",
    };

    blackout.show = function ({text = blackout.defaultOptions.text, timeout = blackout.defaultOptions.timeout, img = blackout.defaultOptions.img}) {
        return this;
    }
    blackout.hide = function () {
        return this;
    }
}(Skd.blackout = Skd.blackout || {}, jQuery));

What I need is the option to call Skd.blackout.show() executing with default options or Skd.blackout.show({ text: "Hi Stack Overflow" }) showing the same, but with a differenct text.

How do I accomplise this?

I’ve tried a bunch of approaces and a hitting the dev-wall every time

When I’m importing react to the index.js this shows me a invisible line and when I’m saving the code it’s getting Total invisible. When I’m running the html file the output is not showing. I’ve stored all the files in my single folder

I’ve installed npm, react, react-dom, I’ve also run the npm run start,

I have following JS code and working perfectly if it is on each and every html page (containing two of three Tables) of my project. But when i placed that code in JS external file and linked that file with html pages, it is triggering each and every table on a html page. I tried to restrict it with only MyTable3, but if I click in any table of the page, the code starts working. Is it possible to have the code in an external JS file and it should only work with a particular Table i.e. myTable3. Thanks.

var cells = document.getElementsByTagName('td');
for(var i = 0; i <= cells.length; i++){
    cells[i].addEventListener('click', clickHandler);
}

function clickHandler()
{
    document.getElementById("tulip").value = (this.textContent);
    document.getElementById("tulip").click(); 
}

Ive been doing an audio player that uses youtube links for my personal website (of which I used the code from Max Zheng How to play only the audio of a Youtube video using HTML 5?), and a few days ago I finally managed to make it work. But there is a problem: the function I made to change songs became way too long:

      function checkin(z){
        document.getElementById("x").innerHTML = z;
        if (z == 1) {
          document.getElementById("nome_musica").innerHTML = "Engenheiros do Hawaii - Infinita Highway (ao vivo)";
      //substitute the text above with the name of the song
          id_video = a;
          //YT.Player.load();
          // refresh();
      //substitute the variable with your song
        }else if (z == 2){
          document.getElementById("nome_musica").innerHTML = "They Might Be Giants - Istambul(not Constantinople)";
          id_video = d;
         //player.load();
          ytPlayer.loadVideoById(id_video);
          // refresh();
        }else if (z == 3){
          document.getElementById("nome_musica").innerHTML = "Kocchi no Kento - Hai Yorokonde";
          id_video = c;
          //player.load();
         ytPlayer.loadVideoById(id_video);
          // refresh();
        }else{
          document.getElementById("error").innerHTML = "error in the system";
        }
      }

I tried to make a For loop as well as two separate arrays (one for the links and another for the song titles) so it repeats comparing the song number n times, with n being the arrays length.

      const links = [a,d,c,f];
      const nomes = ["Engenheiros do Hawaii - Infinita Highway (ao vivo)","They Might Be Giants - Istambul(not Constantinople)","Kocchi no Kento - Hai Yorokonde","the pillows - THE LAST DINOSAUR"];

      var inicio = checkin(xe);

      function checkin(n){
        document.getElementById("x").innerHTML = n;
        for (let i = 1; i < links.length; i++) {
          if (n===i){
            let j = i - 1;
            id_video = links[j].toString();
            
            ytPlayer.loadVideoById(id_video);//"jLdAuGarfM0");
            document.getElementById("nome_musica").innerHTML = nomes[j].toString();
          }else{
            continue;
          }
        }
      }

But when I try this loop, the console says Cannot read properties of undefined (reading ‘loadVideoById’); although the loadVideoById worked perfectly fine in the other function. What the hell is the issue here? Is it just that it doesnt work inside for loops?
I can work it with the other function, but I would prefer if I could use the one with a For loop.

I’m using Puppeteer and JS to write a web scraper. The site I’m scraping is pretty intense, so I need to use a local chrome instance and a residential proxy service to get it working. Here’s my basic setup.

const chromeProcess = spawn(chromePath, [
    `--remote-debugging-port=${PORT}`,
    `--user-data-dir=${userDataDir}`,
    `--proxy-server=${proxyUrl}`,
    "--no-first-run",
    "--no-default-browser-check",
    "--disable-extensions",
    "--start-maximized",
    "--disable-features=IsolateOrigins,site-per-process"
  ], { stdio: "ignore" });

  let browser = await puppeteer.connect({ browserURL: `http://127.0.0.1:${PORT}` });
  let page = await browser.newPage();

I’ve been getting a multitude of errors trying to get the proxy service working, however, (like net::ERR_NO_SUPPORTED_PROXIES) where the page won’t load, or will show a “page not found” error in the browser. I’ve tried tunneling with mitmproxy with no luck, so I’m just not sure what’s possible at this point.

Does anyone have any insight into using proxies with a local chrome instance? Is this even possible?

I have up to four form text inputs that I’m trying to get copied to the windows clipboard as individual entries. Using navigator.clipboard.writeText it will successfully copy any one entry, but multiple calls simply overwrite the same clipboard entry.

A simplified code extract:

`function aFunction() {
    let inputElm1 = document.createElement("input");
    inputElm1.id = "inputElm1";
    inputElm1.type = "text";
    someContainerElement.appendChild(inputElm1);

    let inputElm2 = document.createElement("input");
    inputElm2.id = "inputElm2";
    inputElm2.type = "text";
    someContainerElement.appendChild(inputElm2);

    let copyButton = document.createElement("button");
    copyButton.id = "copyButton";
    copyButton.innerHTML = "Copy All To Clipboard";
    copyButton.addEventListener("click", copyButtonClick );
    someContainerElement.appendChild(copyButton);
}
function copyButtonClick(){
    let sourceElm1 = document.getElementById("inputElm1");
    sourceElm1.select();
    navigator.clipboard.writeText(sourceElm1.value);
    
    let sourceElm2 = document.getElementById("inputElm2");
    sourceElm2.select();
    navigator.clipboard.writeText(sourceElm2.value);    
}`

Then when using the Windows Key + V to open the clipboard history only the last entry is present. (in the example sourceElm2 value).
I can manually Ctrl-C on each input in succession and all entries appear in the clipboard history.
I’m sure I’m missing something, just can’t determine what.