Invisible characters causing npm errors

Question

invisible charas in front of my app.js preventing npm start

err stack-trace:

(node:7188) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:7188) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Failed to compile.

SyntaxError: C:\Users\oladi\IdeaProjects\personalwebsite\src\components\About.js: Unexpected character '�'. (1:0)
> 1 | ��import React from "react";
    | ^
  2 | import "../styles/About.css";
  3 |
  4 |
    at parser.next (<anonymous>)
    at normalizeFile.next (<anonymous>)
    at run.next (<anonymous>)
    at transform.next (<anonymous>)
ERROR in ./src/components/About.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\oladi\IdeaProjects\personalwebsite\src\components\About.js: Unexpected character '�'. (1:0)

> 1 | ��import React from "react";
    | ^
  2 | import "../styles/About.css";
  3 |
  4 |
    at instantiate (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:63:32)
    at constructor (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:358:12)
    at FlowParserMixin.raise (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:3255:19)
    at FlowParserMixin.getTokenFromCode (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:2917:16)
    at FlowParserMixin.getTokenFromCode (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:7007:11)
    at FlowParserMixin.getTokenFromCode (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:5416:13)
    at FlowParserMixin.nextToken (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:2379:10)
    at FlowParserMixin.parse (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:14343:10)
    at parse (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:14386:38)
    at parser (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\core\lib\parser\index.js:41:34)
    at parser.next (<anonymous>)
    at normalizeFile (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\core\lib\transformation\normalize-file.js:64:38)
    at normalizeFile.next (<anonymous>)
    at run (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\core\lib\transformation\index.js:21:50)
    at run.next (<anonymous>)
    at transform (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\core\lib\transform.js:22:41)
    at transform.next (<anonymous>)
    at step (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\gensync\index.js:261:32)
    at C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\gensync\index.js:273:13
    at async.call.result.err.err (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\gensync\index.js:223:11)
    at C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\gensync\index.js:189:28
    at C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\core\lib\gensync-utils\async.js:68:7
    at C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\gensync\index.js:113:33
    at step (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\gensync\index.js:287:14)
    at C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\gensync\index.js:273:13
    at async.call.result.err.err (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\gensync\index.js:223:11)

ERROR in ./src/components/Experience.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\oladi\IdeaProjects\personalwebsite\src\components\Experience.js: Unexpected character '�'. (1:0)

> 1 | ��import React from "react";
    | ^
  2 | import "../styles/Experience.css";
  3 |
  4 | class Experience extends React.Component{
    at instantiate (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:63:32)
    at constructor (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:358:12)
    at FlowParserMixin.raise (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:3255:19)
    at FlowParserMixin.getTokenFromCode (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:2917:16)
    at FlowParserMixin.getTokenFromCode (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:7007:11)
    at FlowParserMixin.getTokenFromCode (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:5416:13)
    at FlowParserMixin.nextToken (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:2379:10)
    at FlowParserMixin.parse (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:14343:10)
    at parse (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:14386:38)
    at parser (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\core\lib\parser\index.js:41:34)
    at parser.next (<anonymous>)
    at normalizeFile (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\core\lib\transformation\normalize-file.js:64:38)
    at normalizeFile.next (<anonymous>)
    at run (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\core\lib\transformation\index.js:21:50)
    at run.next (<anonymous>)
    at transform (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\core\lib\transform.js:22:41)
    at transform.next (<anonymous>)
    at step (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\gensync\index.js:261:32)
    at C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\gensync\index.js:273:13
    at async.call.result.err.err (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\gensync\index.js:223:11)

ERROR in ./src/components/Projects.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\oladi\IdeaProjects\personalwebsite\src\components\Projects.js: Unexpected character '�'. (1:0)

> 1 | ��import React from "react";
    | ^
  2 | import "../styles/Projects.css";
  3 |
  4 |
    at instantiate (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:63:32)
    at constructor (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:358:12)
    at FlowParserMixin.raise (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:3255:19)
    at FlowParserMixin.getTokenFromCode (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:2917:16)
    at FlowParserMixin.getTokenFromCode (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:7007:11)
    at FlowParserMixin.getTokenFromCode (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:5416:13)
    at FlowParserMixin.nextToken (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:2379:10)
    at FlowParserMixin.parse (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:14343:10)
    at parse (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\parser\lib\index.js:14386:38)
    at parser (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\core\lib\parser\index.js:41:34)
    at parser.next (<anonymous>)
    at normalizeFile (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\core\lib\transformation\normalize-file.js:64:38)
    at normalizeFile.next (<anonymous>)
    at run (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\core\lib\transformation\index.js:21:50)
    at run.next (<anonymous>)
    at transform (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\@babel\core\lib\transform.js:22:41)
    at transform.next (<anonymous>)
    at step (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\gensync\index.js:261:32)
    at C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\gensync\index.js:273:13
    at async.call.result.err.err (C:\Users\oladi\IdeaProjects\personalwebsite\node_modules\gensync\index.js:223:11)

ERROR in [eslint]
src\components\About.js
  Line 1:  Parsing error: Unexpected character '�'. (1:0)

src\components\Experience.js
  Line 1:  Parsing error: Unexpected character '�'. (1:0)

src\components\Projects.js
  Line 1:  Parsing error: Unexpected character '�'. (1:0)

webpack compiled with 4 errors
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

app.js

import React from "react";
import Intro from "./components/Intro";
import Experience from "./components/Experience";
import About from "./components/About";
import Projects from "./components/Projects";
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
        <div id="content">
        <Intro></Intro>
        <About></About>
        <Experience></Experience>
        <Projects></Projects>
        <Contact></Contact>
      </div>

    </div>
  );
}

export default App;

pckg

{
  "name": "personalwebsite",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Tried:

uninstalling & reinstalling
new pckg.json
babel-preset-react-app, is importing the "@babel/plugin-proposal-private-property-in-object" package without declaring it in its dependencies
React JS Error: is not defined react/jsx-no-undef

I guess your editor is configured to save files in UTF-8 with BOM. Those characters are the BOM. Instead, use regular UTF-8 or UTF-8 without BOM, whatever name the editor is using. [Byte order mark](https://en.wikipedia.org/wiki/Byte_order_mark) is normally used to distinguish between different subencodings for UTF-16, but it's pretty much pointless in UTF-8 and most tools do not expect or support it. — Álvaro González, Aug 05 '23 at 11:38
[Change the encoding of a file in Visual Studio Code](https://stackoverflow.com/questions/30082741/change-the-encoding-of-a-file-in-visual-studio-code) — Álvaro González, Aug 06 '23 at 07:15

Invisible characters causing npm errors

0 Answers0