svelte+rollupでnem2-sdkが動かない

# はじめに

[Svelte](https://svelte.dev/)を使ってみようと思いました。

そのときに、[nem2-sdk](https://github.com/nemtech/nem2-sdk-typescript-javascript)を入れようとしたけど、できなくて、あきらめたので記事にします。

# 道程

[テンプレート](https://github.com/sveltejs/template)を使います。

```bash
npx degit sveltejs/template svelte-app
cd svelte-app
npm i
npm run dev
```

初期状態なので、当然エラーなく起動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172833/03d2675e-0843-b8c7-09e2-8793e84ca117.png)

nem2-sdk（0.17からsymbol-sdk）をインストールします。

```bash
npm i nem2-sdk@0.16.5
```

何か適当なものをインポートします。

```html:App.svelte
<script>
	export let name;

	import { NetworkType } from 'nem2-sdk'
</script>
```

起動すると、コンパイルでエラーになります。

```
[!] Error: Unexpected token (Note that you need @rollup/plugin-json to import JSON files)
node_modules\mime-db\db.json (2:40)
1: {
2:   "application/1d-interleaved-parityfec": {
                                           ^
3:     "source": "iana"
4:   },
```


`you need @rollup/plugin-json`とのことなので入れます。


```bash
npm i @rollup/plugin-json
```

設定します。

```javascript:rollup.config.js
// ...中略
import json from '@rollup/plugin-json';
// ...中略

export default {
    plugins: [
        // ...中略
        json(),
        // ...中略
    ]
}

```

起動すると、エラーになります。

```
[!] Error: 'NetworkType' is not exported by node_modules\nem2-sdk\dist\index.js
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src\App.svelte (4:10)
2:   export let name;
3:
4:   import { NetworkType } from 'nem2-sdk'
              ^
5: </script>
```

このエラーを回避するために、次のようにします。

```html:App.svelte
<script>
	export let name;

	import nem2 from 'nem2-sdk';
	const { NetworkType } = nem2;
</script>
```

起動すると、ブラウザでこのようなエラーが出ます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172833/fe21b1c4-8b40-368f-ba04-a87ef6727708.png)

`net`はNodejsのモジュールなので、ブラウザ上ではみつかりません。これを補完するライブラリを追加します。

```bash
npm i rollup-plugin-node-globals rollup-plugin-node-builtins
```

設定します。

```javascript:rollup.config.js
// ...中略
import builtins from 'rollup-plugin-node-builtins';
import globals from 'rollup-plugin-node-globals';
// ...中略

export default {
    plugins: [
        // ...中略
        globals(),
        builtins(),
        // ...中略
    ]
}

```

起動すると、次はこのエラーです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172833/3168e4bf-2416-01c5-8ab8-c35925f2c332.png)

`bufferutil`と`utf-8-validate`は、`ws`ライブラリが参照しているのですが、これらはバンドルしていないので、明示的にインストールする必要があります。

```bash
npm i --save-optional bufferutil utf-8-validate
```

起動すると、次はこのエラーです。

```
[!] Error: Bad character escape sequence (Note that you need plugins to import files that are not JavaScript)
ac34f50e6b095d78b2abb8a97f779f (1:72)
1: export default '<path>\svelte-app\node_modules\utf-8-validate'
```

これはどうやら、`utf-8-validate`がjavascriptでないソースを使っていて、それをrollupが解釈できないエラーのようです。

ですが、`ws`ライブラリはブラウザでは使わないので、[ダミーを作ります](https://github.com/websockets/ws/issues/659#issuecomment-530016495)。

```bash
npm remove utf-8-validate
mkdir ./node_modules/utf-8-validate/ && touch ./node_modules/utf-8-validate/index.js
```

（`bufferutil`はダミーにすると他のモジュールで参照エラーになります。また、npmの何かしらの操作をすると、ダミーディレクトリは消えます。）

起動すると、次はこのエラーです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172833/ce3c7365-1759-95c3-5666-42b108a354d4.png)

`safer-buffer`の`safer.js`でエラーが起きているようです。

ここから先はもうわかりません。

# webpackならいける

```bash
npx degit sveltejs/template-webpack svelte-app
cd svelte-app
npm i
npm i nem2-sdk@0.16.5
npm i --save-optional bufferutil utf-8-validate
```

```html:App.svelte
<script>
	export let name;

	import { NetworkType } from 'nem2-sdk'
</script>
```

```javascript:webpack.config.js
// ...中略
module.exports = {
    // ...中略
    node: {
        fs: 'empty',
        net: 'empty',
        tls: 'empty'
    }
};
```

```bash
npm run dev
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/172833/1e9690d4-2c6d-b520-d7e1-55b7e02bb2c7.png)