0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Day 23

初アドカレにひとりで挑戦🎄🦌🎁 Advent Calendar 2025

@Ryuki4648(yuki)

フロントエンドのエラー「ERROR:TypeError: Failed to construct 'URL': Invalid URL」の原因と解決方法

0
Last updated at Posted at 2025-12-24

はじめに

ローカルのモックに接続してログインを試みた際にエラーが発生したので、原因と解決方法について記載します。

目次

前提

run_local.shファイルには

#!/bin/bash
echo "Load Environment Parameters"
echo
export STAGE="$1"
echo "STAGE = "$STAGE

ENV_FILE="./env/.env."$STAGE
echo "ENV_FILE = "$ENV_FILE
export $(cat $ENV_FILE | grep -v ^# | xargs)

echo

echo "==============================="
echo "Environment Parameters"
echo "==============================="

echo "VITE_ENV = "$VITE_ENV
echo "VITE_LOG_LEVEL = "$VITE_LOG_LEVEL

echo "VITE_API_ENDPOINT = "$VITE_API_ENDPOINT

echo

while true; do
  read -p 'Do you want to deploy with those parameters? [Y/n]' Answer
  case $Answer in
    [Yy]* )
      break;
      ;;
    * )
      echo Stoped
      exit 0
  esac
done;

echo

echo "React Start"
yarn dev

が記載されており、

env/.env.local.mockファイルには

############################################################
# 環境を表現する値 (development, staging, production 等)
############################################################
VITE_ENV='development'

############################################################
# ログレベル (debug, info, warn, error 等)
############################################################
VITE_LOG_LEVEL='info'

############################################################
# Backend API Endpoint
# 末尾は / で終わらないように設定してください。
############################################################
VITE_API_ENDPOINT='http://localhost:4010/'

############################################################
# ドキュメント BaseURL
############################################################
VITE_DOCUMENT_BASE_URL=''

が記載されているものとします。

起動方法

./run_local.sh local.mock を実行します。

username % ./run_local.sh local.mock

Load Environment Parameters

STAGE = local.mock
ENV_FILE = ./env/.env.local.mock

===============================
Environment Parameters
===============================
VITE_ENV = development
VITE_LOG_LEVEL = info
VITE_API_ENDPOINT = http://localhost:4010

Do you want to deploy with those parameters? [Y/n]y

React Start
yarn run v1.22.22
$ vite

  VITE v6.3.4  ready in 115 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

「Do you want to deploy with those parameters」と尋ねられるので、「Y」を入力してEnterを押下。

すると http://localhost:3000/ に遷移します。

しかしログイン画面でログインを試みると、次のエラーが発生しました。（ログイン情報は正しい）

エラー内容

installHook.js:1 ERROR:TypeError: Failed to construct 'URL': Invalid URL

installHook.js:1 TypeError: Failed to construct 'URL': Invalid URL
    at axios.js?v=99936515:1353:9
    at resolveConfig_default (axios.js?v=99936515:1515:53)
    at dispatchXhrRequest (axios.js?v=99936515:1529:21)
    at new Promise (<anonymous>)
    at xhr (axios.js?v=99936515:1528:10)
    at Axios.dispatchRequest (axios.js?v=99936515:2003:10)
    at async Axios.request (axios.js?v=99936515:2115:14)
    at async _AuthApi.login (auth-api.ts:52:22)
    at async LogDecorator.descriptor.value (log-decorator.ts:10:20)
    at async hooks.ts:27:47
    at Axios.request (axios.js?v=99936515:2119:41)
    at async _AuthApi.login (auth-api.ts:52:22)
    at async LogDecorator.descriptor.value (log-decorator.ts:10:20)
    at async hooks.ts:27:47
    at async react-hook-form.js?v=99936515:1469:9

The above error occurred in the <LoginPage> component.

React will try to recreate this component tree from scratch using the error boundary you provided, RenderErrorBoundary.

エラー内容が記載されたキャプチャ。「ERROR:TypeError: Failed to construct 'URL': Invalid URL」

エラー文

Failed to construct 'URL': Invalid URL
→ 「URLコンストラクタに渡している文字列が不正」という意味。
＝ URLとして不正な文字列が渡っている と考えられる。

それから at async _AuthApi.login (auth-api.ts:52:22)
とあり、ここが怪しそうなので一度確認します。

原因と思われるファイルを確認

1）src/core/api/auth/auth-api.tsファイル

export class AuthApi implements Api<LoginInput>, ApiQueryParamsParser {
  readonly endpoint = `${API_ENDPOINT}/token`;

  protected readonly axiosClient: AxiosInstance;

  /**
   * @param axiosClient 利用したい Axios Client
   */
  private constructor(axiosClient?: AxiosInstance) {
    this.axiosClient = axiosClient ?? axiosClientWithoutJwtToken();
  }

  static getInstance(axiosClient?: AxiosInstance): AuthApi {
    return new AuthApi(axiosClient);
  }

  /** ログイン（トークン発行）API */
  @LogDecorator
  async login(params: LoginApiParams): Promise<LoginApiResponse> {
    const response = await this.axiosClient.post(`${this.endpoint}`, params);
    return response.data;
  }

  /** アクセストークン再発行API */
  @LogDecorator
  async getToken(params: RefreshTokenApiParams): Promise<RefreshTokenApiResponse> {
    const response = await this.axiosClient.post(`${this.endpoint}/refresh`, params);
    return response.data;
  }

  sanitizeQueryParams(params?: ApiQueryParams): ApiQueryParams {
    return sanitizeQueryParams(params);
  }
}

auth-api.tsではURLを作成しておらず、特に問題はなさそうに見えます。

次に、auth-api.tsファイルで使われている 「API_ENDPOINT」 を定義しているファイルを確認。

2）src/core/config/environment.tsファイル

import { LogLevel } from '@/core/config/logger';

export const API_ENDPOINT = import.meta.env.VITE_API_ENDPOINT + `api`;

export const LOG_LEVEL = (import.meta.env.VITE_LOG_LEVEL || 'info') as LogLevel;

export const Environment = {
  name: import.meta.env.VITE_ENV,
};

原因

前述のsrc/core/config/environment.tsファイルでは「import.meta.env.VITE_API_ENDPOINT + api」となっています。

ここでenvファイルを確認します。

envファイル

env/.env.local.mock

############################################################
# 環境を表現する値 (development, staging, production 等)
############################################################
VITE_ENV='development'

############################################################
# ログレベル (debug, info, warn, error 等)
############################################################
VITE_LOG_LEVEL='info'

############################################################
# Backend API Endpoint
# 末尾は / で終わらないように設定してください。
############################################################
VITE_API_ENDPOINT='http://localhost:4010'

############################################################
# ドキュメント BaseURL
############################################################
VITE_DOCUMENT_BASE_URL=''

となっていました。

VITE_API_ENDPOINTが http://localhost:4010 なので、
src/core/config/environment.tsファイルでの「import.meta.env.VITE_API_ENDPOINT + api」は

http://localhost:4010api となってしまうことが分かりました。
これにより'URL': Invalid URLのエラーが発生していました。

解決方法

envファイル

VITE_API_ENDPOINT='http://localhost:4010'

　↓↓

VITE_API_ENDPOINT='http://localhost:4010/'

末尾にスラッシュを追加しました。

再度ターミナルで./run_local.sh local.mockを起動。
http://localhost:3000/ に遷移し、ログインを試みたところ、正常に動作しました。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?