export declarations may only appear at top level of a module

[rpf3]

I'm facing an issue that seems very similar to #328 however it is occurring at runtime. I'm trying to add Routify to an existing application and getting the following error:

Firefox

Uncaught SyntaxError: export declarations may only appear at top level of a module

Brave

Uncaught SyntaxError: Unexpected token 'export'

I've gone through the documentation and changed my rollup.config.js output.format to esm as well as using output.dir instead of output.file.

I also found this similar issue in Sapper repo but it was closed without any comment/resolution.

---

app.ts

import App from './App.svelte';

const app = new App({
  target: document.body
});

export default app;

---

App.svelte

<script>
  import { Router } from '@roxy/routify';
  import { routes } from '../.routify/routes';
</script>

<Router {routes} />

---

rollup.config.js

import svelte from 'rollup-plugin-svelte';
import sveltePreprocess from 'svelte-preprocess';
import css from 'rollup-plugin-css-only';
import typescript from '@rollup/plugin-typescript';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';

const production = !process.env.ROLLUP_WATCH;

var serve = function() {
  let server;

  var toExit = function() {
    if (server) {
      server.kill(0);
    }
  }

  return {
    writeBundle() {
      if (server) {
        return;
      }

      server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
        stdio: ['ignore', 'inherit', 'inherit'],
        shell: true
      });

      process.on('SIGTERM', toExit);
      process.on('exit', toExit);
    }
  }
}

export default {
  input: 'src/app.ts',
  output: {
    name: 'app',
    sourcemap: true,
    format: 'esm',
    dir: 'public/build'
  },
  plugins: [
    svelte({
      preprocess: sveltePreprocess({
        sourceMap: !production
      }),
      compilerOptions: {
        dev: !production
      }
    }),

    css({
      output: 'app.css'
    }),

    resolve({
      browser: true,
      dedupe: ['svelte']
    }),

    commonjs(),

    typescript({
      sourceMap: !production,
      inlineSources: !production
    }),

    !production && serve(),

    !production && livereload('public')
  ]
}

[jakobrosenberg]

Is there a stack trace? It's a little hard to troubleshoot without knowing the origin and I haven't seen the error before.

[rpf3]

There unfortunately isn't a stack trace. No exceptions are raised by the server and the only error is in the client-side JavaScript. The error points to the export statement in the JavaScript file which has been generated by Rollup; specifically the last line as it appears above in my app.ts file.

I think this issue may not be with Routify itself but that there might just be some part missing from the documentation on adding Routify to an existing project. Or I'm just misunderstanding something that is already documented. I am also able to reproduce this error by simply cloning the Svelte template project and changing the Rollup output.format to esm.

Please let me know if there is more information you need to assist or if you think this issue is inappropriate here and should be raised elsewhere.

[jakobrosenberg]

I am also able to reproduce this error by simply cloning the Svelte template project and changing the Rollup output.format to esm.

If Jest can't handle ESM code you need to set dynamicImports to false for Routify and set output.format to iife or commonjs in Rollup. Personally I would look into configuring Jest for ESM if possible.

[rpf3]

Sorry for the confusion but I'm not following what this has to do with Jest.

[jakobrosenberg]

https://jestjs.io/docs/ecmascript-modules

[rpf3]

I've discovered the issue is related to how the script is being loaded and I've opened the following PR on the docs to hopefully help anyone else in the future.

roxiness/routify.dev#224