title: Webpack/babel Unexpected token, expected ";"
body: <p>I'm trying to import a JSON file, but when I attempt to load my JSON file webpack gives me an error. </p>
  
  <blockquote>
    <p>ERROR in ./src/testData.json
    Module build failed (from ./node_modules/babel-loader/lib/index.js):
    SyntaxError: C:\Users\Alex\Documents\Work\test-app\learn-fullstack-javascript\src\testData.json: Unexpected token, expected ";" (3:12)</p>
  </blockquote>
  
  <p>I've tried changing my babel and webpack configuration files, but haven't been able to fix the issue.</p>
  
  <p>Here are my config files: 
  webpack.config.js</p>
  
  <pre><code>module.exports = {
      entry: './src/index.js',
      output: {
        path: __dirname + '/public',
        filename: 'bundle.js'
      },
      module: {
        rules: [
          {
            test: /\.(js|jsx|json)$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets:['@babel/preset-env']
              }
            }
          }
        ]
      }
    };
  </code></pre>
  
  <p>babel.config.js</p>
  
  <pre><code>module.exports = {
      presets: ['@babel/preset-env', '@babel/react'],
  };
  </code></pre>
  
  <p>.babelrc</p>
  
  <pre><code>{
    "presets": [
        "@babel/preset-env",
        "@babel/react"
    ],
    "plugins": [
      "@babel/plugin-proposal-class-properties"
    ]
  }
  </code></pre>
  
  <p>lastly my package.json</p>
  
  <pre><code>{
    "name": "learjs",
    "version": "1.0.0",
    "description": "For an up-to-date configuration guide: [jscomplete.com/reactful](https://jscomplete.com/reactful)",
    "main": "index.js",
    "scripts": {
      "start": "nodemon --exec babel-node server.js --ignore public/",
      "dev": "webpack-dev-server"
    },
    "repository": {
      "type": "git",
      "url": "git+https://github.com/jscomplete/learn-fullstack-javascript.git"
    },
    "author": "",
    "license": "ISC",
    "bugs": {
      "url": "https://github.com/jscomplete/learn-fullstack-javascript/issues"
    },
    "homepage": "https://github.com/jscomplete/learn-fullstack-javascript#readme",
    "dependencies": {
      "@babel-preset-node7": "^1.5.0",
      "@babel/register": "^7.4.0",
      "braces": "^2.3.2",
      "ejs": "^2.6.1",
      "express": "^4.16.4",
      "mongodb": "^3.2.3",
      "prop-types": "^15.7.2",
      "react": "^16.8.6",
      "react-dom": "^16.8.6",
      "webpack-dev-server": "^3.3.1"
    },
    "devDependencies": {
      "@babel-core": "^7.0.0-bridge.0",
      "@babel-eslint": "^10.0.1",
      "@babel-jest": "^24.7.1",
      "@babel-loader": "^8.0.0-beta.6",
      "@babel/cli": "^7.4.3",
      "@babel/core": "^7.4.3",
      "@babel/node": "^7.0.0",
      "@babel/plugin-proposal-class-properties": "^7.4.0",
      "@babel/plugin-syntax-dynamic-import": "^7.2.0",
      "@babel/preset-env": "^7.4.3",
      "@babel/preset-react": "^7.0.0",
      "babel-core": "^7.0.0-bridge.0",
      "babel-loader": "^8.0.5",
      "eslint": "^5.16.0",
      "eslint-plugin-react": "^7.12.4",
      "html-webpack-plugin": "^3.2.0",
      "json-loader": "^0.5.7",
      "nodemon": "^1.18.11",
      "regenerator-runtime": "^0.13.2",
      "webpack": "^4.30.0",
      "webpack-cli": "^3.3.0"
    },
    "resolutions": {
      "babel-core": "7.0.0-bridge.0"
    }
  }
  </code></pre>
  
  <pre><code>
  {
    "contests": [
      {
        "id": 1,
        "categoryName": "Business/Company",
        "contestName": "Cognitive Building Bricks"
      },
      {
        "id": 2,
        "categoryName": "Magazine/Newsletter",
        "contestName": "Educating people about sustainable food production"
      },
      {
        "id": 3,
        "categoryName": "Software Component",
        "contestName": "Big Data Analytics for Cash Circulation"
      },
      {
        "id": 4,
        "categoryName": "Website",
        "contestName": "Free programming books"
      }
    ]
  }
  </code></pre>
  
  <p>I was expecting to get something like this inside of chrome dev tools.</p>
  
  <pre><code>Object i
    contents: Array[4]
    &gt; 0: Object
    &gt; .......
  </code></pre>