症状

reactでSPAアプリ開発中に以下のエラーが発生しました。翻訳すると、「終了していない正規表現」でした。

error

 Unterminated regular expression

import {homeURL,userCreateURL,signInURL} from "../urls/index";
import {useHistory} from "react-router-dom";

export const Hoge = () => {
  const history = useHistory();

  function signUpHandle() {
    history.push(userCreateURL)
  }

  function signInHandle() {
    history.push(signInURL)
  }

  return(
    <Button color="inherit" onClick={() => signUpHandle()} btnLabel={新規登録}></Button>
    <Button color="inherit" onClick={() => signInHandle()} btnLabel={サインイン>サインイン</Button>
)
}

解決方法

サインインのbtrLabelの{}の閉じかっこを追加したら、解決されました。このエラーは、「文字列リテラルは単一引用符 (') または二重引用符 (") で囲む必要」があり、btnLabelの{}が閉じられていなかったため、後半のサインインまでもbtnlabelとして認識されていたようです。(なお、2重でサインインを書く必要はそもそもないです)

import {homeURL,userCreateURL,signInURL} from "../urls/index";
import {useHistory} from "react-router-dom";

export const Hoge = () => {
  const history = useHistory();

  function signUpHandle() {
    history.push(userCreateURL)
  }

  function signInHandle() {
    history.push(signInURL)
  }

  return(
    <Button color="inherit" onClick={() => signUpHandle()} btnLabel={新規登録}></Button>
    <Button color="inherit" onClick={() => signInHandle()} btnLabel={サインイン}>サインイン</Button>
)
}

症状

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal