From 93f14c92e414a89454a4b3cfe8c33306066b4efe Mon Sep 17 00:00:00 2001
From: Vegard Andreas Larsen <vegard@digitalcreations.no>
Date: Tue, 13 Apr 2021 01:25:15 +0200
Subject: [PATCH] Fix "Cannot use import statement outside a module" (#594)

* Fix "Cannot use import statement outside a module"

Using `HamburgerMenu` from a SvelteKit project would result in the following error:

```
4:01:51 PM [vite] Error when evaluating SSR module /node_modules/carbon-components-svelte/src/UIShell/SideNav/HamburgerMenu.svelte:
/home/vegard/beat/backoffice-sapper/node_modules/carbon-icons-svelte/lib/Close20/index.js:1
import Close20 from "./Close20.svelte";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1101:16)
    at Module._compile (internal/modules/cjs/loader.js:1149:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1205:10)
    at Module.load (internal/modules/cjs/loader.js:1034:32)
    at Function.Module._load (internal/modules/cjs/loader.js:923:14)
    at Module.require (internal/modules/cjs/loader.js:1074:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at nodeRequire (/home/vegard/beat/backoffice-sapper/node_modules/vite/dist/node/chunks/dep-66eb515d.js:69044:17)
    at ssrImport (/home/vegard/beat/backoffice-sapper/node_modules/vite/dist/node/chunks/dep-66eb515d.js:69002:20)
    at eval (/node_modules/carbon-components-svelte/src/UIShell/SideNav/HamburgerMenu.svelte:7:31) (x3)
```

To fix it, we need to reference the `.svelte` files for the icons.

* Fix DataTable icon import.
---
 src/DataTable/DataTable.svelte           | 2 +-
 src/UIShell/SideNav/HamburgerMenu.svelte | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/DataTable/DataTable.svelte b/src/DataTable/DataTable.svelte
index 5700ecc2..540ce72a 100644
--- a/src/DataTable/DataTable.svelte
+++ b/src/DataTable/DataTable.svelte
@@ -93,7 +93,7 @@
 
   import { createEventDispatcher, setContext } from "svelte";
   import { writable, derived } from "svelte/store";
-  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16";
+  import ChevronRight16 from "carbon-icons-svelte/lib/ChevronRight16/ChevronRight16.svelte";
   import { InlineCheckbox } from "../Checkbox";
   import { RadioButton } from "../RadioButton";
   import Table from "./Table.svelte";
diff --git a/src/UIShell/SideNav/HamburgerMenu.svelte b/src/UIShell/SideNav/HamburgerMenu.svelte
index c34c50e0..7cbad33e 100644
--- a/src/UIShell/SideNav/HamburgerMenu.svelte
+++ b/src/UIShell/SideNav/HamburgerMenu.svelte
@@ -11,8 +11,8 @@
   /** Obtain a reference to the HTML button element */
   export let ref = null;
 
-  import Close20 from "carbon-icons-svelte/lib/Close20";
-  import Menu20 from "carbon-icons-svelte/lib/Menu20";
+  import Close20 from "carbon-icons-svelte/lib/Close20/Close20.svelte";
+  import Menu20 from "carbon-icons-svelte/lib/Menu20/Menu20.svelte";
   import { Icon } from "../../Icon";
 </script>