title: Unexpected token m in JSON at position 0 error
body: <p>On compiling an app and trying to implement the i18n library with webpack, I face this error:</p>
  
  <pre><code>ERROR in ./node_modules/bundle-loader?lazy&amp;name=lang-pt!./src/locales/pt/translation.json
  Module parse failed: Unexpected token m in JSON at position 0
  You may need an appropriate loader to handle this file type.
  SyntaxError: Unexpected token m in JSON at position 0
      at JSON.parse (&lt;anonymous&gt;)
      at JsonParser.parse (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\JsonParser.js:15:21)
      at doBuild.err (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\NormalModule.js:367:32)
      at runLoaders (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\NormalModule.js:264:12)
      at C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:370:3
      at iterateNormalLoaders (C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
      at C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:183:6
      at runSyncOrAsync (C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
      at C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:175:3
      at loadLoader (C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\loadLoader.js:36:3)
      at iteratePitchingLoaders (C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:169:2)
      at runLoaders (C:\Users\vasco.bento\ContactosWebPack\node_modules\loader-runner\lib\LoaderRunner.js:362:2)
      at NormalModule.doBuild (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\NormalModule.js:219:3)
      at NormalModule.build (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\NormalModule.js:337:15)
      at Compilation.buildModule (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\Compilation.js:346:10)
      at factory.create (C:\Users\vasco.bento\ContactosWebPack\node_modules\webpack\lib\Compilation.js:572:15)
   @ ./node_modules/aurelia-i18n/dist/native-modules/aurelia-i18n.js
   @ ./src/main.js
   @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
   @ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper
  
  ERROR in chunk app [entry]
  [name].[hash].bundle.js
  Cannot read property 'replace' of undefined
  </code></pre>
  
  <p>This repeats for the other language I have in the locales folder, which is correctly placed in the src folder, even if the JSON files are completely empty, the same error occurs.</p>
  
  <p>Here's the webconfig.js file:</p>
  
  <pre><code>const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CopyWebpackPlugin = require('copy-webpack-plugin');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const project = require('./aurelia_project/aurelia.json');
  const {
      AureliaPlugin,
      ModuleDependenciesPlugin
  } = require('aurelia-webpack-plugin');
  const {
      ProvidePlugin
  } = require('webpack');
  const {
      BundleAnalyzerPlugin
  } = require('webpack-bundle-analyzer');
  
  // config helpers:
  const ensureArray = (config) =&gt; config &amp;&amp; (Array.isArray(config) ? config : [config]) || [];
  const when = (condition, config, negativeConfig) =&gt;
      condition ? ensureArray(config) : ensureArray(negativeConfig);
  
  // primary config:
  const title = 'Aurelia Navigation Skeleton';
  const outDir = path.resolve(__dirname, project.platform.output);
  const srcDir = path.resolve(__dirname, 'src');
  const nodeModulesDir = path.resolve(__dirname, 'node_modules');
  const baseUrl = '/';
  
  const cssRules = [{
      loader: 'css-loader'
  }];
  
  module.exports = ({
      production,
      server,
      extractCss,
      coverage,
      analyze
  } = {}) =&gt; ({
      resolve: {
          extensions: ['.js'],
          modules: [srcDir, 'node_modules']
      },
      entry: {
          app: ['aurelia-bootstrapper'],
          vendor: ['bluebird']
      },
      mode: production ? 'production' : 'development',
      output: {
          path: outDir,
          publicPath: baseUrl,
          filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
          sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
          chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
      },
      performance: {
          hints: false
      },
      devServer: {
          contentBase: outDir,
          // serve index.html for all 404 (required for push-state)
          historyApiFallback: true
      },
      devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',
      module: {
          rules: [
              // CSS required in JS/TS files should use the style-loader that auto-injects it into the website
              // only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
              {
                  test: /\.css$/i,
                  issuer: [{
                      not: [{
                          test: /\.html$/i
                      }]
                  }],
                  use: extractCss ? ExtractTextPlugin.extract({
                      fallback: 'style-loader',
                      use: cssRules
                  }) : ['style-loader', ...cssRules]
              },
              {
                  test: /\.css$/i,
                  issuer: [{
                      test: /\.html$/i
                  }],
                  // CSS required in templates cannot be extracted safely
                  // because Aurelia would try to require it again in runtime
                  use: cssRules
              },
              {
                  test: /\.html$/i,
                  loader: 'html-loader'
              },
              {
                  test: /\.js$/i,
                  loader: 'babel-loader',
                  exclude: nodeModulesDir,
                  options: coverage ? {
                      sourceMap: 'inline',
                      plugins: ['istanbul']
                  } : {}
              },
              {
                  test: /\.json$/i,
                  loader: 'json-loader'
              },
              // use Bluebird as the global Promise implementation:
              {
                  test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/,
                  loader: 'expose-loader?Promise'
              },
              // embed small images and fonts as Data Urls and larger ones as files:
              {
                  test: /\.(png|gif|jpg|cur)$/i,
                  loader: 'url-loader',
                  options: {
                      limit: 8192
                  }
              },
              {
                  test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
                  loader: 'url-loader',
                  options: {
                      limit: 10000,
                      mimetype: 'application/font-woff2'
                  }
              },
              {
                  test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
                  loader: 'url-loader',
                  options: {
                      limit: 10000,
                      mimetype: 'application/font-woff'
                  }
              },
              // load these fonts normally, as files:
              {
                  test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
                  loader: 'file-loader'
              }
          ]
      },
      plugins: [
          new AureliaPlugin(),
          new ProvidePlugin({
              'Promise': 'bluebird'
          }),
          new ModuleDependenciesPlugin({
              'aurelia-testing': ['./compile-spy', './view-spy'],
              'aurelia-i18n': [{
                  name: 'locales/en/translation.json',
                  chunk: 'lang-en'
              }, {
                  name: 'locales/pt/translation.json',
                  chunk: 'lang-pt'
              }]
          }),
          new HtmlWebpackPlugin({
              template: 'index.ejs',
              minify: production ? {
                  removeComments: true,
                  collapseWhitespace: true
              } : undefined,
              metadata: {
                  // available in index.ejs //
                  title,
                  server,
                  baseUrl
              }
          }),
          ...when(extractCss, new ExtractTextPlugin({
              filename: production ? '[contenthash].css' : '[id].css',
              allChunks: true
          })),
          ...when(production, new CopyWebpackPlugin([{
              from: 'static/favicon.ico',
              to: 'favicon.ico'
          }])),
          ...when(analyze, new BundleAnalyzerPlugin())
      ]
  });
  </code></pre>
  
  <p>The issue in the above code happens at </p>
  
  <pre><code>{
                  test: /\.json$/i,
                  loader: 'json-loader'
              },
  </code></pre>
  
  <p>Which if you comment, lets the app compile without issues, I've searched but event though I've found similar problems to this one, I haven't found a working solution, if anyone has any suggestion in how I can solve this problem I would appreciate it.</p>
  
  <p>Thanks in advance.</p>