Category: javascript

This code working in ViteSSG, but not working in SPA:

export const useTestStore = defineStore({
    id: 'test',
    state: () => ({
        val: null
    })
})

Error msg: Cannot destructure property ‘state’ of ‘options’ as it is undefined

But this code working well in SPA:

export const useTestStore = defineStore('test', {
    state: () => {
        return {
            val: null
        }
    }
})

Why explicitly return the state in spa-mode?
I can do it without return?

I’m implementing Shopify OAuth for customer login in my custom Shopify app, but after authentication, Shopify redirects users to the store’s orders page instead of my specified localhost:3000/account page.

I’m using /account/login for authentication instead of the Admin OAuth flow, since I want to log in customers, not admin users.

const shopifyAuth = (req, res) => {
  const shop = process.env.SHOPIFY_STORE_URL
  const clientId = process.env.SHOPIFY_PARTNER_CLIENT_ID
  const scope = 'read_customers'
  const state = Math.random().toString(36).substring(2)
  req.session.state = state

  const returnTo = encodeURIComponent('http://localhost:3000/account')
  const redirectUri = encodeURIComponent(
    `http://localhost:8000/api/shopify/account/callback?return_to=${returnTo}`
  )

  const authUrl = `https://${shop}/account/login?client_id=${clientId}&scope=${scope}&redirect_uri=${redirectUri}&state=${state}`

  res.redirect(authUrl)
}

const getAccountCallback = async (req, res) => {
  try {
    const { code, shop, state, return_to } = req.query

    if (!code || !shop || state !== req.session.state) {
      return res.status(400).json({ error: 'Invalid request' })
    }

    const accessTokenResponse = await axios.post(
      `https://${shop}/admin/oauth/access_token`,
      {
        client_id: process.env.SHOPIFY_PARTNER_CLIENT_ID,
        client_secret: process.env.SHOPIFY_PARTNER_CLIENT_SECRET,
        code,
      }
    )

    const { access_token } = accessTokenResponse.data

    res.cookie('_merchant_essential', access_token, {
      httpOnly: true,
      secure: process.env.NODE_ENV === 'production',
      maxAge: 60 * 60 * 24 * 30 * 1000,
      sameSite: 'Strict',
    })

    res.redirect(return_to || 'http://localhost:3000/account')
  } catch (error) {
    console.error('Error during OAuth callback:', error)
    res.status(500).json({ error: 'Failed to exchange code for access token' })
  }
}

After logging in, instead of redirecting to http://localhost:3000/account, Shopify takes the user to the Orders page in the Online Store.

The redirect_uri is correctly set in the OAuth URL, but Shopify seems to ignore it.

Any help or insights would be greatly appreciated! Thanks in advance.

I am coding a project in the coding IDE called code.org and I have come across this error in this patch of code that’s making my whole project stop working after a certain point. The following code is the erroring code :

  // Add event listeners for button clicks
  for (var i = 0; i < shuffledButtons.length; i++) {
    var buttonId = shuffledButtons[i];
    onEvent(buttonId, "click", function() {
      var buttonText = getText(buttonId).toLowerCase();
      if (buttonText === correctAnswer.toLowerCase()) {
        score++;
      }
      console.log("Score: " + score);
      setScreen(screen); // Move to the next question screen
    });
  }
}

Any help and request are appreciated!

When using buildGeometry (in p5.js’s webgl mode), the fill color can change inside the function while the stroke color cannot. Without this all shapes inside the function must have the same stroke color.

I am not sure whether this is intentional or if it is documented anywhere. I’m also curious to know if there is a work-around, or if something is wrong in my code.

Code and result is below:

let shape;

function setup() {
  createCanvas(100, 100, WEBGL);
  shape = buildGeometry(createShape);
}

function draw() {
  background(200);
  orbitControl();
  model(shape);
}

function createShape() {
  strokeWeight(10)
  stroke("red")
  fill("green")
  cone();
  strokeWeight("5")
  fill("yellow")
  stroke("blue")
  box();
}

html,
body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.1/addons/p5.sound.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" />
</head>

<body>
  <main>
  </main>
  <script src="sketch.js"></script>
</body>

</html>

I have a DataTables page with 8 columns that hide as the screen gets smaller. An expand arrow is created to see the columns when they are collapsed. My problem is that no matter what I do, when I expand to see the collapsed columns, all input boxes are empty. When I return to full screen, the data is there. I have modified my JS file numerous times and can’t get the data to show in collapsed form.

Here is the JavaScript I am using:

$(document).ready(function() { // Attach event listeners using event delegation $(‘#example’).on(‘input’, ‘input[type=”number”]’, function() { calculateTotal(); // Call your calculation function whenever an input changes });

var table = $(‘#example’).DataTable({ responsive: true, paging: true, // Enable pagination searching: true, // Enable search ordering: false, // Disable automatic sorting info: true, // Enable information columnDefs: [ { targets: 7, // Prov Tax Month Column responsivePriority: 8, // Priority 8: Collapses first }, { targets: 6, // Prov Tax Year Column responsivePriority: 7, // Priority 7: Collapses second }, { targets: 5, // Fed Tax Month Column responsivePriority: 6, // Priority 6: Collapses third }, { targets: 4, // Fed Tax Year Column responsivePriority: 5, // Priority 5: Collapses fourth }, { targets: 3, // Clear Monthly Column responsivePriority: 4, // Priority 4: Collapses fifth }, { targets: 2, // Monthly Amount Column responsivePriority: 3, // Priority 3: Collapses sixth }, { targets: 1, // Yearly Amount Column responsivePriority: 2, // Priority 2: Collapses seventh }, { targets: 0, // Category Column responsivePriority: 1, // Priority 1: Collapses last } ] });

// Fix for display issue on small screen when expanding columns $(‘#example’).on(‘responsive-display’, function(e, datatable, row, columns) { // Force all columns to be visible when the table is expanded $(columns).each(function() { $(this).show(); }); });

// Check for column visibility on table resize $(window).resize(function() { table.columns.adjust().responsive.recalc(); }); });

Can anyone help me figure out why the input fields are empty when the columns are collapsed and then expanded? Any assistance would be greatly appreciated!

Using Cheerio I can select a text node with this code

$(selector)
        .first()
        .text()
        .replace(/s+/g, " ")
        .trim();

But I want it to also work where the text is spread across multiple children. When the above code run all the words merge into one. Hello World is returned as HelloWorld. This is because no spaces exist in the other nodes. So I want to treat a new tag as a space.

I tried using .contents and .map to look at each child, but those returned empty strings.

I’m having trouble getting the columns to render and behave similar to the sample URL provided in the question above. Not sure if this is something that can be solved purely with CSS or JS is required.

I understand that given any end points there are an infinite number of possible control points one could use to make a bezier curve, so I’m not trying to do that. I have a pattern I want the control points to follow. It looks something like this.

What’s important is that I get the loop in the curve and that I can do several connected curves in any configuration.

I’m having some problems with my code, it’s not giving me what I expect and I’ve gone mush-brained staring at it. So I’m asking for a fresh perspective on what’s wrong with it.

It randomly generates a set of start/end points (the first FOR loop) and then a set of control points (second FOR loop) based on the pattern pictured above. There is very likely a more elegant way to do this math but it’s not the kind of math I do often.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let curveTime = true; // Make true to draw curves in place of lines.
let points = []; 
let framecount = 0;
const numPoints = 50; 
const radius = 150; 
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const noiseFactor = 8;

// Generate points on tangle path in a random-ish way.
for (let i = 0; i < numPoints; i++) {
let angle = (i / numPoints) * Math.PI * 10; // Spiral-like effect
let r = radius * (Math.random() * 0.5 + 0.5); // Varying radius
let x = centerX + Math.cos(angle) * r + (Math.random() - 0.5) * noiseFactor;
let y = centerY + Math.sin(angle) * r + (Math.random() - 0.5) * noiseFactor;
let cx = 0.0; // filled in on next loop
let cy = 0.0; // filled in on next loop
//console.log(i, centerX, centerY, x, y ,cx ,cy);
points.push({ x, y ,cx ,cy});
} // End for (let i = 0; i < numPoints; i++)

// Generate control points for bezier curve call based on start and end points.
for (let i = 0; i < numPoints; i+=2) {
lineRun = (points[i].x - points[i+1].x);
lineRise = (points[i].y - points[i+1].y);
// Calulate control points, these should produce a loop in the curve. 
let cX2 = (points[i+1].x + lineRun) + lineRise;     // control point 2's x 
let cY2 = (points[i+1].y + lineRise) - lineRun;     // control point 2's y 
let cX3 = (points[i].x + lineRise) + lineRise;      // control point 3's x 
let cY3 = (points[i].y - lineRun) - lineRun;        // control point 3's y 

points[i].cx = cX2;
points[i].cy = cY2;
points[i+1].cx = cX3;
points[i+1].cy = cY3;

console.log(i, cX2, cY2, cX3 ,cY3);
} // End for (let i = 0; i < numPoints; i+=2)

let results = document.getElementById("results");
let startTime, now;

now = Date.now();
startTime = now;

function draw() {
if (points.length === 0) return; // Ensure points array is populated

now = Date.now();

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineJoin = "round";
ctx.lineCap = "round";
ctx.strokeStyle = "black"; 
ctx.lineWidth = 2;  
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length; i++) {
    let offsetX = (Math.random() - 0.5) * (ctx.strokeStyle === 'black' ? noiseFactor / 3 : noiseFactor);
    let offsetY = (Math.random() - 0.5) * (ctx.strokeStyle === 'black' ? noiseFactor / 3 : noiseFactor);

    if (curveTime) { // set above
    ctx.bezierCurveTo(points[i-1].cx, points[i-1].cy, points[i].cx, points[i].cy, points[i].x + offsetX, points[i].y + offsetY);
    } else {
    ctx.lineTo(points[i].x + offsetX, points[i].y + offsetY);
    }

} // for (let i = 1; i < points.length; i++)
ctx.closePath();
ctx.stroke();

let sinceStart = now - startTime;
let elapsedTime = Math.round(sinceStart / 1000 * 100) / 100
let currentFps = Math.round(1000 / (sinceStart / ++framecount) * 100) / 100;
results.innerHTML = "Elapsed time: " + elapsedTime + " secs <br />FPS: " + ((elapsedTime >= 60) ? "0.0 <br />Done. " : currentFps);

if (elapsedTime < 60) requestAnimationFrame(draw);
} // End function draw()

draw();

 #canvas {
    position: absolute;
}

    <!DOCTYPE html>
    <html>
        <head>
            <title>Tangle Test</title>
        </head>
        <body>
            <canvas id="canvas" width="600" height="600"></canvas>
            <div id="results"></div>
        </body>
    </html>

Any help is appreciated!

So I have a website made with Wix and I’m struggling with some Velo code. This is the test website. I have 2 sections called Papildus Moduļi. The 1st has a repeater which contains 6 containers each with 6 switches. The 2nd section doesn’t have a repeater, but it looks the same. Only the switches in the 2nd section (no repeater) behave the way I want them to.

Issues: When Wix repeats elements, they are given the same exact element name. This is causing issues. I want each group of 6 switches to be independent. In this test version, in the repeater, I can manually select each #switch43 (1st switch of the section), but if I select #switch44 (right below), of any row, every previously selected #switch43 is unselected.

Also, I need each of these switches to have a different value, just as the free switches of the 2nd section.

My goal: I want to know how to make the switches in the 1st section’s repeater have the same behavior as the 2nd section. OR, I want to know if it’s impossible. I don’t know where to go from here.

More info: The repeater is called #repeater4 and each container is called #container4. If I mention the repeater in the code, all functionality/logic of the switches is removed from this section. In the 1st section, the boxes with 0 in them are named #textbox489-#textbox494 going left to right, top to bottom. They are not yet functional, but they will do the same as the boxes in the next section.

There is a bit more separate code left out which impacts the color of the rows in a different section. This is responsible for the console messages.

Thank you for helping me learn 🙂

$w.onReady(() => {
// Attach event listeners to the dropdown
$w("#employeeDD").onChange(updateTotals);
$w("#employeeDD").onChange(updateSwitchTotal);

// Define sections for the 2nd section switches
const oldSections = [
    { col1: ["switch1", "switch4"], col2: ["switch2", "switch5"], col3: ["switch3", "switch6"] },
    { col1: ["switch7", "switch10"], col2: ["switch8", "switch11"], col3: ["switch9", "switch12"] },
    { col1: ["switch13", "switch16"], col2: ["switch14", "switch17"], col3: ["switch15", "switch18"] },
    { col1: ["switch19", "switch22"], col2: ["switch20", "switch23"], col3: ["switch21", "switch24"] },
    { col1: ["switch25", "switch28"], col2: ["switch26", "switch29"], col3: ["switch27", "switch30"] },
    { col1: ["switch31", "switch34"], col2: ["switch32", "switch35"], col3: ["switch33", "switch36"] }
];

// Attach event listeners to 2nd section switches
oldSections.forEach(section => {
    Object.values(section).flat().forEach(switchId => {
        $w(`#${switchId}`).onChange(() => handleSwitchSelection(switchId, section));
    });
});

// Attach event listeners to the additional switches
["switch37", "switch38", "switch39", "switch40", "switch41", "switch42"].forEach(switchId => {
    $w(`#${switchId}`).onChange(updateSwitchTotal);
});

// Attach event listeners to 1st section switches using data attributes
const newSwitchGroups = [
    { col1: ["switch43", "switch44"], col2: ["switch45", "switch46"], col3: ["switch47", "switch48"] },
    { col1: ["switch43", "switch44"], col2: ["switch45", "switch46"], col3: ["switch47", "switch48"] },
    { col1: ["switch43", "switch44"], col2: ["switch45", "switch46"], col3: ["switch47", "switch48"] },
    { col1: ["switch43", "switch44"], col2: ["switch45", "switch46"], col3: ["switch47", "switch48"] },
    { col1: ["switch43", "switch44"], col2: ["switch45", "switch46"], col3: ["switch47", "switch48"] }
];

newSwitchGroups.forEach((group, groupIndex) => {
    Object.values(group).flat().forEach(switchId => {
        $w(`#${switchId}`).onChange(() => handleNewSwitchSelection(switchId, group, groupIndex));
    });
});
});

// Lookup table for total values
const totalsMap = {
    3: { a: 270, b: 314, c: 373 },
    7: { a: 245, b: 282, c: 329 },
    20: { a: 233, b: 268, c: 313 }
};

// Function to update totals based on dropdown
const updateTotals = () => {
    const selectedValue = Number($w("#employeeDD").value);
    const { a = 0, b = 0, c = 0 } = totalsMap[selectedValue] || {};

    $w("#aTotal").text = formatCurrency(a);
    $w("#bTotal").text = formatCurrency(b);
    $w("#cTotal").text = formatCurrency(c);

};

// Handles switch selection logic for 2nd section switches
const handleSwitchSelection = (selectedSwitchId, section) => {
    const selectedColumn = Object.values(section).find(col => col.includes(selectedSwitchId));
    selectedColumn?.forEach(switchId => {
        if (switchId !== selectedSwitchId) {
            $w(`#${switchId}`).checked = false;
        }
    });

    updateSwitchTotal();
};

// Handles switch selection logic for 1st section switches
const handleNewSwitchSelection = (selectedSwitchId, group, groupIndex) => {
    const selectedColumn = Object.values(group).find(col => col.includes(selectedSwitchId));
    selectedColumn?.forEach(switchId => {
        if (switchId !== selectedSwitchId) {
            $w(`#${switchId}`).checked = false;
        }
    });

    updateSwitchTotal();
};

// Function to update switch totals & final quotes
const updateSwitchTotal = () => {
    let totalA = 0, totalB = 0, totalC = 0;
    const selectedValue = Number($w("#employeeDD").value);

    const rowPrices = {
        3:  [15, 20, 126, 155, 60, 86, 39, 78, 65, 87, 153, 182, 15, 10],
        7:  [13, 17, 110, 135, 52, 75, 36, 61, 56, 76, 134, 159, 13, 8],
        20: [11, 16, 103, 127, 49, 71, 34, 57, 53, 72, 126, 149, 12, 7]
    };

    const priceList = rowPrices[selectedValue] || Array(14).fill(0);

    // Column definitions for 2nd section switches
    const oldColumns = {
        col1: ["switch1", "switch4", "switch7", "switch10", "switch13", "switch16", "switch19", "switch22", "switch25", "switch28", "switch31", "switch34", "switch37", "switch40"],
        col2: ["switch2", "switch5", "switch8", "switch11", "switch14", "switch17", "switch20", "switch23", "switch26", "switch29", "switch32", "switch35", "switch38", "switch41"],
        col3: ["switch3", "switch6", "switch9", "switch12", "switch15", "switch18", "switch21", "switch24", "switch27", "switch30", "switch33", "switch36", "switch39", "switch42"]
    };

    // Calculate totals for 2nd section switches
    Object.entries(oldColumns).forEach(([col, switches], colIndex) => {
        switches.forEach((switchId, index) => {
            if ($w(`#${switchId}`).checked) {
                if (colIndex === 0) totalA += priceList[index];
                if (colIndex === 1) totalB += priceList[index];
                if (colIndex === 2) totalC += priceList[index];
            }
        });
    });

    // Calculate totals for 1st section switches
    const newSwitchGroups = [
        { col1: ["switch43", "switch44"], col2: ["switch45", "switch46"], col3: ["switch47", "switch48"] },
        { col1: ["switch43", "switch44"], col2: ["switch45", "switch46"], col3: ["switch47", "switch48"] },
        { col1: ["switch43", "switch44"], col2: ["switch45", "switch46"], col3: ["switch47", "switch48"] },
        { col1: ["switch43", "switch44"], col2: ["switch45", "switch46"], col3: ["switch47", "switch48"] },
        { col1: ["switch43", "switch44"], col2: ["switch45", "switch46"], col3: ["switch47", "switch48"] }
    ];

    newSwitchGroups.forEach((group, groupIndex) => {
        Object.entries(group).forEach(([col, switches], colIndex) => {
            switches.forEach((switchId, switchIndex) => {
                if ($w(`#${switchId}`).checked) {
                    if (colIndex === 0) totalA += priceList[switchIndex];
                    if (colIndex === 1) totalB += priceList[switchIndex];
                    if (colIndex === 2) totalC += priceList[switchIndex];
                }
            });
        });
    });

    // Update switch totals
    $w("#switchTotal").text = formatCurrency(totalA);
    $w("#switchTotalb").text = formatCurrency(totalB);
    $w("#switchTotalc").text = formatCurrency(totalC);

    // Calculate final quotes
    const finalTotalA = parseCurrency($w("#aTotal").text) + totalA;
    const finalTotalB = parseCurrency($w("#bTotal").text) + totalB;
    const finalTotalC = parseCurrency($w("#cTotal").text) + totalC;

    $w("#totalQuoteA").text = formatCurrency(finalTotalA);
    $w("#totalQuoteB").text = formatCurrency(finalTotalB);
    $w("#totalQuoteC").text = formatCurrency(finalTotalC);
};

// Format currency using modern API
const formatCurrency = (value) => new Intl.NumberFormat('lv-LV', { style: 'currency', currency: 'EUR', minimumFractionDigits: 0, maximumFractionDigits: 0 }).format(value);

// Parse currency text back into number
const parseCurrency = (value) => Number(value.replace(/[^d.-]/g, '')) || 0;

I tried deploying my sveltekit app through a reverse_proxy using apache , it worked but all the styles are gone and functionality

Image 1 Showing Responses

Image 2 Showing APPLICATION

I tried this config:

/etc/httpd/conf.d/front.conf :

<VirtualHost *:80>
    ServerAdmin webmaster@localhost

    ProxyPreserveHost On
    ProxyPass / http://localhost:3000/
    ProxyPassReverse / http://localhost:3000/

    <Location "/">
        Require all granted
    </Location>

    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</VirtualHost>

I think the problem lies in my backend here My backend is saving the files to my backend as the file name itself so like cat.jpg. also the images are saevd in the saem directory as the app in the userpics folder.

FRONTEND

<img className="w-56 h-56 border-2 border-gray-400 rounded-full" src={usersettings && userimg ? `/userpics/${userimg}` : imagepreview}>
                    </img>

@app.route("/getimg", methods=["POST", "GET"])
def getimg():
    dataid = request.get_json()
    user = User.query.filter_by(username=dataid['user']).first()
    if user and user.userimg:
        return user.userimg
    else:
        return jsonify({"error": "Image not found"}), 404

@app.route("/userpics/<filename>", methods=["POST", "GET"])
def get_user_image(filename):
    # Serve the image from the static/userpics folder
    return send_from_directory(os.path.join(app.root_path, "userpics"), filename)

Maybe my whole approach is wrong. I trying to simulate a signer filling a field after the pdf has been certified (digital signature). What I attempted: changing its value using SetValue, making a copy of the field and using context.assign with the same ref in hope it will create the object after the signature within the pdf structure with the same ref number. I have also tried to manipulate the widget / appearance without any success.

Given a set of <buttons> and <divs> such as:

<button class="buttTest" id="butt1">butt 1</button>
<button class="buttTest" id="butt2">butt 2</button>
<!-- <button class="buttTest" id="butt3">butt 3</button> DISABLED OR MISSING BUTTON-->
<button class="buttTest" id="butt4">butt 4</button>
<button class="buttTest" id="butt5">butt 5</button>

<div class="divTest" id="div1">div 1</div>
<div class="divTest" id="div2">div 2</div>
<div class="divTest" id="div3">div 3</div>
<div class="divTest" id="div4">div 4</div>
<div class="divTest" id="div5">div 5</div>

Suppose there exists the need to add the corresponding eventlistener to each button for each div such as this:

const buttArray = document.getElementsByClassName("buttTest");
const divArray = document.getElementsByClassName("divTest");

for (let i=0;i<=buttArray.length;i++) {
  buttArray[i].addEventListener("click", function () {divArray[i].style.display = 'none'})
}

clearly if one of the buttons needs to be disabled or is missing, the equivalence <button id="butt-i"> —> <div id="divTest-j"> will be broken, and <button 4> will trigger <div 3> instead of <div 4>.

Is there a more or less straightforward way to achieve the proper correspondence between the two sets?
I tried to test diverse array filter methods but failed.
And also the words “lookup table” came to mind, but I’m at odds on how to implement this solution.

I have a react-typescript project. I want to use Keycloak as my auth server. That’s why I am going to use keycloak-js in my ReactJS app.
In order to implement it, I have tried to install and use keycloak-js and @react-keycloak/web.
But when using ReactKeycloakProvider, it shows an error: ReactKeycloakProvider' cannot be used as a JSX component in my index.tsx file. However application works perfectly and auth process works very well.
When I try to not use TypeScript in my project, this error does not appear in the index.js file.

The technologies and libraries versions:

nodejs: 22.14.0

“react”: “^19.0.0”

“typescript”: “^4.9.5”

“react-dom”: “^19.0.0”

“react-router-dom”: “^7.2.0”

“keycloak-react-web”: “^0.1.19”

“keycloak-js”: “^21.1.2”

index.tsx file:

import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';
import App from './App';
import keycloak from './services/keycloak';
import { ReactKeycloakProvider } from '@react-keycloak/web';

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

const keycloakConfig = {
  redirectUri: 'http://localhost:3000/',
  KeycloakResponseType: 'code',
  pkceMethod: 'S256',
  checkLoginIframe: false
};

root.render(
 <ReactKeycloakProvider authClient={keycloak} initOptions={keycloakConfig}>
  <React.StrictMode>
   <App />
  </React.StrictMode>
</ReactKeycloakProvider>
);
reportWebVitals();

keycloak.tsx file:

import Keycloak from 'keycloak-js'

const keycloak = new Keycloak({
  realm: 'my-realm',
  url: 'http://localhost:8079/',
  clientId: 'my-client'
});

export default keycloak

Error screenshot:

Thank you in advance and appreciate your help

Js isn’t working if added as SEWP. JSON isn’t working in classic mode