unexpected error thrown while compiling my code with Webpack

Question

[![enter image description here][1]][1]I am trying to set up my mess around project with Webpack and Babel. In my package.json I have a Webpack script to compile but getting this error that makes no sense to me. I tried to google the error but its so vague am fully stuck.

package.json

{
  "name": "fatfreefood",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "webpack": "webpack --mode=production",
    "start": "http-server"
  },
  "dependencies": {},
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-es2015": "^6.24.1",
    "webpack": "^4.25.1",
    "webpack-cli": "^3.1.2"
  },
  "author": "",
  "license": "ISC"
}

webpack.config.js

const path = require('path');

module.exports = {
    entry: { main: './src/index.js' },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'app.boundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    }
}

Console Error:

    ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected character '​' (3:62)

      1 | import Food from './app/food.js';
      2 |
    > 3 | const chicken_breast = new Food('Chicken Breast', 26, 0, 3.5);​
        |                                                               ^
      4 |
      5 | ​
      6 |

food.js

    "use strict";
// Food is a base class​
export default class Food {​
   constructor (name, protein, carbs, fat) {​
       this.name = name;​
       this.protein = protein;​
       this.carbs = carbs;​
       this.fat = fat;​
   }​

   toString () {​
       return `${this.name} | ${this.protein}g P :: ${this.carbs}g C :: ${this.fat}g F`​
   }​

   print () {​
     console.log( this.toString() );​
   }​
}​

index.js

    import Food from './app/food.js';

const chicken_breast = new Food('Chicken Breast', 26, 0, 3.5);​

​

chicken_breast.print(); // 'Chicken Breast | 26g P :: 0g C :: 3.5g F'​

​

console.log(chicken_breast.protein); // 26 (LINE A)

The error makes no sense to me as i seen no unexpected chars. i can only suspect something might be wrong with my webpack.config or package/scripts

Answer 1

You should trust your error log, I copied and pasted your string into my console to see what was wrong, and I kept seeing this strange character when I pasted the line where it threw the error from.

Had a little difficult taking a screenshot when I hovered over the red dot, but if you do the same exercise in your chrome console there is a unicode character there \u200b that apparently is invisible outside of the console (line will throw there too) on that line only from what you pasted. At positon 62, line 3. After the semi-colon.

Edit: I saw your update, and while what I described is what's triggering the error, I found this answer might also be helpful to understand potentially why those characters might be appearing in your setup - I won't diagnose what you could be doing there, but it seems as if you're looking to solve that \u200b characters are appearing, the answer I'm linking seems like as good of a place to start if you're lost. Relevant stackoverflow? ---> \u200b (Zero width space) characters in my JS code. Where did they come from?

Answer 2

You're probably missing the preset. (see: https://www.npmjs.com/package/babel-preset-es2015#via-babelrc-recommended)

create a file called .babelrc and add

{
  "presets": ["es2015"]
}

You probably want to also look into upgrading to babel 7+ (see: https://babeljs.io/docs/en/env/)