NEW ARTICLE
Rubyのメタプログラミングを極める：コードを自在に操る技術
  1. HOME
  2. javascript
  3. javascript エラー「Uncaught TypeError: Failed to resolve module specifier "xxx.js". Relative references must start with either "/", "./", or "../".」の解決方法

javascript エラー「Uncaught TypeError: Failed to resolve module specifier “xxx.js”. Relative references must start with either “/”, “./”, or “../”.」の解決方法

javascript エラー「Uncaught TypeError: Failed to resolve module specifier “xxx.js”. Relative references must start with either “/”, “./”, or “../”.」の解決方法

javascriptで、エラー「Uncaught TypeError: Failed to resolve module specifier “xxx.js”. Relative references must start with either “/”, “./”, or “../”.」が発生した場合の原因と解決方法を記述してます。

目次

環境

  • OS windows11 pro 64bit
  • Apache 2.4.43
  • ブラウザ chrome 105.0.5195.102
Javascript サンプル集はこちら

エラー内容

以下のコードを実行した際に発生。
※「hoge.js」は同一階層に存在します。

<script type="module">

import { foo } from "hoge.js";

</script>

「hoge.js」のコードは、以下となります。

export function foo(msg) {
    console.log(msg);
}

エラーメッセージ

Uncaught TypeError: Failed to resolve module specifier "hoge.js". 
Relative references must start with either "/", "./", or "../".

画像

firefox102の場合は、以下のエラーが発生します。

Uncaught TypeError: モジュール指定 “hoge.js” の解決時にエラーが発生しました。
モジュール指定の相対パスは “./” または “../”, “/” のいずれかで始まらなければなりません。

画像

safari15.5の場合は、以下となります。

TypeError: Module specifier, 'hoge.js' does not start with "/", "./", or "../". Referenced from

画像

原因

「module」インポート時に使用する「from」に対して、パスは「./」「../」「/」を使用する必要があるため

解決方法

「./」を使用する

<script type="module">

import { foo } from "./hoge.js";
foo('Hello World');

</script>