0

I have 2 javascript files where I defined a statemachine code(using XState). I want to refer this statemachine object in my main site.js file. No matter what I do, I can't seem to access the variable from one javascript file into another.

SMScript.js:

const { createMachine, actions, interpret, assign } = XState;
const myMachine = createMachine(...);
const rowDoubleClickService = interpret(rowDoubleClickMachine)
    .onTransition((state) => { 
        console.log('current state: ' + state.value); 
        console.log('STATE JSON: ' + JSON.stringify(state.value)); 
        console.log('done: ' + state.done); });

site.js

function callSM(){
try {
 rowDoubleClickService.stop();
 } catch (error) { console.log('caught error: ' + error.message); }
 rowDoubleClickService.start();
}

_Layout.cshtml:

<script type="module" src="~/js/xstate.bundle.js"></script>
<script type="text/javascript" src="~/js/SMScript.js" asp-append-version="true"></script>
<script type="text/javascript" src="~/js/site.js" asp-append-version="true"></script>

In my browser console, I ge tthe error "Uncaught Reference: XState is not defined." It is complaining about the first line in my SMScript.js. I have included the xstate.bundle.js as a module in my _Layout file. Any help is appreciated.

SoftwareDveloper
  • 559
  • 1
  • 5
  • 18
  • 1
    Module-scoped variables aren't implicitly global like they are in standard script tags. Best approach would be to move everything into the module system and export `XState` from its module so it can be imported elsewhere. – CertainPerformance Dec 14 '22 at 20:12

0 Answers0