Category: javascript

I’m utilizing the latest cloud-hosted TinyMCE 7 editor.

My goal is to insert my own HTML into the editor and have the ability to modify all aspects, including the , , and tags.

I’ve experimented with various configurations, such as the one below, but TinyMCE consistently removes the , , and tags:

tinymce.init({
      selector: '#mytextarea',
      plugins: 'advlist autolink lists link image charmap print preview hr anchor pagebreak code',
      toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image code',
      menubar: false,
      
      // Disable HTML sanitation
      valid_elements: '*[*]',
      extended_valid_elements: '*[*]',
      verify_html: false,
      allow_html_in_named_anchor: true,
      
      // Allow all content, including style and script tags
      custom_elements: '*',
      schema: 'html5',
      
      // Optional: Disable automatic removal of elements
      allow_script_urls: true,
      allow_conditional_comments: true,
      allow_html_fragment: true,
      
      // Paste settings (optional but recommended)
      paste_allow_cleanup: false,
      paste_remove_styles_if_webkit: false,
      paste_remove_spans: false,
    });

How can I prevent TinyMCE from stripping these tags?

P.S. I used tinymce 5 with fullpage plugin and it worked well. But this plugin was deprecated and now i am a bit stuck with it. Thanks for any help.

I’ve managed to write a JavaScript function that pastes text into the last selected control, no matter what control it is. I’ve also managed to make the function insert the text at the beginning of the selection if there is one. What I haven’t managed yet is to insert the text at the caret position if no text has been selected. This is what I’d like to ask you: how to do it.

Here’s my code:

const doPaste = async(text) => {
  const tmpStr = window.getSelection().anchorNode.innerHTML
  let idx = tmpStr.indexOf("value="") + 7
  idx += tmpStr.slice(idx).indexOf(window.getSelection().toString())
  text = text ?? await navigator.clipboard.readText()
  window.getSelection().anchorNode.innerHTML = tmpStr.slice(0, idx) + text + tmpStr.slice(idx)
}

Problem

I’m using a CanDeactivate guard in Angular to prompt the user before navigating away from a form with unsaved changes. It works fine for normal route changes (e.g., clicking a link), but it breaks when the user presses the browser back button.

Scenario

Let’s say my routing flow is:

/home → /user → /edit

• User is on /edit with unsaved changes.
• Presses the browser back button.
• A confirmation dialog is shown via CanDeactivate.
• If user cancels, the route stays the same (correct).
• But when they press back again and confirm, it navigates two steps back to /home, skipping /user.

What I Tried

I implemented a CanDeactivate guard like this:

export class YourFormComponent implements CanComponentDeactivate, OnInit, AfterViewInit {
    hasUnsavedChanges = false;

    // Implement the canDeactivate method
    canDeactivate(): Observable<boolean> | boolean {
      if (!this.hasUnsavedChanges) {
        return true;
      }

      const confirmLeave = window.confirm('You have unsaved changes. Leave anyway?');
      return confirmLeave;
    }
}

route.ts

import { Routes } from '@angular/router';
import { YourFormComponent } from './your-form.component';
import { ConfirmLeaveGuard } from './confirm-leave.guard';

const routes: Routes = [
  {
    path: 'form',
    component: YourFormComponent,
    canDeactivate: [ConfirmLeaveGuard]
  }
];

confrim-leave.guard.ts

import { inject } from '@angular/core';
import { CanDeactivateFn } from '@angular/router';
import { Observable } from 'rxjs';
import { Location } from '@angular/common';
export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

export const ConfirmLeaveGuard: CanDeactivateFn<CanComponentDeactivate> = (component: any, currentRoute, currentState, nextState) => {
  const location = inject(Location);
  const result = component.canDeactivate();

  // If it's a boolean value
  if (typeof result === 'boolean') {
    if (!result) {
      location.replaceState(window.location.pathname); // Restore URL
    }
    return result;
  }

  // If it's an Observable or Promise
  if (result instanceof Observable || result instanceof Promise) {
    return new Promise(resolve => {
      Promise.resolve(result).then(confirmed => {
        if (!confirmed) {
          location.replaceState(window.location.pathname); // Restore URL
        }
        resolve(confirmed);
      });
    });
  }

  return true;
};

I also tried using Location.replaceState() or Location.go() inside the guard to restore the history stack, but it still misbehaves when using the back button.

Question
How can I correctly handle the browser back button with CanDeactivate to prevent double navigation or skipped routes?

Any advice or examples would be appreciated.

Problem

I’m using a CanDeactivate guard in Angular to prompt the user before navigating away from a form with unsaved changes. It works fine for normal route changes (e.g., clicking a link), but it breaks when the user presses the browser back button.

Scenario

Let’s say my routing flow is:

/home → /user → /edit

• User is on /edit with unsaved changes.
• Presses the browser back button.
• A confirmation dialog is shown via CanDeactivate.
• If user cancels, the route stays the same (correct).
• But when they press back again and confirm, it navigates two steps back to /home, skipping /user.

What I Tried

I implemented a CanDeactivate guard like this:

export class YourFormComponent implements CanComponentDeactivate, OnInit, AfterViewInit {
    hasUnsavedChanges = false;

    // Implement the canDeactivate method
    canDeactivate(): Observable<boolean> | boolean {
      if (!this.hasUnsavedChanges) {
        return true;
      }

      const confirmLeave = window.confirm('You have unsaved changes. Leave anyway?');
      return confirmLeave;
    }
}

route.ts

import { Routes } from '@angular/router';
import { YourFormComponent } from './your-form.component';
import { ConfirmLeaveGuard } from './confirm-leave.guard';

const routes: Routes = [
  {
    path: 'form',
    component: YourFormComponent,
    canDeactivate: [ConfirmLeaveGuard]
  }
];

confrim-leave.guard.ts

import { inject } from '@angular/core';
import { CanDeactivateFn } from '@angular/router';
import { Observable } from 'rxjs';
import { Location } from '@angular/common';
export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

export const ConfirmLeaveGuard: CanDeactivateFn<CanComponentDeactivate> = (component: any, currentRoute, currentState, nextState) => {
  const location = inject(Location);
  const result = component.canDeactivate();

  // If it's a boolean value
  if (typeof result === 'boolean') {
    if (!result) {
      location.replaceState(window.location.pathname); // Restore URL
    }
    return result;
  }

  // If it's an Observable or Promise
  if (result instanceof Observable || result instanceof Promise) {
    return new Promise(resolve => {
      Promise.resolve(result).then(confirmed => {
        if (!confirmed) {
          location.replaceState(window.location.pathname); // Restore URL
        }
        resolve(confirmed);
      });
    });
  }

  return true;
};

I also tried using Location.replaceState() or Location.go() inside the guard to restore the history stack, but it still misbehaves when using the back button.

Question
How can I correctly handle the browser back button with CanDeactivate to prevent double navigation or skipped routes?

Any advice or examples would be appreciated.

I want to translate any webpage opened in WKWebView of my application using google translate. For this I have found this code. This code basically injects a JS in my webView which creates a div of Google translate in the opened page from where I can select language and the webpage is translated.
The problem is I dont want to use the Native Google translator UI to update the language of the webpage.

Also, I have looked into this answer
Adding Google Translate to a web site

Here is the code:

func translatePage(to languageCode: String) {
        // Add a container for Google Translate UI (ensuring no return value)
        let addTranslateElement = """
        (function() {
            if (!document.getElementById('google_translate_element')) {
                var translateDiv = document.createElement('div');
                translateDiv.id = 'google_translate_element';
                document.body.insertBefore(translateDiv, document.body.firstChild);
            }
        })();
        """
        
        // Add Google Translate script and initialize translation
        let jsCode = """
        (function() {
            if (!window.googleTranslateElementInit) {
                window.googleTranslateElementInit = function() {
                    new google.translate.TranslateElement({
                        pageLanguage: 'auto',
                        includedLanguages: '(languageCode)',
                        layout: google.translate.TranslateElement.InlineLayout.SIMPLE
                    }, 'google_translate_element');
                };
                
                var script = document.createElement('script');
                script.type = 'text/javascript';
                script.src = 'https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit';
                document.head.appendChild(script);
            } else {
                googleTranslateElementInit();
            }
        })();
        """
        
        // Execute JavaScript to add the translation element
        webView.evaluateJavaScript(addTranslateElement) { _, error in
            if let error = error {
                print("Error adding translate element: (error.localizedDescription)")
            } else {
                // Execute JavaScript to load and initialize Google Translate
                self.webView.evaluateJavaScript(jsCode) { _, error in
                    if let error = error {
                        print("Translation Error: (error.localizedDescription)")
                    } else {
                        print("Translation script executed successfully.")
                    }
                }
            }
        }
    }

This function takes in language code and translates the page.

What I want is to use this google translator without using its UI.
First thing I want to know, is this possible?
Secondly, How can I use my native UI (e.g UIAlertController) to select the language and upon language selection I can translate the page using this google translate module without showing the UI of google translator.

I have search all over the internet and in SO also, but couldn’t found my related issue. Below is my code:

index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { PersistGate } from "redux-persist/integration/react";
import { store, persistor } from "./app/store";
import App from "./root";
import "./styles/global.css";

import { setupStore } from './store'

const store = setupStore()

const reactRoot = ReactDOM.createRoot(
  document.getElementById('root')
) 
reactRoot.render(
  <React.StrictMode>
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Provider>
  </React.StrictMode>
);

root.jsx:

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router';
import { useSelector } from 'react-redux';
import {HomePage} from './pages/HomePage';
import LoginPage from './pages/LoginPage';
import ProfilePage from './pages/ProfilePage';
import {ProtectedRoute} from './components/common/ProtectedRoute';
import Header from './components/common/Header';
import Footer from './components/common/Footer';

function App() {
  const { darkMode } = useSelector((state) => state.theme);
  
  return (
    <div className={`min-h-screen flex flex-col`}>
      <Router>
        <Header />
        <main className="flex-1 w-full max-w-3xl mx-auto p-4">
          <Routes>
            <Route path="/login" element={<LoginPage />} />
            <Route 
              path="/" 
              element={
                <ProtectedRoute>
                  <HomePage />
                </ProtectedRoute>
              } 
            />
            <Route 
              path="/profile" 
              element={
                <ProtectedRoute>
                  <ProfilePage />
                </ProtectedRoute>
              } 
            />
            <Route path="*" element={<Navigate to="/" replace />} />
          </Routes>
        </main>
        <Footer />
      </Router>
    </div>
  );
}

export default App;

route.ts:

import { type RouteConfig, index } from "@react-router/dev/routes";

export default [index("routes/home.tsx")] satisfies RouteConfig;

store.ts:

const persistConfig = {
      key: 'root',
      storage,
      whitelist: ['auth', 'posts', 'theme'], // what to persist
    };
    
const rootReducer = combineReducers({
      auth: authReducer,
      posts: postsReducer,
      theme: themeReducer,
    });
    //reducer file
const persistedReducer = persistReducer(persistConfig, rootReducer);
    

//store exporting
export const store = configureStore({
reducer: persistedReducer,
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware({
serializableCheck: false, // needed for redux-persist
}),
});

export const persistor = persistStore(store);

I’m working with Plotly in JavaScript and came across an issue related to auto-scaling the Y-axis.

I managed to prevent the main Y-axis from rescaling by using Plotly.relayout, which works well. However, that brings me to another problem: now the Y-axis of the range slider is auto-scaling, and I can’t seem to fix it.

According to the documentation, it should be possible to set the Y-axis of the range slider to a fixed range — but it doesn’t seem to have any effect in my case.

Has anyone faced the same issue or maybe spotted something I might have missed in the code?

const x_h = JSON.parse(document.getElementById('x_h').textContent);
const y_h = JSON.parse(document.getElementById('y_h').textContent);
const x_l = JSON.parse(document.getElementById('x_l').textContent);
const y_l = JSON.parse(document.getElementById('y_l').textContent);
const y_laser_inverted = y_l.map(val => -val);

const y_h_min = Math.min(...y_h);
const y_h_max = Math.max(...y_h);


const data = [
    // Laser
    {
        x: x_l,
        y: y_laser_inverted,
        // type: 'scatter',
        mode: 'lines',
        line: { color: 'red', width: 3 },
        name: 'Laser',
        xaxis: 'x',
        yaxis: 'y'
    },
    // Hitran
    {
        x: x_h,
        y: y_h,
        // type: 'scatter',
        mode: 'lines',
        line: { color: 'yellow', width: 2 },
        name: 'Hitran',
        xaxis: 'x2',
        yaxis: 'y2'
    }
];

const layout = {
    grid: {
        rows: 2,
        columns: 1,
        subplots: [['xy'], ['x2y2']],
        roworder: 'top to bottom'
    },
    height: 900,
    plot_bgcolor: 'rgba(0,0,0,0)',
    paper_bgcolor: 'rgba(0,0,0,0.5)',
    font: { color: 'white', size: 14 },

    xaxis: { visible: false },
    yaxis: { title: 'Laser' },

    xaxis2: {
        title: 'Wellenlänge (Hitran)',
        rangeslider: {
            visible: true,
            yaxis: {
                range: [y_h_min, y_h_max],
                rangemode: 'fixed'
            }
        }
    },
    
    yaxis2: {
        title: 'Hitran',
    }
};


Plotly.newPlot('graph', data, layout);


function updateYRange(currentRange) {
    const x_start = currentRange[0];
    const x_end = currentRange[1];

    const y_values_in_range = y_h.filter((value, index) => x_h[index] >= x_start && x_h[index] <= x_end);

    const y_min = Math.min(...y_values_in_range);
    const y_max = Math.max(...y_values_in_range);
    console.log("Y-Achsenbereich aktualisiert: ", y_min, y_max);
    Plotly.relayout('graph', {
        'yaxis2.range': [y_min, y_max]
    });
}

graph.on('plotly_relayout', function(eventData) {
    if (eventData['xaxis2.range']) {
        updateYRange(eventData['xaxis2.range']);
    }
});

I am getting this error React error: browserRouter cannot be used as a JSX component. when trying to run something like the following:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
import BrowserRouter from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
    <BrowserRouter>
      <App />
    </BrowserRouter>
);

So, to explain the problem:

Let’s consider I have few strings

[“jack”, “apple”, “maven”, “hold”, “solid”, “mark”, “moon”, “poor”, “spark”, “live”]
The Resultant string should be something like:

“sjmachppoalidveonrk”
jack: sjmachppoalidveonrk

apple: sjmachppoalidveonrk

solid: sjmachppoalidveonrk

====================================>>>> all in the forward direction

These all are manual evaluation and the output may not 100% perfect in the example.

So, the point is all the letters of each string have to exist in the output in FORWARD DIRECTION (here the actual problem belongs), and possibly the server will send the final strings and numbers like 27594 will be generated and passed to extract the token, in the required end. If I have to punch it in a minimal possible string it would have much easier (That case only unique chars are enough). But in this case there are some points:

Letters can be present multiple time, though I have to reuse any letter if possible, eg: for solid and hold o > l > d can be reused as forward direction but for apple (a > p) and spark (p > a) we have to repeat a as in one case it appears before p for apple, and after p for sparks so either we need to repeat a or p. Even, we cannot do p > a > p as it will not cover both the case because we need two p after a for apple
We directly have no option to place a single p and use the same index twice in a time of extract, we need multiple p with no option left as the input string contains that
I am (not) sure, that there is multiple outputs possible for a set of strings. but the concern is it should be minimal in length, the combination doesn’t matter if its cover all the tokens in a forward direction. all (or one ) outputs of minimal possible length need to trace.
Adding this point as an EDIT to this post. After reading the comments and knowing that it’s already an existing problem is known as shortest common supersequence problem we can define that the resultant string will be the shortest possible string from which we can re generate any input string by simply removing some (0 to N) chars, this is same as all inputs can be found in a forward direction in the resultant string.
I have tried, by starting with an arbitrary string, and then made an analysis of next string and splitting all the letters, and place them accordingly, but after some times, it seems that current string letters can be placed in a better way, If the last string’s (or a previous string’s) letters were placed according to the current string. But again that string was analysed and placed based on something (multiple) what was processed, and placing something in the favor of something that is not processed seems difficult because to that we need to process that. Or might me maintaining a tree of all processed/unprocessed tree will help, building the building the final string? Any better way than it, it seems a brute force?

Note: I know there are a lot of other transformation possible, please try not to suggest anything else to use, we are doing a bit research on it.
javascriptnode.jsalgorithmemphasized text

// JS Code:

document.addEventListener("DOMContentLoaded", function () {
    const container = document.getElementById("autoToggleContainer");
    const leftArrow = document.getElementById("left-arrow");
    const rightArrow = document.getElementById("right-arrow");

    // Scroll 200px left/right
    leftArrow.addEventListener("click", () => {
        container.scrollBy({ left: -200, behavior: "smooth" });
    });

    rightArrow.addEventListener("click", () => {
        container.scrollBy({ left: 200, behavior: "smooth" });
    });

    // Tooltip behavior
    $(".autoToggle__switch").hover(function () {
        const tooltip = $(this).find(".auto-toggleTooltip");
        const offset = $(this).offset();
        const height = $(this).outerHeight();

        tooltip.css({
            top: offset.top + height + 10,
            left: offset.left,
            display: "block"
        });
    }, function () {
        $(this).find(".auto-toggleTooltip").hide();
    });

    // Optional: scroll active button into view on load
    const activeBtn = container.querySelector(".autoToggle__switch.active");
    if (activeBtn) {
        activeBtn.scrollIntoView({ behavior: "smooth", inline: "center" });
    }
});
document.getElementById("left-arrow").addEventListener("click", function () {
    document.getElementById("autoToggleContainer").scrollBy({ left: -200, behavior: "smooth" });
});

document.getElementById("right-arrow").addEventListener("click", function () {
    document.getElementById("autoToggleContainer").scrollBy({ left: 200, behavior: "smooth" });
});

// HTML Code:

<div class="autoToggle__wrapper">
    <button class="arrow left" id="left-arrow"><img src="~/Images/AdminPlus/white-prev-arrow.svg" /></button>

    <div class="app__autoToggleswitches" id="autoToggleContainer">
        @foreach (var item in Model.PastYearInfo)
        {
            <button id="[email protected]" class="autoToggle__switch app-text-white app-mr-15" data-idstring="@item.IdString"
                    data-name="@item.Name">
                @item.Name
                <span class="auto-toggleTooltip">Year @item.IdString</span>
            </button>
        }
    </div>

    <button class="arrow right" id="right-arrow"><img src="~/Images/AdminPlus/white-next-arrow.svg" /></button>
</div>

This is the screenshot of output

• Here we are using postion:fixed; for tooltip because parent element has arrow icons so using overflow hidden.

• tooltip are showing properly but after clicking next button tooltip position showing same location when loading the page Screenshot added

• I have tried many ways but not working

I’m trying to analyze and rebuild some code written by someone that currently consists of an older version of express.js (4.18.2) to a current version of express.js.

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const onem2mParser = bodyParser.text(
    {
        limit: '5mb',
        type: 'application/onem2m-resource+xml;application/xml;application/json;application/vnd.onem2m-res+xml;application/vnd.onem2m-res+json'
    }
);

app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, X-M2M-RI, X-M2M-RVI, X-M2M-RSC, Accept, X-M2M-Origin, Locale');
    res.header('Access-Control-Expose-Headers', 'Origin, X-Requested-With, Content-Type, X-M2M-RI, X-M2M-RVI, X-M2M-RSC, Accept, X-M2M-Origin, Locale');
    (req.method == 'OPTIONS') ? res.sendStatus(200) : next();
});

# Where The error occurs
app.post(onem2mParser, function (request, response) {
...
}

I have trouble with app.post() above, and the current version of express.js is throwing the following error:

ERROR   Uncaught Exception  
{
    "errorType": "TypeError",
    "errorMessage": "path must be a string, array of strings, or regular expression",
    "stack": [
        "TypeError: path must be a string, array of strings, or regular expression",
        "    at pathToRegexp (/var/task/node_modules/path-to-regexp/index.js:69:11)",
        "    at new Layer (/var/task/node_modules/express/lib/router/layer.js:45:17)",
        "    at Function.route (/var/task/node_modules/express/lib/router/index.js:505:15)",
        "    at app.<computed> [as get] (/var/task/node_modules/express/lib/application.js:498:30)",
        "    at Object.<anonymous> (/var/task/src/get.js:80:5)",
        "    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)"
    ]
}

In this part, I used the parser as a middleware with the help of chatgpt, but an error is occuring in another module that is using the code in this part.

const router = express.Router();
router.use(onem2mParser);
router.post('/', function(req, res) => ...);
app.use('/', router);

ERROR   TypeError: ee.on is not a function
    at first (/var/task/node_modules/ee-first/index.js:43:10)
    at onSocket (/var/task/node_modules/on-finished/index.js:115:16)
    at attachFinishedListener (/var/task/node_modules/on-finished/index.js:120:5)
    at attachListener (/var/task/node_modules/on-finished/index.js:147:5)
    at onFinished (/var/task/node_modules/on-finished/index.js:53:3)
    at send (/var/task/node_modules/finalhandler/index.js:314:3)
    at /var/task/node_modules/finalhandler/index.js:133:5
    at /var/task/node_modules/express/lib/router/index.js:646:15
    at next (/var/task/node_modules/express/lib/router/index.js:265:14)
    at textParser (/var/task/node_modules/express/node_modules/body-parser/lib/types/text.js:78:7)

Finally, I have two questions.

1. What does it mean to insert bodyParser instead of string type into path parameter in app.post()? Is the path then ‘/’?
2. How do I fix the code to work well with the same logic in the latest 4.x version of express.js?

I am using the LigerShark WebOptimizer library (GitHub link) in a .NET 9.0 MVC application. I want to enable cache busting, but whenever I do so, I encounter some difficulties. I find that the documentation is lacking in this department, so i’m hoping that someone out there has this working.

Setup / code configuration

_ViewImports.cshtml:

  @addTagHelper *, WebOptimizer.Core
  @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

Program.cs:

  // Bundling tasks abstracted into static method...
  static IAssetPipeline AddBundles(IAssetPipeline pipeline)
  {
      pipeline.AddJavaScriptBundle("~/bundles/jquery",
          "Scripts/jquery-2.1.1.js",
          "Scripts/jquery-ui-1.11.4.js",
          "Scripts/jquery.unobtrusive-ajax.js",
          "Scripts/jquery.ticker.js"
      );

      return pipeline;
  }

  // Call to the bundler
  services.AddWebOptimizer(pipeline =>
  {
      AddBundles(pipeline);
  }, opt => // I have to explicitly state a default opt...otherwise minification does not work.
  {
  });

  app.UseWebOptimizer();
  app.UseStaticFiles();   

_Layout.cshtml (referenced on all views):

  <script src="~/bundles/jquery"></script>

Issues

1. Scripts are no longer in a bundle (e.g. /bundles/jquery), but are referenced directly. Here is the output from Firefox Developer Tools:

  GET https://localhost:7063/Scripts/jquery-2.1.1.js?v=CPMzgO5SHQa9XMvzKiSCYj6ECb0Edy0rHFl04JXlkY0 
  GET https://localhost:7063/Scripts/jquery-ui-1.11.4.js?v=R9bDu_ZQj9QsBSatxVF1s40Ckf5e7NJDAg-CYP1ZcZM

2. The framework appears to look for the scripts in the current directory. For instance, if I navigate to https://localhost:7063/Account then the following happens:

  GET https://localhost:7063/Account/Scripts/jquery-2.1.1.js?v=CPMzgO5SHQa9XMvzKiSCYj6ECb0Edy0rHFl04JXlkY0
  GET https://localhost:7063/Account/Scripts/jquery-ui-1.11.4.js?v=R9bDu_ZQj9QsBSatxVF1s40Ckf5e7NJDAg-CYP1ZcZM

(Note the Account sub directory) The result (as expected) is a bunch of 404 errors as my scripts exist at the application root level.

Long shot, but I’m hoping someone can help. I’m trying to add some custom checkout fields to my checkout page, but either doing it manually in the functions.php file, or by using a plugin, the checkout page doesn’t change whatsoever.

https://mainflorist.com/checkout/

I am seeing a this error, but not sure what’s causing it. I am using PHP 8.3 and the Jupiter X theme, but even with other themes, the errors persist. The error occurs with or without any modifications to the functions.php file.

Store "wc/store/validation" is already registered.
c @ data.min.js?ver=7c62e39de0308c73d50c:2
register @ data.min.js?ver=7c62e39de0308c73d50c:2
(anonymous) @ data.min.js?ver=7c62e39de0308c73d50c:2
9538 @ wc-cart-checkout-base-frontend.js?ver=c805309b07586da6f60a:43
l @ checkout-frontend.js?ver=5dd64761c5edaf06069b:1
8682 @ wc-cart-checkout-base-frontend.js?ver=c805309b07586da6f60a:43
l @ checkout-frontend.js?ver=5dd64761c5edaf06069b:1
1669 @ shipping-method-frontend.js?ver=3ffd12c88ab2c3188c1c:1
l @ checkout-frontend.js?ver=5dd64761c5edaf06069b:1
Promise.then
(anonymous) @ checkout-frontend.js?ver=5dd64761c5edaf06069b:1
c @ react.min.js?ver=18.3.1.1:10
Qs @ react-dom.min.js?ver=18.3.1.1:10
wl @ react-dom.min.js?ver=18.3.1.1:10
bl @ react-dom.min.js?ver=18.3.1.1:10
yl @ react-dom.min.js?ver=18.3.1.1:10
fl @ react-dom.min.js?ver=18.3.1.1:10
Nn @ react-dom.min.js?ver=18.3.1.1:10
(anonymous) @ react-dom.min.js?ver=18.3.1.1:10

Thank you.

How can I execute a graphql mutation using an authenticated user and API Routes in Next.js. I tried to use generateClient() from aws-amplify/api but it throws NoSignedUser: No current user error.

const graphqlclient = generateClient();

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const body = req.body;

    if (!graphqlclient) return res.status(401).json({ message: 'Unauthorized' });

       const newProduct = body.newProduct;


       const results = await graphqlclient.graphql({
           query: createProduct,
           variables: {
               input: newProduct
           }
       })

       return res.status(200).json({ success: true, product: results });
    }

    res.status(405).json({ message: 'Method not allowed' });
}

I have also tried

const client = generateServerClientUsingCookies({
   config: amplifyConfig,
   cookies
});

but I get the error cookies was called outside a request scope.

When I run npm create astro@latest it is not asking me whether I want the astro project to be TypeScript or JavaScript anymore.

I want to know, if there is any way, I can create an Astro Project with just JavaScript.

I’ve also tried this following approaches but nothing seemed to work:

• Deleted the tsconfig.json file that was auto generated when creating the astro project
• added ---lang='js' at the top of the .astro file
• Restarted the server after applying the above changes.