The provided value is not an absolute path!の原因と対処法

本記事では、Webpackの設定ファイルが原因で起きる「The provided value is not an absolute path!」の原因と対処法について解説しています。

Webpackの学習におすすめ動画
モジュールバンドラー webpackを1日で習得！
フルスクラッチでインストールからカスタマイズまでを理解する

動画情報
作成者	はむさん
学習時間	6.5時間
受講者数	2,572人
レビュー	(361件)

動画の詳細はこちら

エラーの原因と対処法

このエラーが起きる原因は、絶対パスで設定すべき場所を相対パスで設定していることです。

例えば、webpack.config.jsファイルのoutput:{path:”パス”}は絶対パスで指定する必要があるため、下記のような設定でwebpackを実行すると同じエラーが返ってきます。

module.exports = {
  entry: "./src/index.js",
  output: {
    path: "./dist", // -> エラーの原因！！
    filename: "main.js",
  },
}

Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration.output.path: The provided value "./dist" is not an absolute path!
-> The output directory as **absolute path** (required).

これをエラーを返さないようにするためには、下記のように記述を変更します。

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "./dist"), // -> 絶対パスで指定！！
    filename: "main.js",
  },
};