How do I create global variables I can use across my modules?

Question

I import scene from file sceneSetup.js into initFloor1.js and get error ReferenceError: scene is not defined Can't find solution of this issue and can't understand if it is the issue of javascript or Threejs

sceneSetup.js:

export let camera, controls, renderer, labelRenderer, renderer3D, arrow, label, scene;

initFloor1.js:

import * as THREE from 'three';
import { camera, controls, renderer, labelRenderer, renderer3D, arrow, label, scene } from './../sceneSetup.js'
            
export function initFloor1() {
                
    scene = new THREE.Scene();

My project folder:

|- src
|  |- 3d-scene
|     |- sceneSetup.js
|     |- Floor1  
|        |- initFloor1.js

JavaScript library. It is imported in "initFloor1.js", as u see — 10k20, Mar 01 '21 at 10:56
The exports from `sceneSetup.js` are all undefined. Why do you think the would be defined? — evolutionxbox, Mar 01 '21 at 10:56
The error I'm getting is "scene is read-only". Not sure you can just export single variables like that. See also here: https://stackoverflow.com/questions/32558514/javascript-es6-export-const-vs-export-let — , Mar 01 '21 at 11:00
Export an object instead: https://codesandbox.io/s/lucid-allen-on5s2?file=/src/sceneSetup.js — , Mar 01 '21 at 11:02
The variables have no value, that's why they're undefined. Where do you think they should be getting their values from? — evolutionxbox, Mar 01 '21 at 11:03
@evolutionxbox This is not about the variables initially being undefined, at all. OP is trying to create global variables, and trying to *assign a value* to `scene`, not read from it. OP does *not* expect scene to have a value despite it clearly having none. — , Mar 01 '21 at 11:04
@ChrisG yup yup, I see that now. https://stackoverflow.com/questions/38060519/es6-import-as-a-read-only-view-understanding might help — evolutionxbox, Mar 01 '21 at 11:09

score 0 · Answer 1 · answered Mar 01 '21 at 11:13

Solution, suggested by ChrisG : export an object and edit its values

const globals = {
      camera: null,
      controls: null,
      renderer: null,
      labelRenderer: null,
      renderer3D: null,
      arrow: null,
      label: null,
      scene: null
    };
    
    export { globals };

MSQ · Answer 2 · 2021-03-01T12:09:12.713

-1

Use window.variableName to declare in central place and then you can access across the site.

window.camera=null;
window.controls=null;

etc.

edited Mar 01 '21 at 12:09

answered Mar 01 '21 at 11:22

MSQ

489
5
15

I assume the OP is trying to avoid this – evolutionxbox Mar 01 '21 at 11:23
Well this is one way OP can use. I shared because this is valid way and I use it across the site.. – MSQ Mar 01 '21 at 11:28
This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - [From Review](/review/low-quality-posts/28433971) – Eydrian Mar 01 '21 at 11:53
@Eydrian :Revised for better understanding – MSQ Mar 01 '21 at 12:09

How do I create global variables I can use across my modules?

2 Answers2