今日はWailsに関する備忘録。
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することでエラー自体は解決できることがわかったのでこちらにもメモを残しておく。