Sapper usage

Simply using the default Sapper webpack template:

$ npx degit sveltejs/sapper-template my-app
$ cd my-app/
$ npm i
$ npm i svelte-i18n

with src/client.js including the svelte-i18n example (only destructured import { i18n } to avoid an import error, want me to open another issue?) like so:

import * as sapper from '../__sapper__/client.js';

import { i18n } from 'svelte-i18n'
import { Store } from 'svelte/store'

/** i18n(svelteStore, { dictionary }) */
let store = new Store()

store = i18n(store, {
  dictionary: {
    'pt-BR': {
      message: 'Mensagem',
      greeting: 'Olá {name}, como vai?',
      greetingIndex: 'Olá {0}, como vai?',
      meter: 'metros | metro | metros',
      book: 'livro | livros',
      messages: {
        alert: 'Alerta',
        error: 'Erro',
      },
    },
    'en-US': {
      message: 'Message',
      greeting: 'Hello {name}, how are you?',
      greetingIndex: 'Hello {0}, how are you?',
      meter: 'meters | meter | meters',
      book: 'book | books',
      messages: {
        alert: 'Alert',
        error: 'Error',
      },
    },
  },
})

/**
 * Extend the initial dictionary.
 * Dictionaries are deeply merged.
 * */
store.i18n.extendDictionary({
  'pt-BR': {
    messages: {
      warn: 'Aviso',
      success: 'Sucesso',
    },
  },
  'en-US': {
    messages: {
      warn: 'Warn',
      success: 'Success',
    },
  },
})

/** Set the initial locale */
store.i18n.setLocale('en-US')


sapper.start({
  target: document.querySelector('#sapper'),
  store
});

With

$ npm run dev

In my browser I get:

client.js:91 Uncaught TypeError: fn is not a function
    at set_store (client.js:91)
    at Module.start (client.js:386)
    at Module../src/client.js (client.js:59)
    at __webpack_require__ (bootstrap:767)
    at bootstrap:903
    at bootstrap:903
set_store @ client.js:91
start @ client.js:386
./src/client.js @ client.js:59
__webpack_require__ @ bootstrap:767
(anonymous) @ bootstrap:903
(anonymous) @ bootstrap:903

[laurentpayot]

@rveciana yes I could get svelte-i18n run in Sapper for Svelte 2.x. The problem is that the store returned by the server must be serializable (i.e. without function). So inside the sapper middleware store hook of the server you must delete the _ function attribute that svelte-i18n adds to the store before sending it. See https://github.com/sveltejs/sapper/issues/230 for more details.

Recently I had some issues (weird dependencies problems) with svelte-i18n but instead of fixing them I’m waiting for i18n support in Svelte/Sapper 3. 🤞

IMHO if you are starting a new Svelte app, you should use Svelte 3 latest beta (along with Sapper v0.26.0-alpha.3) and wait for its i18n system to avoid rewriting everything soon… 😉

[laurentpayot]

My bad. Sapper client start store property must be a function. So for the above example:

sapper.start({
  target: document.querySelector('#sapper'),
  store: data => {
    // `data` is whatever was in the server-side store
    store.set(data);
    return store;
  }
});

Thanks anyway @kaisermann