【webpack】json-loaderで『Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = [{"...'』の解決方法

Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = [{"...'

エラーについて

webpack で json-loader を用いて JSON ファイルを読み込む際に、

const json = require("data.json");

以下のエラーが出ることがある。

ERROR in ./src/data.json
Module parse failed: Unexpected token m in JSON at position 0 while parsing near 'module.exports = [{"...'
You may need an appropriate loader to handle this file type.

解決方法

webpack.config.js の JSON ファイルに関する rules を、以下のように記述すると解消される。

module: {
  rules: [
    {
      test: /\.json$/,
      loader: "json-loader",
      type: "javascript/auto"
    }
  ]
}

type: "javascript/auto" の部分が必要だったようである。

補足： json-loader

require から JSON の読み込みを可能にする loader である。

1. インストール方法

   # npm の場合
   npm install json-loader --save-dev
   
   # yarn の場合
   yarn add json-loader --dev
   

2. webpackの記述方法

   module: {
     rules: [
       {
         test: /\.json$/,
         loader: "json-loader",
         type: "javascript/auto"
       }
     ]
   }