title: Module parse failed: Unexpected token m in JSON at position 0
body: <p>I am working through the Lynda tutorial for React.js Essential training and am running into a problem with chapter 13 - Loading JSON with webpack.</p>
  
  <p>When I try and compile and start the server I am getting the following error:</p>
  
  <pre><code>ERROR in ./src/titles.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\pauln\AppData\Roaming\npm\node_modules\webpack\lib\JsonParser.js:15:21)
      at doBuild.err (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:367:32)
      at runLoaders (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\lib\NormalModule.js:264:12)
      at C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:370:3
      at iterateNormalLoaders (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
      at iterateNormalLoaders (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:218:10)
      at C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:233:3
      at runSyncOrAsync (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
      at iterateNormalLoaders (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:229:2)
      at Array.&lt;anonymous&gt; (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\loader-runner\lib\LoaderRunner.js:202:4)
      at Storage.finished (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:43:16)
      at provider (C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:79:9)
      at C:\Users\pauln\AppData\Roaming\npm\node_modules\webpack\node_modules\graceful-fs\graceful-fs.js:78:16
      at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:528:3)
   @ ./src/lib.js 12:14-38
   @ ./src/index.js
   @ multi (webpack)-dev-server/client?http://localhost:2000 ./src/index.js
  
  ERROR in chunk main [entry]
  bundle.js
  Cannot read property 'replace' of undefined
  </code></pre>
  
  <p>My titles.json file looks like this:</p>
  
  <pre><code>{   
      "hello": "Bonjour",
      "goodbye": "Au Reviour"
  }
  </code></pre>
  
  <p>What am I doing wrong?</p>
  
  <p><strong>EDIT</strong> Adding my webpack.config:</p>
  
  <pre><code>var webpack = require("webpack");
  
      module.exports = {
          entry: __dirname + "/src/index.js",
          output: {
              path: __dirname + "/dist/assets",
              filename: "bundle.js",
              publicPath: "assets",
          },
          devServer: {
              inline: true,
              contentBase: __dirname + '/dist',
              port: 2000
          },
          module: {
              rules: [
              {
                  test: /\.js$/,
                  exclude: /(node_modules)/,
                  enforce: "pre",
                  loader: "babel-loader",
                  query: {
                      presets: ["latest", "stage-0", "react"]
                  }
  
              },
  
              {
                  test: /\.json$/,
                  exclude: /(node_modules)/,
                  loader: "json-loader"       
              }
  
              ]
          }
      }
  </code></pre>
  
  <p><strong>Edit 2</strong> Adding lib.js file and index.js file</p>
  
  <p>lib.js</p>
  
  <pre><code> import React from 'react'
      import text from './titles.json'
  
      export const hello = (
          &lt;h1 id='title'
              className='header'
              style={{backgroundColor: 'purple', color: 'yellow'}}&gt;
              {text.hello}
              &lt;/h1&gt;
              )
  
      export const goodbye = (
          &lt;h1 id='title'
              className='header'
              style={{backgroundColor: 'yellow', color: 'purple'}}&gt;
              {text.goodbye}
              &lt;/h1&gt;
          )       
  </code></pre>
  
  <p>Index.js</p>
  
  <pre><code>import React from 'react'
  import { render } from 'react-dom'
  import { hello, goodbye } from './lib'
  
  render(
      &lt;div&gt;
         { hello }
          { goodbye }
      &lt;/div&gt;,
       document.getElementById('react-container')
       )
  </code></pre>