Identifier '__awaiter' has already been declared

[thislooksfun]

Describe the bug
Having multiple script tags with async functions in them results in the error:

[rollup-plugin-dynamic-import-variables] Identifier '__awaiter' has already been declared (26:9)

Logs
N/A

To Reproduce

<script context="module" lang="ts">
  async function fnA() {}
</script>

<script lang="ts">
  async function fnB() {}
</script>

<h1>This breaks</h1>

Expected behavior
I expect the page to build and render.

Stacktraces
N/A

Information about your SvelteKit Installation:

Diagnostics

System:
  OS: macOS 11.3.1
  CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 111.69 MB / 32.00 GB
  Shell: 5.8 - /bin/zsh
Binaries:
  Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
  npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
Browsers:
  Firefox: 88.0.1
  Firefox Developer Edition: 89.0
  Safari: 14.1
npmPackages:
  @sveltejs/adapter-node: ^1.0.0-next.22 => 1.0.0-next.22 
  @sveltejs/kit: next => 1.0.0-next.109
  svelte: ^3.34.0 => 3.38.2

Severity
Fairly severe. This prevents me from having an async load function and an async page-level function (like a form submit) in the same file. Thankfully I don't need that yet, but it's only a matter of time.

Additional context
N/A

[thislooksfun]

As expected I have now run into a situation where this is completely blocking my forward progress on an area of my app.

[dummdidumm]

Does the same happen without lang="ts" ? My guess is that the TypeScript transpilation adds this. I think there's a way to tell TS to not add these helpers and instead rely on them being added once somewhere else: https://www.typescriptlang.org/tsconfig#importHelpers you need to install tslib then. if that works then I'd say this is a good addition to the starter template.

[thislooksfun]

That's the weird part, I have tslib installed and importHelpers is set to true. I'll try without ts once I get back to my computer, but I do know I am unable to reproduce the issue in REPL, which is why I opened the issue here instead of the main lang repo.

[thislooksfun]

Actually hold on, I know it's not TS. I have "target": "ES2019" in my tsconfig. Async/await was ES2017, so ts shouldn't be polyfilling it. I'll still check plain js to be extra sure, but it really feels like it's whatever Babel-like step kit is doing, not the TS compilation.

[thislooksfun]

Alright, testing done, removing lang="ts" does cause the issue to go away, but it still doesn't make sense as to why it's happening in the first place.

[dummdidumm]

The importHelpers setting works, but the problem is that it's imported twice. The root cause is svelte-preprocess because it transpiles each script independently, not knowing that the helper was already imported.

What you can do in the meantime is the opposite of my initial suggestion: Set importHelpers to false. It results in some code duplication but it will build. You could also try to set noEmitHelpers to true and provide the tslib implementation globally somehow.

[dummdidumm]

Closing as this is not a Kit issue. I opened sveltejs/svelte-preprocess#373

[constantant]

What you can do in the meantime is the opposite of my initial suggestion: Set importHelpers to false.

Also you can move the async functionality to a separate ts module and export what you need directly from it.

// module.ts
export const load: Load = async ({ page }) => {
  const item = await store.get(page.params.item);
  return {
    props: { item }
  };
};

// component.svelte
<script lang="ts" context='module'>
  export { load } from './module';
</script>