# "Can't find variable" error occurs only on Safari

**URL:** <https://forum.babylonjs.com/t/cant-find-variable-error-occurs-only-on-safari/43798>\
**Category:** Questions\
**Tags:** safari\
**Created:** [September 3, 2023, 8:03pm UTC](https://forum.babylonjs.com/t/cant-find-variable-error-occurs-only-on-safari/43798 "2023-09-03T20:03:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![cx20](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cx20/32/46_2.png) [@cx20](https://forum.babylonjs.com/u/cx20)\
**Post date:** [September 3, 2023, 8:03pm UTC](https://forum.babylonjs.com/t/cant-find-variable-error-occurs-only-on-safari/43798/1 "2023-09-03T20:03:22Z")

</div>

This probably only applies to Babylon.js Playground.

The code below works in Chrome but gives an error in Safari.  
In Safari, the `const` variable `SCALE` seems to be undefined in the `addGround` function.

> **[Babylon.js Playground](https://playground.babylonjs.com/#MGDK7C%237)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

```auto
const SCALE = 1 / 10; // TODO: "Can't find variable: SCALE" error in Safari

const createScene = function () {
    const scene = new BABYLON.Scene(engine);
    const camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);
    camera.setTarget(BABYLON.Vector3.Zero());
    camera.attachControl(canvas, true);
    const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
    light.intensity = 0.7;

    const sphere = BABYLON.MeshBuilder.CreateSphere(
        "sphere",
        { diameter: 2, segments: 32 },
        scene
    );
    sphere.position.y = 1;

    addGround(scene);

    return scene;
};

function addGround(scene) {
    // "Can't find variable: SCALE" error in Safari
    const ground = BABYLON.MeshBuilder.CreateGround(
        "ground",
        { width: 60 * SCALE, height: 60 * SCALE },
        scene
    );
}

```

I think this is due to the difference in how Chrome and Safari handle scopes.  
There seem to be some workarounds, but I can’t decide which one is better.  
Can you give me some good advice?

Idea 1) Use var instead of const

```auto
//const SCALE = 1/10;
var SCALE = 1/10;

```

Idea 2) Assign function to variable

```auto
//function addGround(scene) {
const addGround = function (scene) {

```

---

<div class="post-metadata">

**Author:** ![DRLeria](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/drleria/32/50928_2.png) [@DRLeria](https://forum.babylonjs.com/u/DRLeria)\
**Post date:** [September 4, 2023, 12:57am UTC](https://forum.babylonjs.com/t/cant-find-variable-error-occurs-only-on-safari/43798/2 "2023-09-04T00:57:28Z")

</div>

Safari Things!  
You’re actually calculating a value, so you can use “var”, it should work for you without problems.

In that case I don’t see it necessary to use a function since you are calculating a specific value.

---

<div class="post-metadata">

**Author:** ![cx20](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cx20/32/46_2.png) [@cx20](https://forum.babylonjs.com/u/cx20)\
**Post date:** [September 4, 2023, 3:08am UTC](https://forum.babylonjs.com/t/cant-find-variable-error-occurs-only-on-safari/43798/3 "2023-09-04T03:08:19Z")

</div>

Thank you for your advice.  
I think modern JavaScript should use `const` and `let` over `var`, but a simple way to solve this case might be to use `var`.

The following is a simplified representation of the part that dynamically executes JavaScript in Babylon.js Playground.  
It seems that the Safari error can be resolved by removing the { } in the try-catch, but since it’s putting the cart before the horse, I think I’ll give up.

> **[Safari const value test - JSFiddle - Code Playground](https://jsfiddle.net/cx20/vbf2dz80/35/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

```auto
let code = `const SCALE = 1 / 10; // TODO: "Can't find variable: SCALE" error in Safari

const createScene = function() {
    console.log("createScene()");
    addGround();
};

function addGround() {
    console.log("addGround()");
    // "Can't find variable: SCALE" error in Safari
    console.log("width:" + 60 * SCALE);
}

window.initFunction = async function() {
    window.scene = createScene();
}
`;

function FastEval(code) {
  const head = document.getElementsByTagName("head")[0];
  const script = document.createElement("script");
  script.setAttribute("type", "text/javascript");

  script.innerHTML = `try {${code};}
          catch(e) {
              console.log(e);
          }`; // Error in Safari
  //script.innerHTML = `{${code};}`; // Error in Safari
  //script.innerHTML = `${code};`; // No Errors in Safari

  head.appendChild(script);
}

async function init() {
  FastEval(code);
  window.initFunction();
}

init();

```

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [September 4, 2023, 10:29am UTC](https://forum.babylonjs.com/t/cant-find-variable-error-occurs-only-on-safari/43798/4 "2023-09-04T10:29:10Z")

</div>

> [@cx20](#):
>
> it’s putting the cart before the horse

Just wanted to let you know that you might not be the only one struggling with this 😀  
Quite annoying, isn’t it ? 😬

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [September 4, 2023, 10:39am UTC](https://forum.babylonjs.com/t/cant-find-variable-error-occurs-only-on-safari/43798/5 "2023-09-04T10:39:26Z")

</div>

Well, that makes little to no sense to me (from Safari’s side). The functions are being evaluated together with the initial const. It is a part of the scope of this specific script. We are not using module or anything fancy, just a script tag. Also, they can’t claim it’s a hoisting issue, as the variable is defined and set before the function is even evaluated (let alone executed).

Why is “createScene” defined and working well, but not SCALE?..

I don’t have a mac to test it, but that is most certainly a bug on their end (Unless it is some very weird quirk in the JS definitions that makes no sense but Safari decided to follow it 🙂 )

---

<div class="post-metadata">

**Author:** ![cx20](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/cx20/32/46_2.png) [@cx20](https://forum.babylonjs.com/u/cx20)\
**Post date:** [September 4, 2023, 12:27pm UTC](https://forum.babylonjs.com/t/cant-find-variable-error-occurs-only-on-safari/43798/6 "2023-09-04T12:27:26Z")

</div>

Please let me know if you know.  
There was a document on MDN that seemed to be related.  
Does this mean that it is better to use function expressions instead of function declarations in non-strict mode?

> **[Functions - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions#block-level_functions_in_non-strict_code)**
>
> Generally speaking, a function is a "subprogram" that can be called by code external (or internal, in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the function body. Values...