at backyard

Color my life with the chaos of trouble.

wailsでbuild後のバイナリを起動した際に xxx is not a function というJavaScriptのエラーが出ることについて

今日はWailsに関する備忘録。

github.com

wails dev コマンドを用いてdevモードで起動している際には正常に動いていたJavaScriptの処理が、ビルドしたバイナリからアプリを起動した場合にだとエラーになる問題を発見した。

具体的なサンプルコードをいかに示す。
(サンプルと言ってもwailsでプロジェクトを作成後に生成されるコードを少し修正したものになる)

import { useState } from "react";
import logo from "./assets/images/logo-universal.png";
import "./App.css";
import dayjs from "dayjs";
// 下記だと build 後のバイナリから起動した場合にエラーで動かない
// import * as dayjs from 'dayjs';

function App() {
  const [resultText, setResultText] = useState("");

  function onClick() {
    setResultText(dayjs().format());
  }

  return (
    <div id="App">
      <img src={logo} id="logo" alt="logo" />
      <div id="result" className="result">{resultText}</div>
      <button className="btn" onClick={onClick}>Click</button>
    </div>
  );
}

export default App;

このコード内で dayjs をimportしている部分だが、 import * as という形でimportしている場合、wails buildで生成したバイナリからアプリを起動するとimportした処理が下記のような形でエラーになる。
Click ボタンを押して dayjs().format() が呼ばれた箇所でエラーになる)

xxx is not a function.

build 実施時にminifyされているので、関数名自体は dayjs ではなくなっているが、呼ばれているもとは dayjs となる

なお、このエラーログは

wails build -debug

という形でデバッグ確認ができる形でビルドを実施し、バイナリから起動したアプリ上で右クリックメニューを出して Inspect Element を選択することで表示されるDevtools上のconsoleから確認できる。

このようなエラーがでる詳細についてはまだ追えていないが、ひとまず import dayjs from "dayjs"; という形でimportすることでエラー自体は解決できることがわかったのでこちらにもメモを残しておく。