【Remix】外部スクリプトを読み込んでクライアント側でその関数を実行したい

Question

実現したいこと

Remixを使用したプロジェクトにて、外部javascriptを読み込み
default export内でそのjavascript内の関数を実行、更にそのままFormのバリデーションを行いたいです。バリデーションはconformを使っています。

発生している問題・分からないこと

外部Javascriptの実行やその後のバリデーション実行、actionメソッドへの渡し方の流れがわからないです。

該当のソースコード

export const handle: ExternalScriptsHandle = {
    scripts: [
        {
            src: "https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js",
            async: true,
        },
    ],
};

export default function User {
    const actionData = useActionData<typeof action>();
    const [form, fields] = useForm({
        lastResult: actionData?.lastResult,
        onValidate({ formData }) {
            return parseWithZod(formData, { schema: UserSchema });
        },
        shouldValidate: "onBlur",
        shouldRevalidate: "onBlur",
    });

    return (
        //省略
        <UserForm
        // 色々引数
        // 色々引数
        form={form}
        fields={fields}
        >
    );
}

export default function UserForm(割愛){

    //色々割愛
    <Form method="PUT" {...getFormProps(form)}>
        <BootstrapForm.Control
            className={clsx({ "is-invalid": fields.user_id.errors })}
            autoComplete="user_id"
            placeholder="•••• •••• •••• ••••"
            {...getInputProps(fields.user_id, { type: "text" })}
        />
        <BootstrapForm.Control.Feedback type="invalid">{fields.user_id.errors}</BootstrapForm.Control.Feedback>
    </Form>
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

javascriptの読み込みはExternalScriptsHandleを使用して、body内で読み込むまでは完了しています。
（以下をdefault exportのファイルに記述済み）

export const handle: ExternalScriptsHandle = {
    scripts: [
        {
            src: "https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js",
            async: true,
        },
    ],
};

補足

useFormでonSubmitを指定するとバリデーション後に実行される関数を指定できるとのことで、以下まで書いてみました。こちらで値設定、エラーハンドリングができる方法があればこちらでの解決法をご教示ください。

const [form, fields] = useForm({
    lastResult: actionData?.lastResult,
    onValidate({ formData }) {
        return parseWithZod(formData, { schema: UserSchema });
    },
    shouldValidate: "onBlur",
    shouldRevalidate: "onBlur",
    onSubmit: afterDoing,
});

async function afterDoing() {
    if (typeof window !== "undefined" && (window as any)._?.shuffle) {
        const shuffled = (window as any)._?.shuffle([1, 2, 3, 4]);
        setResult(`シャッフル結果: ${shuffled.join(", ")}`);
    } else {
        setResult("lodash がまだロードされていないか、関数が見つかりません");
    }

    // TODO:ここで値セットできるか？
    // TODO:エラー対応もしたい、エラー設定方法は？
};

Answer 1

e.preventDefaultの追加とUseStateを使用して手動でエラーメッセージを設定するようにしました。

const [lastResult, setLastResult] = useState(actionData?.lastResult ?? null);

onSubmit: async (e, context) => {
    e.preventDefault();
    const { submission, formData } = context;
    if (!submission) return;
    if (typeof window !== "undefined" && (window as any)._?.shuffle) {
        const shuffled = (window as any)._?.shuffle([1, 2, 3, 4]);
        setResult(`シャッフル結果: ${shuffled.join(", ")}`);
    } else {
        setLastResult("lodash がまだロードされていないか、関数が見つかりません");
        return;
    }

    submit(formData, {method: "POST"});
};