JavaScript
JSON
webpack
json-loader

【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"
        }
      ]
    }