I am trying to deploy a firebase function in python. In the main.py file I define a basic Flask server, this main.py imports fetch.py (another file -same directory- with my source code). The fetch.py file uses the python javascript package. I added javascript to requirements.txt too. This package needs Node.js installed in the environment. Is there any simple way I can add Node.js?

I saw these Docs but I feel like its not what I need because I am not calling any Node/JS code, rather Node just needs to be setup in the same environment. Calling this deploy command

gcloud functions deploy fetchPython                       
  --gen2 
  --runtime=python311 
  --region=us-central1 
  --entry-point=app 
  --trigger-http 
  --allow-unauthenticated

results in this

ERROR: (gcloud.functions.deploy) OperationError: code=3, message=Could not create or update Cloud Run service fetchpython, Container Healthcheck failed. Revision ‘fetchpython-00003-muh’ is not ready and cannot serve traffic. The user-provided container failed to start and listen on the port defined provided by the PORT=8080 environment variable within the allocated timeout. This can happen when the container port is misconfigured or if the timeout is too short. The health check timeout can be extended. Logs for this revision might contain more information.

running gcloud functions logs read fetchPython --region=us-central1 I get:

LEVEL    NAME         EXECUTION_ID  TIME_UTC                 LOG
E        fetchpython                2025-04-17 21:54:58.739  Default STARTUP TCP probe failed 1 time consecutively for container "worker" on port 8080. The instance was not started.
                                                             Connection failed with status CANCELLED.
         fetchpython                2025-04-17 21:54:58.649  Exception: Timed out accessing 'console'
WARNING  fetchpython                2025-04-17 21:54:58.649  Container called exit(1).
         fetchpython                2025-04-17 21:54:58.345      raise Exception(f"Timed out accessing '{attr}'")
         fetchpython                2025-04-17 21:54:58.345    File "/layers/google.python.pip/pip/lib/python3.11/site-packages/javascript/proxy.py", line 43, in ipc
         fetchpython                2025-04-17 21:54:58.345             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
         fetchpython                2025-04-17 21:54:58.345      resp = self.ipc("get", ffid, method)
         fetchpython                2025-04-17 21:54:58.345    File "/layers/google.python.pip/pip/lib/python3.11/site-packages/javascript/proxy.py", line 150, in getProp
         fetchpython                2025-04-17 21:54:58.345                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
         fetchpython                2025-04-17 21:54:58.345      methodType, val = self._exe.getProp(self._pffid, attr)
         fetchpython                2025-04-17 21:54:58.343    File "/layers/google.python.pip/pip/lib/python3.11/site-packages/javascript/proxy.py", line 230, in __getattr__
         fetchpython                2025-04-17 21:54:58.343                ^^^^^^^^^^^^^^^^^^^^^^^^^
         fetchpython                2025-04-17 21:54:58.343      console = config.global_jsi.console  # TODO: Remove this in 1.0
         fetchpython                2025-04-17 21:54:58.343    File "/layers/google.python.pip/pip/lib/python3.11/site-packages/javascript/__init__.py", line 18, in init
         fetchpython                2025-04-17 21:54:58.343      init()
         fetchpython                2025-04-17 21:54:58.341    File "/layers/google.python.pip/pip/lib/python3.11/site-packages/javascript/__init__.py", line 27, in <module>
         fetchpython                2025-04-17 21:54:58.341      from javascript import require
         fetchpython                2025-04-17 21:54:58.341    File "/workspace/fetch.py", line 2, in <module>
         fetchpython                2025-04-17 21:54:58.341      from fetch import KeyFetcher
         fetchpython                2025-04-17 21:54:58.341    File "/workspace/main.py", line 3, in <module>

main.py

from flask import Flask, request, jsonify
from google.cloud import firestore
from fetch import KeyFetcher
import os

app = Flask(__name__)
db = firestore.Client()

@app.route('/keys', methods=['POST'])
def call_fetch():
    data = request.json
    version = data.get("version")

    if not version:
        return jsonify({"error": "Version is required"}), 401

    try:
        result = KeyFetcher(version).fetch_keys()
    except Exception as e:
        return jsonify({"parse error": e}), 401

    return jsonify({"result": result}), 200

if __name__ == '__main__':
    port = int(os.environ.get('PORT', 8080))
    app.run(host='0.0.0.0', port=port)

fetch.py

import base64, os, re, tempfile, threading, esprima
from javascript import require
from functools import wraps
from logger import Logger
from wasm import Wasm
import jsbeautifier
import requests
import binascii
import sys, os
import base64
import re

# My code here

Requirments.txt

firebase_functions~=0.1.0
flask
google-cloud-firestore
jsbeautifier
requests
esprima
javascript
colorama

I am currently trying to convert a terraform tfvar file as a string into a list of key value pairs for each attribute in the file. I have tried to use a few packages, such as js-hcl-parser and hcl2-json-parser, but it seems those convert the defined attributes vs an actual tfvar file. Do I need to create custom logic to parse the string that I give, or is there a package I can utilize that would save me the headache. The problem with creating my own parsing is that I need to be able to handle complex nested objects and arrays. Here’s an example of the file string I can have:

name=""
environment="deve"
subnet_name="app-compute-db"
create_new_resource_group=false
ant={
"test"="test",
"test2"={"TEST"=["test"]}
}

I’m building a multi-tenant SaaS application using Next.js, Node.js, and PostgreSQL with Prisma ORM. I want each tenant’s data to be isolated, but also want to reuse the same logic and services across all tenants.

Here are the options I’m considering:

Schema-per-tenant – using a separate schema in PostgreSQL for each tenant.

Row-level tenant separation – adding a tenant_id column to all tables.

Questions:

Which approach is better in terms of performance and maintainability for scaling to hundreds or thousands of tenants?

Can Prisma efficiently support schema-per-tenant setup, or would that require manual workarounds?

How can I design the folder structure and Prisma client setup to support tenant-aware services?

Any code examples or best practices would be greatly appreciated.

One of my button displays with 2 words like ‘reservation book’.
The button looks perfect in Chrome but only shows partially in Edge.
If I change the CSS class it will reflect other places too.

<a href="#" onclick="PortalClassDetails.ClassDetails.ClassDetailsAction('@url', '@item.ClassID', '@sort','@direction','@register','@pageNumber', true)" title="Waitlist" style="text-decoration: none">
  <div class="wait">
    Join Waitlist                          
  </div>
</a>

How can the font of scale bar be modified in leaflet? Example below of what I have tried without success:

 library(leaflet)
    library(htmltools)
    
    # Create a basic Leaflet map
    map <- leaflet() %>%
      addTiles() %>%
      setView(lng = -121.2722, lat = 38.1341, zoom = 10)  
    
    # Add a scale bar to the map
    map <- map %>%
      addScaleBar() %>% 
      onRender("
function(el, x) {
  var map = this;
L.control.scale({
    position: 'bottomleft',
    imperial: false,
    onRender: function(options) {
        var scaleContainer = this._container;
        scaleContainer.style.fontSize = '30px' !important; 
    }
}).addTo(map);
}
")  
map

I am trying to save the dropdown value (cascading) in local storage during page navigation in google web application. I have written some code block for save data in local storage by searching on google but not succeed. After implementing local storage for Cascading dropdown then dropdown not working after page navigation, but it works only after page loading. On the other hand if i remove the cascading dropdown and add option in select element then local storage works fine.

for the local storage i have used below code block. Please help me to learn this.

const class = document.getElementById("class");

  class.addEventListener("change",function(e) {
    localStorage.setItem("saveClass",e.target.value);
  });
  
  function getClassData() {
    let saveClassData = localStorage.getItem("saveClass");

    if (saveClassData != null) {
      document.getElementById("class").value = saveClassData;
    } else {
      document.getElementById("class").value = "0";
      dropdownOption();
    }
  }

window.addEventListener('load', function() {

  let courseOption = {
    "diploma": {
      "Electrical": ["Math3","C.Sc.","E&TC"],
      "Mechanical": ["engines","mecanics"],
      "Civil": ["drawing","building","blocks"] },

      "Degree": {
        "AI": ["LLM","ML","Gen AI"],
        "security": ["Cyber","linux"] }
    };
    
   let selectedClass = document.getElementById("class");
   let selectedSubject = document.getElementById("subject");
   let selectedChapter = document.getElementById("chapter");

    for(let x in courseOption) {
      selectedClass.options[selectedClass.options.length] = new Option(x,x);
    }

    selectedClass.onchange = function() {
      selectedSubject.length = 1;
      selectedChapter.length = 1;

      for (let y in courseOption[this.value]) {
        selectedSubject.options[selectedSubject.options.length] = new Option(y, y);
      }
    }

    selectedSubject.onchange = function() {
      selectedChapter.length = 1;
      let z = courseOption[selectedClass.value][this.value];
      for (let i = 0; i < z.length; i++) {
        selectedChapter.options[selectedChapter.options.length] = new Option(z[i], z[i]);
      }
    }
  });

<lang type = HTML>

<div class="option">

<div>
  <select id="class">
    <option value="0" disabled selected>Select Class</option>
  </select>
</div>

<div>
  <select id="subject">
    <option value="0" disabled selected>Select Subject</option>
  </select>
</div>

<div>
  <select id="chapter">
    <option value="0" disabled selected>Select Chapter</option>
  </select>
</div>

</div>

<div>
<a href="<?!= ScriptApp.getService().getUrl()">Next Page</a>
</div>

Attached below is the code

//code starts here

    import React, { Component ,useState } from "react";
    import logo from "./logo.svg";
    import { connect } from 'react-redux';
    import { bindActionCreators } from 'redux';
    import { withRouter } from 'react-router-dom';
    import "./App.css";
    import axios from 'axios';
    import "bootstrap/dist/css/bootstrap.css";
    import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
    import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
    import 'react-bootstrap-table2-paginator/dist/react-bootstrap-table2-paginator.min.css';
    import BootstrapTable from "react-bootstrap-table-next";
    import paginationFactory from 'react-bootstrap-table2-paginator';
    import Select from 'react-select';
    import cellEditFactory from 'react-bootstrap-table2-editor';
    `
    import "react-datepicker/dist/react-datepicker.css";
    import DatePicker from "react-datepicker";
  
    import moment from 'moment';
    
    
       
    class App extends React.Component {
      constructor(props, context){
        super(props);  
        this.state={columns : [],schemaData: [] ,fromDate:null,endDate: null,
    submittedValue:[],columnsList: [],schemaDataOriginal: [] ,selectedOption: null,selectedOptionNext: null, options: [{ value: null, label: 'Select...' }] , optionsNext: [{ value: null, label: 'Select...' }] ,
                colStyle : {
          backgroundColor: '#5F9EA0',
          width: '200px',
          fontSize: '13px'
        },
        paginationOption :{
      custom: true,
      marginLeft: '35px'
    }
        };  
       
      
      this.state.selectStyles = {
      menuList: styles => ({
        ...styles,
        background: 'white',
      }),
      option: (styles, { isFocused, isSelected }) => ({
        ...styles,
        background: isFocused
          ? '#5F9EA0'
          : isSelected
            ? '#5F9EA0'
            : undefined,
        zIndex: 1,
      }),
      menu: base => ({
        ...base,
        zIndex: 100,
      }),
    }
    
    
    }

// first function starts here

    fetchEdSource(tableNameFirst){
      var paramKey = {};
      paramKey['tableNameFirst']= tableNameFirst;
      
      axios.get("/apiEdSource",{responseType: 'json',params: paramKey}).then((res)=>{
      this.setState({schemaDataOriginal: res.data});
      this.state.schemaData= this.state.schemaDataOriginal;
       var sb = [];
       var ot = [];
      var otn = [];
        this.state.columnsList = Object.keys(this.state.schemaDataOriginal[0]);
        Object.keys(this.state.schemaDataOriginal[0]).map((key) =>{   
        sb.push({dataField: key,text: key, sort : true, headerStyle: this.state.colStyle});
       })
          this.state.columns = sb;
         this.state.schemaDataOriginal.map((arrayData) =>{   
        ot.push({value: arrayData["SOURCE_SYSTEM"]
    , label: arrayData["SOURCE_SYSTEM"]
    })
    })
      
        
    
        this.state.schemaDataOriginal.map((arrayData) =>{   
          otn.push({value: arrayData["TABLE_NAME"]
    , label: arrayData["TABLE_NAME"]
    });
      
        
    
    
       })
    
    
        const filtered = ot.filter(function({value, label}) {
    
      const key =`${value}${label}`;
    
      return !this.has(key) && this.add(key);
    
    }, new Set);
         console.log(this.state.options);
         for(var i=0;i<filtered.length;i++){
         this.state.options.push(filtered[i]);
       }
    
    
    
     const filteredotn = otn.filter(function({value, label}) {
    
      const key =`${value}${label}`;
    
      return !this.has(key) && this.add(key);
    
    }, new Set);
    console.log(this.state.optionsNext);
    
    for(var i=0;i<filteredotn.length;i++){
    this.state.optionsNext.push(filteredotn[i]);
    }
    
    
    
    // // this.state.schemaData.map((arrayData)
    
    
    
         
    }).catch(e=>{
    console.log(e)
    });
    
    }
    
    
    updateSelectList(selectedOption){
      
     var otn = [];
     this.state.optionsNext = [];
    
        this.state.schemaDataOriginal.map((arrayData) =>{  
    
    
        if(selectedOption!==null && selectedOption["label"]==arrayData["SOURCE_SYSTEM"]) { 
          otn.push({value: arrayData["TABLE_NAME"]
    , label: arrayData["TABLE_NAME"]
    });
    }
        else if(selectedOption["label"] == "Select..."){
    
        otn.push({value: arrayData["TABLE_NAME"]
    , label: arrayData["TABLE_NAME"]
    
    } )
     }
    
     })
        
    
    for(var i=0;i<otn.length;i++){
    this.state.optionsNext.push(otn[i]);
    }
    this.state.optionsNext.push({ value: null, label: 'Select...' });
    
    const filteredotn = this.state.optionsNext.filter(function({value, label}) {
    
      const key =`${value}${label}`;
    
      return !this.has(key) && this.add(key);
    
    }, new Set);
    
      this.state.optionsNext = filteredotn;
      
    
    }
      
    
    
    updateTableList(selectedOption, selectedOptionNext){
    var tempSchemaData = [];
    this.state.schemaDataOriginal.map((arrayData) =>{   
      if(selectedOption!==null || this.state.selectedOptionNext!== null){
        
     
          if(this.state.selectedOptionNext==null){
    
                       if(selectedOption["label"]==arrayData["SOURCE_SYSTEM"]){
                      tempSchemaData.push(arrayData);
                             }
                      else if (selectedOption["label"]=="Select..."){
                        this.state.schemaData=this.state.schemaDataOriginal;
    
                      }
          }
    
          else if(this.state.selectedOptionNext!==null && (selectedOption["label"]==arrayData["SOURCE_SYSTEM"]&&this.state.selectedOptionNext["label"]==arrayData["TABLE_NAME"])){
          tempSchemaData.push(arrayData);
          }
          else if(selectedOption["label"]=="Select..."){
                        this.state.schemaData=this.state.schemaDataOriginal;
    
                      }
    
      }
      if(selectedOption["label"]!=="Select..."){
      this.state.schemaData=tempSchemaData  ;
    }
    })
    
      }
    
    handleChange = (selectedOption) => {
        this.setState({ selectedOption }, () =>
          console.log(`Option selected:`, this.state.selectedOption)
    
        )
        this.state.selectedOption=selectedOption;
    this.updateSelectList(selectedOption);
    this.updateTableList(this.state.selectedOption,this.state.selectedOptionNext);
    
      };
    
    handleChangeNext = (selectedOptionNext) => {
        this.setState({ selectedOptionNext }, () =>
          console.log(`Option selected:`, this.state.selectedOptionNext)
        );
        this.state.selectedOptionNext=selectedOptionNext;
        this.updateTableList(this.state.selectedOption,this.state.selectedOptionNext);
      };
    
    submitCell=()=>{
      var paramKey = {};

    if(this.state.submittedValue.length!==0){
    var params = new URLSearchParams();

    
    const encodedFilters = encodeURIComponent(JSON.stringify(this.state.submittedValue));
    console.log(encodedFilters.toString);
  
     let config = {
      headers: {
         'Content-Type': 'application/x-www-form-urlencoded',
      } 
    } ;
    var url =`/apiEdSourceUpdate?filters=${encodedFilters}`;
    
     axios.post(url,params, config).then((res)=>{
         
    }).catch(e=>{
    console.log(e)
    });
    }
    this.state.submittedValue=[];
    }
    saveCell=(oldValue, newValue, fieldUpdated,TABLE_ID)=>{
     
    
    this.state.submittedValue.push({"oldValue": oldValue,"newValue":newValue,"fieldUpdated":fieldUpdated,"TABLE_ID":TABLE_ID});
    
    }
    
  
    handleFromDateChange(date) {
        this.setState({
          fromDate: date
        });
      }
        handleEndDateChange(date){
          this.setState({
          endDate: date
        });
       
      }

    
//here is the render function

    
     render()
     {
      const { selectedOption } = this.state;
      const {selectedOptionNext} = this.state;
    const {selectedDate}   = this.state;
      
    
    
      return (
        <div className="App">   
        {this.state.columns.length !==0 ? <div>
          <Select
          className="react-select"
            value={selectedOption}
            onChange={this.handleChange}
            options={this.state.options}
            styles={this.state.selectStyles}
            
          />
          <Select
          className="react-selectNext"
            value={selectedOptionNext}
            onChange={this.handleChangeNext}
            options={this.state.optionsNext}
            styles={this.state.selectStyles}
    
          />
          
          <DatePicker className="date-picker-from" selected={this.state.fromDate} onChange={(date) => this.handleFromDateChange(date)} placeholderText="From Load Date"/>
          <DatePicker className="date-picker-end" selected={this.state.endDate} onChange={(date) => this.handleEndDateChange(date)} placeholderText="End Load Date"/>
    
          <button className="label" onClick={()=>{this.submitCell(this.state)}}>SUBMIT</button>
          <BootstrapTable  className="react-bootstrap" boostrap4 keyField='TABLE_ID' data={ this.state.schemaData } columns={ this.state.columns } pagination={paginationFactory()} 
          cellEdit={cellEditFactory({ mode: 'click', blurToSave: false ,autoSelectText: false,
            afterSaveCell: (oldValue, newValue,row, column) =>{
              this.saveCell(oldValue, newValue,row, column)
            }
      })}/></div>:<div>    <ul class="notes">     
              <li onClick={() => {this.fetchEdSource('[ODIN_WORK.[dbo].[ed_source_table]')}}><a  href="#1a" id="notes-list" data-toggle="tab">ED Source Table</a></li>
        </ul>
        </div>}
        </div>
        
      );
    }
    }
    
    
    export default App;

how to disable specific columns from editing cellEditFactory from ‘react-bootstrap-table2-editor. Is there a pre-built method to do it.

Above is the code that uses react-bootstrap, react-search, react-date-picker.
Along with that there are couple of user-defined functions.

Please let me know if anything more is needed here to understand the code.

I am new to Python and Flask and am trying to write a cootie catcher program. I’ve looked at a few tutorials and am testing what the google AI gave me until I can understand what’s happening. Whenever I hit the submit button in my form, I get the following error:

Unsupported Media Type
Did not attempt to load JSON data because the request Content-Type was not ‘application/json’.

Here is my html file:

<!DOCTYPE html>
<html>
    <head>
        <title>Fortune Teller</title>
    </head>
    <body>

        <h1>Fortune Teller</h1>

        <div class="form">
            <form method="POST" action="/fortune">
                <input type="text" name="user">
                <select name="color">
                    <!-- onclick listens for click event and informs button function -->
                    <option onclick="getFortune('color', 'red')">red</option>
                    <option onclick="getFortune('color', 'yellow')">yellow</option>
                    <option onclick="getFortune('color', 'blue')">blue</option>
                    <option onclick="getFortune('color', 'green')">green</option>
                </select>
                <select name="number">
                    <option onclick="getFortune('number', '1')">1</option>
                    <option onclick="getFortune('number', '2')">2</option>
                    <option onclick="getFortune('number', '3')">3</option>
                    <option onclick="getFortune('number', '4')">4</option>
                </select>
                <button >submit</button>
            </form>
        </div>

        <div id="fortune"> 
            <!-- A Fortune Will Appear Here -->
        </div>

        <!-- grabs form data, uses it to return a fortune message to specified area of webpage-->
        <script>
            function getFortune(choiceType, choice) {
                // connects getFortune js function to get_function python method
                fetch('/fortune', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({choiceType: choiceType, choice: choice}),
                })
                // format response
                .then(response => response.json())
                // return response to window
                .then(data => {
                    document.getElementById('fortune').textContent = data.fortune;
                });
            }
        </script>

    </body>
</html>

and here is my Python File:

    from flask import Flask, render_template, request, jsonify
import random

app = Flask(__name__)

fortunes = {
    "colors": {
        "red": ["RA", "RB"],
        "yellow": ["YA", "YB"],
        "blue": ["BA", "BB"],
        "green": ["GA", "GB"],
    },
    "numbers": {
        "1": ["1A", "1B"],
        "2": ["2A", "2B"],
        "3": ["3A", "3B"],
        "4": ["4A", "4B"],
    }
}

@app.route('/')
def default():
    return render_template('fortune.html')

@app.route('/fortune',methods = ['GET', 'POST'])
def get_fortune():
    data = request.get_json()
    choice_type = data['choiceType']
    choice = data['choice']

    if choice_type == 'number':
        fortune_list = fortunes['numbers'].get(choice, ["Try again"])
    elif choice_type == 'color':
        fortune_list = fortunes['colors'].get(choice, ["Try again"])
    else:
        fortune_list = "Invalid choice."
    
    fortune = random.choice(fortune_list)
    return jsonify({'fortune': fortune})      


if __name__ == '__main__':
    app.run(debug = True) 

If anyone can break down what the hang up is, I’d really appreciate it. Appreciate your time.

I am looking for a way to trim a Base64 audio string based on starting and ending positions (ms).

I need to be able to trim the audio based on 3 inputs:

• Base64 audio string
• starting position (ms)
• ending position (ms)

I don’t need to be able to play the audio in the browser, just perform the trim operation.

I found some posts online which show how to load an audio file, via fetch(...), into an AudioContext but I need to be able to do it via a Base64 audio string.

I’m running into an issue where when I call audioContext.decodeAudioData(...), passing into the array buffer, it fails with error:

The buffer passed to decodeAudioData contains an unknown content type.

Code Sample

Here is the code that I have so far.
This won’t be the final form of the code, this is just a POC.

I have 2 functions base64ToAudioBuffer1(...) and base64ToAudioBuffer2(...) which attempt to build the AudioBuffer in 2 different ways, but they both fail the same way 🙁

<!DOCTYPE html>
<html>
    <head>
        <title>Audio Trimmer</title>
        
        <style>
            body,
            .inputsContainer,
            .inputField
            {
                display: flex;
                flex-direction: column;
                gap: 1rem;
            }
            
            .inputField
            {
                gap: 0.25rem;
            }
            
            .inputField > div
            {
                font-weight: bold;
            }
            
            textarea
            {
                --size-rowCount: 6;
                --size-padding-vertical: 0.75em;
                
                min-width: 100%;
                max-width: 100%;
                min-height: calc((1em * var(--size-rowCount)) + var(--size-padding-vertical));
            }
        </style>
    </head>
    <body>
        <div
            class="inputsContainer"
        >
            <div
                class="inputField"
            >
                <div>Audio Base64:</div>
                <textarea
                    id="audioInputBase64"
                    rows="6"
                ></textarea>
            </div>
            
            <div
                class="inputField"
            >
                <div>Start Time (ms):</div>
                <input
                    type="text"
                    id="startTimeMs"
                    value="0"
                >
            </div>
            
            <div
                class="inputField"
            >
                <div>End Time (ms):</div>
                <input
                    type="text"
                    id="endTimeMs"
                    value="5000"
                >
            </div>
        </div>
        
        <button
            id="trimButton"
        >
            Trim Audio
        </button>
        
        <textarea
            id="audioOutputBase64"
            rows="6"
        ></textarea>

        <script>
            /**
             * This function builds an instance of an AudioContext.
             * 
             * @returns
             * The AudioContext.
             * 
             * @throws
             * - If no AudioContext is available.
             */
            const buildAudioContext = () => {
                if (window.AudioContext)
                {
                    return new window.AudioContext();
                }
                
                if (window.webkitAudioContext)
                {
                    return new window.webkitAudioContext();
                }
                
                throw new Error('AudioContext is not available.');
            };
            
            /**
             * This function will parse the specified input time.
             * 
             * @param time
             * The time value to be parsed.
             * @param minAllowedTime
             * The minimum allowed time value.
             * @param timeType
             * The type of time being parsed.
             * 
             * This is just used for logging/error-throwing.
             * 
             * @returns
             * The parsed time.
             * 
             * @throws
             * - If specified time is not a number, and cannot be parsed as an integer.
             * - If specified time is less-than the specified minimum allowed value.
             */
            const parseInputTime = (
                time,
                minAllowedTime,
                timeType
            ) => {
                let _time = time;
                
                if (typeof _time !== 'number')
                {
                    _time = parseInt(_time);
                }
                
                if (
                    (typeof _time !== 'number')
                        ||
                    isNaN(_time)
                        ||
                    (_time < minAllowedTime)
                )
                {
                    throw new Error('Invalid ' + timeType + ' time: "' + time + '"');
                }
                
                return _time;
            };
            
            /**
             * This function converts the specified Base64 string to a Blob.
             * 
             * @param base64
             * The Base64 string.
             * @param contentType
             * The content type.
             * 
             * Default: ""
             * @param sliceSize
             * The size of each slice.
             * 
             * Default: 512
             * 
             * @returns
             * The Blob.
             */
            const base64ToBlob = (
                base64,
                contentType = '',
                sliceSize = 512
            ) => {
                const byteCharacters = atob(base64);
                const byteArrays = [];
                
                let tmpSlice;
                
                for (let offset = 0; offset < byteCharacters.length; offset += sliceSize)
                {
                    tmpSlice = byteCharacters.slice(offset, offset + sliceSize);
                    
                    const byteNumbers = new Array(tmpSlice.length);
                    
                    for (let i = 0; i < tmpSlice.length; i++)
                    {
                        byteNumbers[i] = tmpSlice.charCodeAt(i);
                    }
                    
                    const byteArray = new Uint8Array(byteNumbers);
                    
                    byteArrays.push(byteArray);
                }
                
                return new Blob(
                    byteArrays,
                    {
                        type: contentType,
                    }
                );
            };
            
            /**
             * This function converts the specified Base64 string to an
             * AudioBuffer.
             * 
             * @param base64
             * The Base64 string.
             * 
             * @returns
             * The AudioBuffer.
             * 
             * @throws
             * - If loading of the Base64 audio data fails.
             * - If decoding of the audio data fails.
             * - If converting of the Base64 audio data to an AudioBuffer fails.
             */
            const base64ToAudioBuffer1 = async (
                base64
            ) => {
                return new Promise((
                    response,
                    reject
                ) => {
                    try
                    {
                        const fileReader = new FileReader();
                        
                        const handleEvent = async (
                            event
                        ) => {
                            try
                            {
                                if (event.type !== 'load')
                                {
                                    reject(new Error(
                                        'Failed to load Base64 audio data.nt - ' + error.message,
                                        error
                                    ));
                                    
                                    return;
                                }
                                
                                const arrayBuffer = fileReader.result;
                                
                                const audioContext = buildAudioContext();
                                const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
                                
                                response(audioBuffer)
                            }
                            catch (error)
                            {
                                reject(new Error(
                                    'Failed to decode audio data.nt - ' + error.message,
                                    error
                                ));
                            }
                        };
                        
                        fileReader.addEventListener('load', handleEvent);
                        fileReader.addEventListener('error', handleEvent);
                        
                        // Load the Base64 audio string via a Blob.
                        fileReader.readAsArrayBuffer(base64ToBlob(
                            base64,
                            'audio/x-matroska'
                        ));
                    }
                    catch (error)
                    {
                        reject(new Error(
                            'Failed to convert Base64 to AudioBuffer.nt - ' + error.message,
                            error
                        ));
                    }
                });
            };
            
            /**
             * This function coverts the specified Base64 string to an
             * AudioBuffer.
             * 
             * @param base64
             * The Base64 string.
             * 
             * @returns
             * The AudioBuffer.
             * 
             * @throws
             * - If decoding of the audio data fails.
             */
            const base64ToAudioBuffer2 = async (
                base64
            ) => {
                try
                {
                    let binary = window.atob(base64);
                    let buffer = new ArrayBuffer(binary.length);
                    let bytes = new Uint8Array(buffer);
                    
                    for (let i = 0; i < buffer.byteLength; i++)
                    {
                        bytes[i] = binary.charCodeAt(i) & 0xFF;
                    }
                    
                    const audioContext = buildAudioContext();
                    return await audioContext.decodeAudioData(buffer);
                }
                catch (error)
                {
                    throw new Error(
                        'Failed to decode audio data.nt - ' + error.message,
                        error
                    );
                }
            };
            
            /**
             * This function converts the specified buffer to a Base64 string.
             * 
             * @param buffer
             * The buffer.
             * 
             * @returns
             * The Base64 string.
             */
            const bufferToBase64 = (
                buffer
            ) => {
                let bytes = new Uint8Array(buffer);
                let len = buffer.byteLength;
                let binary = "";
                
                for (let i = 0; i < len; i++)
                {
                    binary += String.fromCharCode(bytes[i]);
                }
                
                return window.btoa(binary);
            };
            
            /**
             * This function will trim the specified AudioBuffer to the
             * specified start/end range and return the new AudioBuffer.
             * 
             * @param audioBuffer
             * The input AudioBuffer.
             * @param startTimeMs
             * The timestamp, of the input AudioBuffer, from which to start
             * trimming.
             * @param endTimeMs
             * The timestamp, of the input AudioBuffer, from which to end
             * trimming.
             * 
             * @returns
             * The trimmed AudioBuffer.
             * 
             * @returns
             * - If audio channels fail to be detected.
             * - If audio trimming fails.
             */
            const trimAudioBuffer = async (
                audioBuffer,
                startTimeMs,
                endTimeMs
            ) => {
                return new Promise((
                    response,
                    reject
                ) => {
                    try
                    {
                        const audioContext = buildAudioContext();
                        
                        const audioSource = audioContext.createBufferSource();
                        audioSource.buffer = audioBuffer;
                        
//                      const audioBuffer = audioContext.createBuffer(
//                          1,
//                          byteArray.length,
//                          44100
//                      );
                        
                        const sampleRate = audioSource.buffer.sampleRate || 44100;
                        const startFrame = (startTimeMs * sampleRate) / 1000;
                        const endFrame = (endTimeMs * sampleRate) / 1000;
                        let channelCount = audioSource.buffer.numberOfChannels || 0;
                        
                        if (channelCount <= 0)
                        {
                            channelCount = 0;
                            let tmpChannelData;

                            while (true)
                            {
                                try
                                {
                                    tmpChannelData = audioSource.buffer.getChannelData(channelCount);
                                    
                                    if (!tmpChannelData)
                                    {
                                        break;
                                    }
                                    
                                    channelCount++;
                                }
                                catch (error)
                                {
                                    break;
                                }
                            }
                            
                            if (channelCount <= 0)
                            {
                                throw new Error('Failed to detect channels.');
                            }
                        }
                        
                        // Create a new AudioBuffer for the trimmed audio
                        const trimmedBuffer = audioSource.createBuffer(
                            channelCount,
                            (endFrame - startFrame),
                            sampleRate
                        );
                        
                        let tmpSourceData;

                        for (let channelIndex=0; channelIndex<channelCount; channelIndex++)
                        {
                            tmpSourceData = audioSource.buffer.getChannelData(channelIndex).subarray(startFrame, endFrame);
                            trimmedBuffer.getChannelData(channelIndex).set(tmpSourceData);
                        }

                        response(trimmedBuffer);
                    }
                    catch (error)
                    {
                        reject(new Error(
                            'Failed to trim audio.nt - ' + error.message,
                            error
                        ));
                    }
                });
            };
            
            /**
             * This function will trim the specified Base64 audio string to the
             * specified start/end range and return the new Base64 audio
             * string.
             * 
             * @param base64Input
             * The input Base64.
             * @param startTimeMs
             * The timestamp, of the input AudioBuffer, from which to start
             * trimming.
             * @param endTimeMs
             * The timestamp, of the input AudioBuffer, from which to end
             * trimming.
             * 
             * @returns
             * The trimmed Base64 audio string.
             * 
             * @returns
             * - If the Base64 audio string is invalid.
             * - If specified start-time is not a number, and cannot be parsed as an integer.
             * - If specified start-time is less-than 0.
             * - If specified end-time is not a number, and cannot be parsed as an integer.
             * - If specified end-time is less-than the specified start-time.
             * - If trimming the audio fails.
             */
            const trimBase64Audio = async (
                base64Input,
                startTimeMs,
                endTimeMs
            ) => {
                if (
                    (typeof base64Input !== 'string')
                        ||
                    (base64Input.trim().length <= 0)
                )
                {
                    throw new Error('Invalid Base64 audio string: "' + base64Input + '"');
                }
                
                const _startTimeMs = parseInputTime(
                    startTimeMs,
                    0,
                    'starting'
                );
                const _endTimeMs = parseInputTime(
                    endTimeMs,
                    _startTimeMs + 1,
                    'ending'
                );
                
                try
                {
                    const audioContext = buildAudioContext();
                    
                    const audioBuffer = await base64ToAudioBuffer1(base64Input);
//                  const audioBuffer = await base64ToAudioBuffer2(base64Input);

                    // Trim the audio buffer
                    const trimmedBuffer = await trimAudioBuffer(
                        audioBuffer,
                        _startTimeMs,
                        _endTimeMs
                    );
                    
                    return bufferToBase64(trimmedBuffer);
                }
                catch (error)
                {
                    throw new Error(
                        'Error trimming audio.nt - ' + error.message,
                        error
                    );
                }
            };
            
            /**
             * This function will load the values from the inputs and then trim
             * the audio.
             */
            const trimAudioFromInputs = async () => {
                const audioInputBase64Input = document.getElementById('audioInputBase64');
                const startTimeMsInput = document.getElementById('startTimeMs');
                const endTimeMsInput = document.getElementById('endTimeMs');
                
                console.log('      Audio Base64: "' + audioInputBase64Input.value.substring(0, 25) + '..."');
                console.log('Starting Time (ms): "' + startTimeMsInput.value + '"');
                console.log('  Ending Time (ms): "' + endTimeMsInput.value + '"');

                try
                {
                    // Trim the audio buffer
                    const trimmedBase64Audio = await trimBase64Audio(
                        audioInputBase64Input.value,
                        startTimeMsInput.value,
                        endTimeMsInput.value
                    );
                    
                    const audioOutputBase64Input = document.getElementById('audioOutputBase64');
                    audioOutputBase64Input.value = trimmedBase64Audio;
                }
                catch (error)
                {
                    console.error('Error trimming Base64 audio string.', error);
                }
            };
            
            window.onload = () => {
                document.getElementById('trimButton').addEventListener('click', trimAudioFromInputs);
            };
        </script>
    </body>
</html>

I’m using Angular 19 and my version of node is 18.2. I’ve got an existing module project and have added a stand alone component. The issue I’m having is that the component does render and the constructor, ngOnInit, and ngAfterViewInit do not fire. The stand alone component also does not appear in the browser dev tools. Any idea what could be causing angular to not render this component?

Component:
import { Component, OnInit} from ‘@angular/core’;

@Component({
  selector: 'app-lu-map2',
  standalone: true,
  imports: [],
  templateUrl: './lu-map2.component.html',
  styleUrl: './lu-map2.component.css',

})
export class LuMap2Component implements OnInit{
  constructor(){
    console.log("Constructor Fired");
  }

  ngOnInit() {
   console.log("message from lu-map2: OnInit Fired")
  }
  ngAfterViewInit() {
    console.log("message from lu-map2: ngAfterViewInit Fired")
   }

}

Component template:

<p>lu-map2 works!</p>

app.component template

<app-lu-map2></app-lu-map2>

if I swap out the standalone component with a non-standalone component it renders fine.
Also see the attached screen shot that shows the component in the project, but the component is not is not listed in edge dev tools sources. (Doesnt appear in chrome or firefox either)

I want to create a paginated canvas view rendered in my html. The most important thing to consider is that the div element passed to be converted needs to be a4 size and the content inside it should be scaled (zoomed) accordingly with proper ratio.
For reference check out https://www.resume.io preview of resumes, its paginated and breaks the content properly with the correct ratio.
Suggest me any repo or library that can be used to achieve this.
I have tried using html2canvas, jspdf, pagedjs etc.

I am trying to create a pattern inside a generated circle.

function draw(x,y,radius,col) {
     
      for(let j = 0; j<radius; j++) {
      for(let i =0; i<360; i+=1) {

      let angle = Math.PI / 180 * i;
      let cos = x + Math.cos(angle) * j;
      let sin = y + Math.sin(angle) * j;
      ctx.strokeStyle = col;
      ctx.beginPath();  
      ctx.moveTo(cos, sin);
      ctx.lineTo(cos + 1, sin + 1);
      ctx.stroke();
      }
    }
  }

The output of this can be seen in the image below:

:

I want to draw a pattern inside this circle, for instance:

I don’t want to create another layer using HTMLs own method. How can I achieve this result from the code above?

I’m using bootstrap to copy the design of a website and it is right to left, its header is divided into two columns, the first column is a col-1 and has the logo in it. The second column is divided into two rows, when scrolled the top row sticks and the bottom row disappears.

I use the header tag and it gets the sticky position but its children don’t. they are in a div with class “row” I tried coding AIs and their solutions didn’t work for me. Does anybody have any idea how can I implement it? I also did a little research about why sticky position doesn’t work and tried everything on the internet, still didn’t find a solution
Here’s the source code:

`

`

I have this CSS

body {
  font-size: large;
}

@media (max-width: 33em) {
  .not_used_on_narrow_displays {
    display: none;
  }
}

which works as expected, setting all elements to the “large” font size and then removing the elements targeted by the media query from the display when the window is narrow. However, when I then run this javascript:

document.body.style.fontSize = 'x-large';

all the elements get bigger as expected, and I also expect the media query to match when the display is a bit wider than before, but it doesn’t. The elements targeted by the media query still appear or disappear at the same display width as when the body font size was ‘large’.

At https://jsfiddle.net/MattMiller/Lxy3azpe/10/ you can see that the targeted element comes and goes at the same window width regardless of the font size.

How can I get this media query to respect this font size change?

Hey I recently encoountered this error. My old next.js projects work but newly created ones all have this error. I tried cleaning cache with npm rebuilding, npm installing the missing package, downloading the windows redist exe and using different node versions.
I tried all the fixes other users have provided but the issue wont go away. Im using Windows 11 64x. Heres the full error log:

⚠ Port 3000 is in use, using available port 3001 instead.
   ▲ Next.js 15.3.1
   - Local:        http://localhost:3001
   - Network:      http://192.168.116.1:3001

 ✓ Starting...
 ✓ Ready in 1392ms
 ○ Compiling /_not-found ...
 ⨯ srcapplayout.js
An error occurred in `next/font`.

Error: Cannot find module '../lightningcss.win32-x64-msvc.node'
Require stack:
- C:UsersozansWebstormProjectsimageocrnode_moduleslightningcssnodeindex.js
- C:UsersozansWebstormProjectsimageocrnode_modules@tailwindcssnodedistindex.js
- C:UsersozansWebstormProjectsimageocrnode_modules@tailwindcsspostcssdistindex.js
- C:UsersozansWebstormProjectsimageocrnode_modulesnextdistbuildwebpackconfigblockscssplugins.js
- C:UsersozansWebstormProjectsimageocrnode_modulesnextdistbuildwebpackconfigblockscssindex.js
- C:UsersozansWebstormProjectsimageocrnode_modulesnextdistbuildwebpackconfigindex.js
- C:UsersozansWebstormProjectsimageocrnode_modulesnextdistbuildwebpack-config.js
- C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverdevhot-reloader-webpack.js
- C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverlibrouter-utilssetup-dev-bundler.js
- C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverlibrouter-server.js
- C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverlibstart-server.js
    at Function.<anonymous> (node:internal/modules/cjs/loader:1225:15)
    at C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverrequire-hook.js:55:36
    at Function._load (node:internal/modules/cjs/loader:1055:27)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.<anonymous> (node:internal/modules/cjs/loader:1311:12)
    at mod.require (C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverrequire-hook.js:65:28)
    at require (node:internal/modules/helpers:136:16)
    at Object.<anonymous> (C:UsersozansWebstormProjectsimageocrnode_moduleslightningcssnodeindex.js:22:22)
    at Module._compile (node:internal/modules/cjs/loader:1554:14)
    at Object..js (node:internal/modules/cjs/loader:1706:10)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.<anonymous> (node:internal/modules/cjs/loader:1311:12)
    at mod.require (C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverrequire-hook.js:65:28)
    at require (node:internal/modules/helpers:136:16)
    at Object.<anonymous> (C:UsersozansWebstormProjectsimageocrnode_modules@tailwindcssnodedistindex.js:17:149)
    at Module._compile (node:internal/modules/cjs/loader:1554:14)
    at Object..js (node:internal/modules/cjs/loader:1706:10)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.<anonymous> (node:internal/modules/cjs/loader:1311:12)
    at mod.require (C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverrequire-hook.js:65:28)
    at require (node:internal/modules/helpers:136:16)
    at Object.<anonymous> (C:UsersozansWebstormProjectsimageocrnode_modules@tailwindcsspostcssdistindex.js:1:1328)
    at Module._compile (node:internal/modules/cjs/loader:1554:14)
    at Object..js (node:internal/modules/cjs/loader:1706:10)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.<anonymous> (node:internal/modules/cjs/loader:1311:12)
    at mod.require (C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverrequire-hook.js:65:28)
    at require (node:internal/modules/helpers:136:16)
    at C:UsersozansWebstormProjectsimageocrnode_modulesnextdistbuildwebpackconfigblockscssplugins.js:61:44
    at plugin (C:UsersozansWebstormProjectsimageocrnode_modulesnextdistbuildwebpackconfigblockscssplugins.js:30:44)
    at Processor.normalize (C:UsersozansWebstormProjectsimageocrnode_modulesnextnode_modulespostcsslibprocessor.js:18:13)
    at new Processor (C:UsersozansWebstormProjectsimageocrnode_modulesnextnode_modulespostcsslibprocessor.js:11:25)
    at postcss (C:UsersozansWebstormProjectsimageocrnode_modulesnextnode_modulespostcsslibpostcss.js:26:10)
    at C:UsersozansWebstormProjectsimageocrnode_modulesnextdistbuildwebpackconfigblockscssindex.js:128:37
 ⨯ srcapplayout.js
An error occurred in `next/font`.

Error: Cannot find module '../lightningcss.win32-x64-msvc.node'
Require stack:
- C:UsersozansWebstormProjectsimageocrnode_moduleslightningcssnodeindex.js
- C:UsersozansWebstormProjectsimageocrnode_modules@tailwindcssnodedistindex.js
- C:UsersozansWebstormProjectsimageocrnode_modules@tailwindcsspostcssdistindex.js
- C:UsersozansWebstormProjectsimageocrnode_modulesnextdistbuildwebpackconfigblockscssplugins.js
- C:UsersozansWebstormProjectsimageocrnode_modulesnextdistbuildwebpackconfigblockscssindex.js
- C:UsersozansWebstormProjectsimageocrnode_modulesnextdistbuildwebpackconfigindex.js
- C:UsersozansWebstormProjectsimageocrnode_modulesnextdistbuildwebpack-config.js
- C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverdevhot-reloader-webpack.js
- C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverlibrouter-utilssetup-dev-bundler.js
- C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverlibrouter-server.js
- C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverlibstart-server.js
    at Function.<anonymous> (node:internal/modules/cjs/loader:1225:15)
    at C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverrequire-hook.js:55:36
    at Function._load (node:internal/modules/cjs/loader:1055:27)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.<anonymous> (node:internal/modules/cjs/loader:1311:12)
    at mod.require (C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverrequire-hook.js:65:28)
    at require (node:internal/modules/helpers:136:16)
    at Object.<anonymous> (C:UsersozansWebstormProjectsimageocrnode_moduleslightningcssnodeindex.js:22:22)
    at Module._compile (node:internal/modules/cjs/loader:1554:14)
    at Object..js (node:internal/modules/cjs/loader:1706:10)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.<anonymous> (node:internal/modules/cjs/loader:1311:12)
    at mod.require (C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverrequire-hook.js:65:28)
    at require (node:internal/modules/helpers:136:16)
    at Object.<anonymous> (C:UsersozansWebstormProjectsimageocrnode_modules@tailwindcssnodedistindex.js:17:149)
    at Module._compile (node:internal/modules/cjs/loader:1554:14)
    at Object..js (node:internal/modules/cjs/loader:1706:10)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.<anonymous> (node:internal/modules/cjs/loader:1311:12)
    at mod.require (C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverrequire-hook.js:65:28)
    at require (node:internal/modules/helpers:136:16)
    at Object.<anonymous> (C:UsersozansWebstormProjectsimageocrnode_modules@tailwindcsspostcssdistindex.js:1:1328)
    at Module._compile (node:internal/modules/cjs/loader:1554:14)
    at Object..js (node:internal/modules/cjs/loader:1706:10)
    at Module.load (node:internal/modules/cjs/loader:1289:32)
    at Function._load (node:internal/modules/cjs/loader:1108:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:220:24)
    at Module.<anonymous> (node:internal/modules/cjs/loader:1311:12)
    at mod.require (C:UsersozansWebstormProjectsimageocrnode_modulesnextdistserverrequire-hook.js:65:28)
    at require (node:internal/modules/helpers:136:16)
    at C:UsersozansWebstormProjectsimageocrnode_modulesnextdistbuildwebpackconfigblockscssplugins.js:61:44
    at plugin (C:UsersozansWebstormProjectsimageocrnode_modulesnextdistbuildwebpackconfigblockscssplugins.js:30:44)
    at Processor.normalize (C:UsersozansWebstormProjectsimageocrnode_modulesnextnode_modulespostcsslibprocessor.js:18:13)
    at new Processor (C:UsersozansWebstormProjectsimageocrnode_modulesnextnode_modulespostcsslibprocessor.js:11:25)
    at postcss (C:UsersozansWebstormProjectsimageocrnode_modulesnextnode_modulespostcsslibpostcss.js:26:10)
    at C:UsersozansWebstormProjectsimageocrnode_modulesnextdistbuildwebpackconfigblockscssindex.js:128:37
 GET /_next/static/webpack/ad7e79c531086f8b.webpack.hot-update.json 500 in 5137ms
 GET / 500 in 3470ms
 ⚠ Fast Refresh had to perform a full reload due to a runtime error.
<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: ENOENT: no such file or directory, rename 'C:UsersozansWebstormProjectsimageocr.nextcachewebpackclient-development-fallback1.pack.gz_' -> 'C:UsersozansWebstormProjectsimageocr.nextcachewebpackclient-development-fallback1.pack.gz'