yarn ts-node-dev requires defining dependency to src folder

Can you help me understand this behavior and share how would you solve this “properly”?

I’m running Node.JS (v20.12.2), Yarn (4.1.1), tsc (5.4.5) and have following goals:

  1. Run the app locally with ts-node & ts-node-dev.
  2. Export the app with tsc to run in elsewhere.

I can run (2) yarn build (basically yarn tsc), then node dist/server.js works.

I fail at (1) yarn dev / start (yarn ts-node ./src/index.ts) both fail with the error below. If I do what it says and add ./src folder as dependency in package.json it works, but that looks very strange to me… I don’t get why tsc is able to work with the src folder and ts-node is not. Is that really how this is supposed to work or I miss something obvious? Thanks!

File structure:

- project home
  - package.json
  - .pnp.cjs
  - tsconfig.json
  - src 
    - server.ts
  - dist
    - server.js

Error:

$ yarn ts-node-dev --exit-child src/server.ts 
<project-root>/.pnp.cjs:7812
  return Object.defineProperties(new Error(message), {
                                 ^

Error: Your application tried to access src, but it isn't declared in your dependencies; this makes the require call ambiguous and unsound.

Required package: src (via "src/server.ts")
Required by: <project-root>/

    at makeError (<project-root>/.pnp.cjs:7812:34)
    at resolveToUnqualified (<project-root>/.pnp.cjs:9450:21)
    at resolveRequest (<project-root>/.pnp.cjs:9587:31)
    at <project-root>/api/.pnp.cjs:9650:26
    at resolveRequest (<project-root>/.yarn/__virtual__/ts-node-dev-virtual-1a2df4f79d/6/.yarn/berry/cache/ts-node-dev-npm-2.0.0-a9d487396c-10c0.zip/node_modules/ts-node-dev/lib/resolveMain.js:11:16)
    at exports.resolveMain <project-root>/.yarn/__virtual__/ts-node-dev-virtual-1a2df4f79d/6/.yarn/berry/cache/ts-node-dev-npm-2.0.0-a9d487396c-10c0.zip/node_modules/ts-node-dev/lib/resolveMain.js:30:20)
    at exports.runDev (<project-root>/.yarn/__virtual__/ts-node-dev-virtual-1a2df4f79d/6/.yarn/berry/cache/ts-node-dev-npm-2.0.0-a9d487396c-10c0.zip/node_modules/ts-node-dev/lib/index.js:53:30)
    at Object.<anonymous> (<project-root>/.yarn/__virtual__/ts-node-dev-virtual-1a2df4f79d/6/.yarn/berry/cache/ts-node-dev-npm-2.0.0-a9d487396c-10c0.zip/node_modules/ts-node-dev/lib/bin.js:136:4)
    at Module._compile (node:internal/modules/cjs/loader:1369:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)

package.json:

{
  "name": "test-app",
  "packageManager": "[email protected]",
  "version": "0.1.0",
  "description": "test-app",
  "scripts": {
    "dev": "ts-node-dev --exit-child ./src/index.ts",
    "start": "ts-node ./src/index.ts",
    "build": "tsc"
  },
  "devDependencies": {
    "@tsconfig/node-lts": "^20.1.3",
    "@types/express": "^4",
    "@types/node": "^20.12.7",
    "ts-node": "^10.9.2",
    "ts-node-dev": "^2.0.0",
    "typescript": "^5.4.5"
  },
  "dependencies": {
    "express": "^4.19.2",
    "graphql": "^16.8.1",
    "graphql-http": "^1.22.1"
  }
}

tsconfig.json:

{
  "extends": "@tsconfig/node-lts/tsconfig.json",
  "include": ["src"],
  "compilerOptions": {
    /* Emit */
    "outDir": "dist",
  }
}

Move focus to another input on macOS Safari after entering username/password with Touch-Id

Simplified form for testing (with inline JavaScript instead of addEventListener):

<form ...>
  <input
    type='text'
    name='username'
    tabindex='1'
    autofocus
    onchange="document.querySelector('input[tabindex='3']').focus()"
  >
  <input type='password' name='password' tabindex='2'>
  <input type='text' name='security' tabindex='3'>
  ...
</form>

The input “username” with tabIndex 1 receives the focus when the page is loaded.
In Safari on macOS the username/password Touch-Id popup will appear automatically due to the naming of these two input fields.

Touch-Id is triggering the onchange event as expected, but the focusing to the input named ‘security’ with tabIndex 3 is not happening – the focus stays on the ‘username’ field.

I know that the onchange event is triggered by Touch-Id because replacing the code with:

onchange="console.log(document.querySelector('input[tabindex='3']'))"

will correctly show the target HTML object <input type=’text’ name=’security’ tabindex=’3′>.

For testing I also renamed the fields ‘username’ and ‘password’ and changed the type of the password field to ‘text’ and then the code:

onchange="document.querySelector('input[tabindex='3']').focus()"

works perfectly – when leaving the field with tab the cursor jumps from tabIndex 1 to tabIndex 3 as expected and leaves out tabIndex 2.

I also tried several events on the target input – especially onfocus of course – to see if maybe the code works and the focus is “stolen back” by the ‘username’ field due to the fact that Touch-Id takes its time, but to no avail.

What could be preventing the focus change when the onchange event is triggered by Touch-Id?

Html static part of the code gets duplicated by php function without reason

I’ve been trying to program an app for a calendar. All works well for now except that the, in theory, static html gets duplicated with no apparent reason.
Here is my code, I’ve been searching everywhere, even used AI to check the code in case it could find an error I couldn’t.

the result

index.php:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Calendario</title>
        <link rel="stylesheet" href="common.css">
        <?php include 'tabla.php'; ?>
    </head>

    <body>
        <div id='big_div'>
            <div class='header_calendario'>
                <h2>Calendario - <?php echo date('F Y'); ?></h2>
                
                <div id='seleccion_mes_div'>
                    <label for="mes">Selecciona el mes:</label>
                    <select id="seleccion_mes" onchange="cambiarMes()">
                    <option value="1">Enero</option>
                    <option value="2">Febrero</option>
                    <option value="3">Marzo</option>
                    <option value="4">Abril</option>
                    <option value="5">Mayo</option>
                    <option value="6">Junio</option>
                    <option value="7">Julio</option>
                    <option value="8">Agosto</option>
                    <option value="9">Septiembre</option>
                    <option value="10">Octubre</option>
                    <option value="11">Noviembre</option>
                    <option value="12">Diciembre</option>
                    </select>
                    <label for="año">Año:</label>
                    <input type="text" id="año" value="<?php echo $año_actual; ?>" onchange="cambiarMes()">
                </div>
            </div>
            <div id="calendario_div">
                <div class="mes">
                    <?php 
                    echo generar_calendario($mes_actual, $año_actual);
                    ?>
                </div>
            </div>
        </div>
        <script>
            var mes_actual = <?php echo $mes_actual; ?>;
            var año_actual = <?php echo $año_actual; ?>;
        </script>
        <script src="index.js"></script>
    </body>
</html>

tabla.php:

<?php
$mes_actual = isset($_GET['mes']) ? $_GET['mes'] : date('n');
$año_actual = isset($_GET['año']) ? $_GET['año'] : date('Y');
$html_tabla = '';


function comprobar_bisiesto($año) {
    return (($año % 4 == 0) && ($año % 100 != 0)) || ($año % 400 == 0);
    
};

function generar_calendario($mes, $año) {
    global $html_tabla;
    $html_tabla = '';
    comprobar_bisiesto($año);

    switch ($mes) {
        case 2: // Febrero
            if (comprobar_bisiesto($año) == 1) {
                $numDias = 29;
            } else {
                $numDias = 28;
            }
            break;
        // 30 días
        case 4:
        case 6:
        case 9:
        case 11:
            $numDias = 30;
            break;
        // 31 días
        default:
        $numDias = 31;
            break;
    };

    function generar_tabla($total_dias, $este_mes, $año) {
        global $html_tabla;
        $diaInicial = date('w', strtotime($año . '-' . $este_mes . '-01'));
        $diaTemporal_gen = 0;
        $html_tabla = '';
        for ($x = 1; $x <= 5; $x++) {
            $html_tabla .= '<div class="semana">';
            if ($x == 1) {
                switch ($diaInicial) {
                    case 0:
                        $html_tabla .= '<div class="dia lunes"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia martes"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia miercoles"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia jueves"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia viernes"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia sabado"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia domingo"><span class="num_esquina">01</span></div>';
                        $diaTemporal_gen = 2;
                        break;
                    case 1:
                        $html_tabla .= '<div class="dia lunes"><span class="num_esquina">01</span></div>';
                        $html_tabla .= '<div class="dia martes"><span class="num_esquina">02</span></div>';
                        $html_tabla .= '<div class="dia miercoles"><span class="num_esquina">03</span></div>';
                        $html_tabla .= '<div class="dia jueves"><span class="num_esquina">04</span></div>';
                        $html_tabla .= '<div class="dia viernes"><span class="num_esquina">05</span></div>';
                        $html_tabla .= '<div class="dia sabado"><span class="num_esquina">06</span></div>';
                        $html_tabla .= '<div class="dia domingo"><span class="num_esquina">07</span></div>';
                        $diaTemporal_gen = 8;
                        break;
                    case 2:
                        $html_tabla .= '<div class="dia lunes"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia martes"><span class="num_esquina">01</span></div>';
                        $html_tabla .= '<div class="dia miercoles"><span class="num_esquina">02</span></div>';
                        $html_tabla .= '<div class="dia jueves"><span class="num_esquina">03</span></div>';
                        $html_tabla .= '<div class="dia viernes"><span class="num_esquina">04</span></div>';
                        $html_tabla .= '<div class="dia sabado"><span class="num_esquina">05</span></div>';
                        $html_tabla .= '<div class="dia domingo"><span class="num_esquina">06</span></div>';
                        $diaTemporal_gen = 7;
                        break;
                    case 3:
                        $html_tabla .= '<div class="dia lunes"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia martes"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia miercoles"><span class="num_esquina">01</span></div>';
                        $html_tabla .= '<div class="dia jueves"><span class="num_esquina">02</span></div>';
                        $html_tabla .= '<div class="dia viernes"><span class="num_esquina">03</span></div>';
                        $html_tabla .= '<div class="dia sabado"><span class="num_esquina">04</span></div>';
                        $html_tabla .= '<div class="dia domingo"><span class="num_esquina">05</span></div>';
                        $diaTemporal_gen = 6;
                        break;
                    case 4:
                        $html_tabla .= '<div class="dia lunes"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia martes"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia miercoles"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia jueves"><span class="num_esquina">01</span></div>';
                        $html_tabla .= '<div class="dia viernes"><span class="num_esquina">02</span></div>';
                        $html_tabla .= '<div class="dia sabado"><span class="num_esquina">03</span></div>';
                        $html_tabla .= '<div class="dia domingo"><span class="num_esquina">04</span></div>';
                        $diaTemporal_gen = 5;
                        break;
                    case 5:
                        $html_tabla .= '<div class="dia lunes"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia martes"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia miercoles"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia jueves"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia viernes"><span class="num_esquina">01</span></div>';
                        $html_tabla .= '<div class="dia sabado"><span class="num_esquina">02</span></div>';
                        $html_tabla .= '<div class="dia domingo"><span class="num_esquina">03</span></div>';
                        $diaTemporal_gen = 4;
                        break;
                    case 6:
                        $html_tabla .= '<div class="dia lunes"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia martes"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia miercoles"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia jueves"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia viernes"><span class="num_esquina"></span></div>';
                        $html_tabla .= '<div class="dia sabado"><span class="num_esquina">01</span></div>';
                        $html_tabla .= '<div class="dia domingo"><span class="num_esquina">02</span></div>';
                        $diaTemporal_gen = 3;
                        break;
                    default:
                        echo 'Ha ocurrido un error, recargue la página.';
                        break;
                };
            } else {
                switch ($diaTemporal_gen){
                    case 2:
                        $html_tabla .= '<div class="dia lunes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia martes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia miercoles"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia jueves"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia viernes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia sabado"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia domingo"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        break;
                    case 3:
                        $html_tabla .= '<div class="dia lunes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia martes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia miercoles"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia jueves"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia viernes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia sabado"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia domingo"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        break;
                    case 4:
                        $html_tabla .= '<div class="dia lunes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia martes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia miercoles"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia jueves"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia viernes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia sabado"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia domingo"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        break;
                    case 5:
                        $html_tabla .= '<div class="dia lunes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia martes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia miercoles"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia jueves"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia viernes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia sabado"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia domingo"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        break;
                    case 6:
                        $html_tabla .= '<div class="dia lunes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia martes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia miercoles"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia jueves"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia viernes"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia sabado"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia domingo"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        break;
                    case 7:
                        $html_tabla .= '<div class="dia lunes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia martes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia miercoles"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia jueves"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia viernes"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia sabado"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia domingo"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        break;
                    case 8:
                        $html_tabla .= '<div class="dia lunes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia martes"><span class="num_esquina">0' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia miercoles"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia jueves"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia viernes"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia sabado"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        $html_tabla .= '<div class="dia domingo"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        break;
                    default:
                        $html_tabla .= '<div class="dia lunes"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                        $diaTemporal_gen++;
                        if ($diaTemporal_gen <= $total_dias) {
                            $html_tabla .= '<div class="dia martes"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                            $diaTemporal_gen++;
                            if ($diaTemporal_gen <= $total_dias) {
                                $html_tabla .= '<div class="dia miercoles"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                                $diaTemporal_gen++;
                                if ($diaTemporal_gen <= $total_dias) {
                                    $html_tabla .= '<div class="dia jueves"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                                    $diaTemporal_gen++;
                                    if ($diaTemporal_gen <= $total_dias) {
                                        $html_tabla .= '<div class="dia viernes"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                                        $diaTemporal_gen++;
                                        if ($diaTemporal_gen <= $total_dias) {
                                            $html_tabla .= '<div class="dia sabado"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                                            $diaTemporal_gen++;
                                            if ($diaTemporal_gen <= $total_dias) {
                                                $html_tabla .= '<div class="dia domingo"><span class="num_esquina">' . $diaTemporal_gen . '</span></div>';
                                                $diaTemporal_gen++;
                                            };
                                        };
                                        
                                    };
                                    
                                };
                            };
                            
                        };
                        
                        break;
                };
            };
            $html_tabla .= '</div>';
        };
    };
    generar_tabla($numDias, $mes, $año);
    return $html_tabla;    
}
?>

index.js:

function cargarCalendario(mes, año) {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            // Eliminar contenido anterior 
            document.getElementById("mes").innerHTML = "";
            // Agregar nuevo contenido
            document.getElementById("mes").innerHTML = this.responseText;
        }
    };
    xhttp.open("GET", "index.php?mes=" + mes + "&año=" + año, true);
    xhttp.send();
}

// Cargar calendario al cargar página
window.onload = function() {
    cargarCalendario(mes_actual, año_actual);
};

// Cambiar mes
function cambiarMes() {
    var mes = document.getElementById("seleccion_mes").value;
    var año = document.getElementById("año").value;
    cargarCalendario(mes, año);
}

I’ll even leave here the css just in case, that desperate I am:

#calendario_div {
    display: flex;
    height: 70%;
    
}

.mes {
    width: 70%;
    height: 70%;
    margin: 0 auto;
    border: 1px solid #000000;
    padding: 20px;
}

.semana {
    display: flex;
    align-items: flex-start;
}

.dia {
    flex-basis: calc(100% / 7);
    box-sizing: border-box;
    border: 1px solid #000000;
    padding: 5px;
    text-align: center;
    position: relative;
    height: 0;
    padding-bottom: calc(70% / 7);
}

.num_esquina {
    position: absolute;
    top: 0;
    left: 0;
}

Please, I really don’t know what more to try.

I’ve make sure to revise everything the last few days with 0 result. It should just show the static html part one time, I can’t understand why it fails.

Server Actions not executing concurrently in next js

I read an article about server actions, and I’m experiencing a related issue.

Server Actions are designed for mutations that update server-side state; they are not recommended for data fetching. Accordingly, frameworks implementing Server Actions typically process one action at a time and do not have a way to cache the return value.
enter image description here

I want to confirm if we will be running multiple server actions concurrently in Next js?
I am using next js 14.0.3 version.
https://react.dev/reference/react/use-server

How can I make the defaultValue of date an empty?

I’ve created a simple radio button that will show additional input field if the user selected yes, and I’ve created a function that will empty the fields if the user select no.

schema.ts

const formSchemaData = z.object({
    doesHaveDryRun:  z.enum(["yes", "no"], {
      required_error: "Please select if yes or not"
    }),
    dryRunDate: z.date().optional(),
    dryRunStart: z.string().optional(),
    dryRunEnd: z.string().optional(),
})

form.ts

  const form = useForm<Inputs>({
    resolver: zodResolver(formSchemaData),
    defaultValues: {
      doesHaveDryRun: "no",
      dryRunDate: new Date() : "",  
      dryRunStart: "",
      dryRunEnd: "",
  
    },
  });

So in this the radio button of none/no, I included a handle click that will empty the additional field if the button is selected.


     const handleClick = () => {
        form.resetField("dryRunDate");
        form.resetField("dryRunStart");
        form.resetField("dryRunEnd");
      };

return (

    <FormField
      control={form.control}
      name="doesHaveDryRun"
      render={({ field }) => (
        <FormItem className="space-y-3">
          <FormLabel>(Optional) Preffered Meeting Date / Dry Run</FormLabel>
          <FormControl>
            <RadioGroup
              onValueChange={field.onChange}
              defaultValue={field.value}
              className="flex flex-col space-y-1"
            >
              <FormItem className="flex items-center space-x-3 space-y-0">
                <FormControl>
                  <RadioGroupItem onClick={handleClick} value="no" />
                </FormControl>
                <FormLabel className="font-normal">None / No</FormLabel>
              </FormItem>
              <FormItem className="flex items-center space-x-3 space-y-0">
                <FormControl>
                  <RadioGroupItem value="yes" />
                </FormControl>
                <FormLabel className="font-normal">Yes</FormLabel>
              </FormItem>
            </RadioGroup>
          </FormControl>
    
          {hasDryRun === "yes" && (
            <FormItem>
              <div className="flex flex-col gap-2 pt-2">
                <Label>(Dry Run) Time of Event</Label>
                <div className="flex flex-col gap-2">
                  <FormField
                    control={form.control}
                    name="dryRunDate"
                    render={({ field }) => (
                      <FormItem className="flex flex-col">
                        <FormLabel>Date</FormLabel>
                        <Popover>
                          <PopoverTrigger asChild>
                            <FormControl>
                              <Button
                                variant={"outline"}
                                className={cn(
                                  "w-[240px] pl-3 text-left font-normal",
                                  !field.value && "text-muted-foreground"
                                )}
                              >
                                {field.value ? (
                                  format(field.value, "PPP")
                                ) : (
                                  <span>Pick a date</span>
                                )}
                                <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                              </Button>
                            </FormControl>
                          </PopoverTrigger>
                          <PopoverContent className="w-auto p-0" align="start">
                            {/* Customized Calendar */}
    
                            <Calendar
                              mode="single"
                              disabled={(date) => new Date(date) <= new Date()} // Disable past dates and today's date
                              selected={field.value || undefined}
                              onSelect={field.onChange}
                              initialFocus
                            />
                          </PopoverContent>
                        </Popover>
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={form.control}
                    name="dryRunStart"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Dry Run Starting Time</FormLabel>
                        <Select
                          onValueChange={field.onChange}
                          defaultValue={field.value}
                        >
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="end of event" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            <SelectGroup>
                              <SelectLabel>Morning</SelectLabel>
                              {timeAM.map((item, index) => (
                                <SelectItem key={index} value={item.time}>
                                  {item.time}
                                </SelectItem>
                              ))}
                            </SelectGroup>
    
                            <SelectGroup>
                              <SelectLabel>Afternoon</SelectLabel>
                              {timePM.map((item, index) => (
                                <SelectItem key={index} value={item.time}>
                                  {item.time}
                                </SelectItem>
                              ))}
                            </SelectGroup>
                          </SelectContent>
                        </Select>
    
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                  <FormField
                    control={form.control}
                    name="dryRunEnd"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>Dry Run End Time</FormLabel>
                        <Select
                          onValueChange={field.onChange}
                          defaultValue={field.value}
                        >
                          <FormControl>
                            <SelectTrigger>
                              <SelectValue placeholder="end of event" />
                            </SelectTrigger>
                          </FormControl>
                          <SelectContent>
                            <SelectGroup>
                              <SelectLabel>Morning</SelectLabel>
                              {timeAM.map((item, index) => (
                                <SelectItem key={index} value={item.time}>
                                  {item.time}
                                </SelectItem>
                              ))}
                            </SelectGroup>
    
                            <SelectGroup>
                              <SelectLabel>Afternoon</SelectLabel>
                              {timePM.map((item, index) => (
                                <SelectItem key={index} value={item.time}>
                                  {item.time}
                                </SelectItem>
                              ))}
                            </SelectGroup>
                          </SelectContent>
                        </Select>
    
                        <FormMessage />
                      </FormItem>
                    )}
                  />
                </div>
              </div>
            </FormItem>
          )}
    
          <FormMessage />
        </FormItem>
      )}
    />;

)

But the problem I’m encountering right now, is even though I click the none/no button, the date is still is being saved.

In this image, I selected yes so it has an input, but once I select no

enter image description here

I still get the date even though I reset the field using the handleclick, Is there any way I can make it null or just an empty string?

enter image description here

Error while converting website to webapplication on visual studio 2017

I followed the steps and successfully created the web application from website on visual studio 2017. I’m not getting any error or warning but 2 messages are there as below-

  1. “Severity Code Description Project File Line Suppression State Message The JavaScript language service has been disabled for the following project(s): Applicationtsconfig. These files exceeded the program size threshold: .ApplicationassetsvendorchartChart.js. Double click to find out more. 0 “
  2. “Severity Code Description Project File Line Suppression State Message The JavaScript language service has been disabled for the following project(s): Applicationtsconfig. These files exceeded the program size threshold: .ApplicationassetsvendorchartChart.js. Double click to find out more. 0 “

Kindly guide me on how to resolve these issues.

I tried adding a tsconfig.json file but that didn’t work.

Axios error with status code 401 in openweather map api

I have create a fetch.js file inside that file i have a getWeather function which will make a api call. I have imported this getweather function in app.js file and calling getWeather function inside a useffect hook.

But I am getting a axios error with status code 401. I have checked my apiurl and apikey its correct.
enter image description here

I am expecting to get a weather data on getweather function call.

Making a build for node js app with lots of apis

I have a codebase with Express & Node js as framework. We have loads of apis to call for various operations and they’re accessing a third-party software. So some authentication is also involved. The issue is this:
We want to provide a exe file or some build to client to test those APIs on their own system.
But we can’t share our codebase
Now we just want to create this exe file so that the server runs smoothly on client pc.
So we’ll also need to include all the files(the whole main folder in the exe)
Is there an efficient way to do this?

Thanks

Also here’s the result of using nexe as local module:

Error downloading prebuilt binary: RequestError: unable to get local issuer certificate

It’d be really helpful if anyone can shed some light on what is causing this error exactly & how can we fix this..

How to Prevent Any Scrolling Animation When Changing Routes in a Nuxt.js Application?

I am working on a Nuxt.js project and facing an issue where, upon navigating to a new page, there is an unwanted scrolling animation to the top of the page. I want the new page to load directly at the top without any visible scrolling. Here is the scrollBehavior function in my nuxt.config.js:

router: {
    scrollBehavior() {
        return new Promise((resolve) => {
            window.requestAnimationFrame(() => {
                resolve({ x: 0, y: 0 });
            });
        });
    },
}

Despite this configuration, I still observe a scrolling animation when transitioning between routes.
Nuxt version:2.17.2

The SVG label starts moving along the path with a delay after the block is displayed on the screen

I have a block that appears on the screen with a delay. There are 3 PNG images and an inscription on SVG in the block. Around one image, an inscription made in SVG moves along the contour. After the block is displayed on the screen, the PNG images appear normally, but the inscription does not start moving immediately (the delay is about two seconds). See how it works here https://codepen.io/bsi_52/pen/dyLKggM. Here’s the code^:

<div class="hide_block2" id='ContButilka'>
   
   <img class="butilka" src="https://habrastorage.org/webt/7i/mp/vj/7impvjl59tcl9vnfcswnorizeie.png" alt=""/>
<img class="stakan_l" src="https://habrastorage.org/webt/wr/h0/jt/wrh0jtev85sz0b8kdw5sk6pqfx4.png" alt=""/>

  <img class="stakan_p" src="https://habrastorage.org/webt/wr/h0/jt/wrh0jtev85sz0b8kdw5sk6pqfx4.png" alt=""/>

<div class="text_nadpis">
<svg
            id="svg1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 0 170 280"
            width="300"
            height="500"
        >
            <defs>
                <path
                    id="path1"
                    d="m 119.81679,209.71055 -1.74551,1.62083 -1.99487,0.74808 -1.87019,0.12468 -1.74551,0.24936 h -1.74551 -1.87019 -1.37147 -0.74808 l -1.24679,0.24935 h -0.99743 l -1.74551,0.12468 -0.74808,-0.24936 h -0.37404 -0.87275 l -0.997435,-0.12467 h -1.246793 l -1.246793,-0.12468 -2.244228,-0.37404 -1.37147,-0.37404 h -0.748078 l -0.498716,-0.12468 -0.498718,-0.49872 -1.246791,-0.49871 -0.374039,-0.37404 -0.374038,-0.37404 -0.249357,-0.74808 v -0.87275 l 0.124677,-0.87275 0.12468,-0.87276 -0.12468,-1.24679 v -0.74808 -0.74808 l 0.12468,-0.49871 -0.12468,-0.6234 h -0.124677 v -0.37404 l 0.374036,-0.49871 0.374039,-1.24679 0.12468,-44.75987 0.249356,-16.8317 -0.498716,-0.99743 -0.249359,-0.87276 0.249359,-2.36891 0.12468,-1.74551 0.249359,-0.87275 0.249357,-1.37147 0.249359,-0.99744 0.997434,-1.62083 0.872755,-2.49358 0.623398,-1.62083 0.249356,-0.87276 0.498719,-1.49615 0.623395,-1.24679 0.374039,-0.87276 0.623395,-1.24679 0.374039,-1.24679 0.374039,-1.2468 0.623395,-0.99743 0.374039,-1.49615 0.12468,-0.6234 0.249356,-1.37147 0.872755,-0.99743 0.124679,-2.61827 V 85.405308 l 3.116983,-0.872754 1.87019,-0.24936 1.99487,0.24936 h 1.74551 0.87275 l 1.49615,0.623395 v 22.442271 l 7.10672,19.94869 1.37147,2.9923 0.49872,1.62083 v 1.24679 l 0.24936,2.49358 -0.12468,1.62084 -0.49872,0.37403 0.49872,63.58644 0.49872,0.49871 z"
                    fill="none"
                    stroke="none"
                />
            </defs>
 
            <text
                id="txt1"
                lengthAdjust="spacingAndGlyphs"
                textLength="40%"
                font-size="13"
                font-weight="bold"
         >   
                <textPath
                    id="result1"
                    method="align"
                    spacing="auto"
                    startOffset="-25%"
                    xlink:href="#path1"
                >
                    <tspan dy="-" fill="yellow">Да наливай уже!</tspan>
                    <animate
                        id="a1"
                        dur="12s"
                        attributeName="startOffset"
                        values="-25%;119%"
                        begin="0s;a1.end+5s"
                    />
                </textPath>
            </text>
 
            <text
                id="txt1"
                lengthAdjust="spacingAndGlyphs"
                textLength="40%"
                font-size="13"
                font-weight="bold"
            >
                <textPath
                    id="result2"
                    method="align"
                    spacing="auto"
                    startOffset="-25%"
                    xlink:href="#path1"
                >
                    <tspan dy="-2" fill="yellow">Да наливай уже!</tspan>
                    <animate
                        id="a2"
                        dur="12s"
                        attributeName="startOffset"
                        values="-25%;119%"
                        begin="8.5s;a2.end+5s"
                    />
                </textPath>
           </text>
 

        </svg>

   </div>

#ContButilka {
 grid-row: 1;
grid-column: 1;
   width: 100%;
margin-top: 30px;
margin-left: 1em;
max-width: 200px;
position: relative;
display: none;   
}

.text_nadpis {
grid-row: 1;
grid-column: 1;
position: relative;
margin-top: -35.2em;
margin-left: 20.25em;
}
 
.butilka {
grid-row: 1;
grid-column: 1;
transform: scale(0.85);
position: relative;
margin-top: 1em;
margin-left: 25.5em;
} 

.stakan_l {
grid-row: 1;
grid-column: 1;
position: relative;
top: -6em;
margin-left:23em;
} 

.stakan_p {
grid-row: 1;
grid-column: 1;
position: relative;
top: -10.6em;
margin-left:33.5em;
} 
 

setTimeout(function() {
   document.getElementById('ContButilka').style.display = 'block';
}, 3000);


how to change fetch data image and imageUrl from backend server like nodejs,express.js

i am making ecommerce website clone project
but have some doubts

  1. how to change imageUrl and image of any fetched data
    2.how to make custom fetchApi for for fetching data
    3.i downloaded some images from figma but iam unable to get imageUlr how to get it
    4.how to convert downloaded image to imageUrl for making custom fetch Api

i am making ecommerce website clone project

i have fetched data from fakestore Api and i want to change imageUrl and image how to change it guide me.