Question 69440 in Html Question posted in
Some basic documentation can be found here.

Webpack Refuses to Parse My JavaScript Code – Html

I am new to webpack and am just trying to get it actually work. I haven’t found anyone else with my issue, but everytime I try to npm run build which runs webpack I get an error saying:

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:UsersbradrOneDriveDesktopreposweather-appsrcindex.js: Unexpected character ‘�’. (1:0)

Index.js file

import { heythere } from "./generateJoke";

console.log(123);

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

First I thought maybe I have made a mistake in my code or in following the tutorial but I did it again the same error came up. Then I started googling and thought maybe I could change the webpack.config.js file.

webpack.config.js

const path = require("path");

module.exports = {
  entry: "/src/index.js",
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

but nothing is working, every little tweak I make is the same error.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    The issue was that my file was encoding its self in UTF-16 LE instead of the defualt UTF-8 that I had set, thus making the file unreadable by the transpiler.


  2. 0

    Most of the times error like that means that your file has some bytes that are not displayed as visible characters in text editors:

    https://www.w3.org/International/questions/qa-utf8-bom.en

    Some applications insert a particular combination of bytes at the beginning of a file to indicate that the text contained in the file is Unicode. This combination of bytes is known as a signature or Byte Order Mark (BOM). Some applications – such as a text editor or a browser – will display the BOM as an extra line in the file, others will display unexpected characters, such as .

    You can check your file’s encoding in Encoding menu of Notepad++, for example.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search