CODEWITHSUNDEEP
javascriptnode.jssvelte
Kev
Kev

Reputation: 16341

Difference between Svelte REPL and local output

TL;DR: Online REPL (Svelte 1.9.1) works, but local is broken. The question: what am I doing wrong, locally?

The following code works in this REPL:

  {{grades}}<br>
  {{#each guesses as guess, i}}
      {{#each guess as slot}}
        {{slot}}
      {{/each}}
        =
      {{ grades[i] }}
  {{/each}}


<script>
  export default {
    data () {
      return {
        guesses: [
          [0, 1, 1, 3, 6],
        ],
        grades: [
          [1, 2, 2],
        ],
      }
    },
  };
</script>

That is, it produces the output:

1,2,2

01136 = 1,2,2

However, locally (Svelte 1.9.1 on Linux Mint 18.1, 64-bit), that exact same file produces this output:

1,2,2

01136 = undefined

As you can see, it accesses grades just fine, but not grades[i] within the #each loop. The console reports no errors.

One other mysterious thing

If I remove these lines:

      {{#each guess as slot}}
        {{slot}}
      {{/each}}

...then the local rendering becomes:

1,2,2

= 1,2,2

So how does that #each block make grades[i] undefined all of the sudden...but only locally?

Additional environment info

The local version is pulled in via the following:

Game.js

import Game from '../components/Game.html';

const GameComponent = new Game({
  target: document.querySelector('main'),
});

export default GameComponent;

main.js

/* eslint-disable no-unused-vars */

import Game from './js/Game';

index.html

<!doctype html>
<html>
<head>
  <title>CheaterMind</title>
  <link rel="stylesheet" type="text/css" href="colours.css">
</head>
<body>
  <main></main>
  <script src='../dist/main.js' charset='utf-8'></script>
</body>
</html>

The setup is a copy of https://github.com/charpeni/svelte-example and I'm using npm run build:watch.

Upvotes: 0

Views: 268

Answers (1)

Kev
Kev

Reputation: 16341

Update to svelte 1.9.1 locally with yarn upgrade svelte.

Upvotes: 0

Related Questions