0

I got this error from index.js file it's a create-react-app project

here is the error:

ERROR in ./src/index.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\reyna\OneDrive\Documents\WEBSITE\home\powersite\NOC-Nature-of-Code\noc\src\index.js: Unexpected character '�'. (1:0)

> 1 | ��import React from 'react';
    | ^
  2 |
  3 | import ReactDOM from 'react-dom';
  4 |
    at instantiate (C:\Users\reyna\OneDrive\Documents\WEBSITE\home\powersite\NOC-Nature-of-Code\noc\node_modules\@babel\parser\lib\index.js:72:32)
    at constructor (C:\Users\reyna\OneDrive\Documents\WEBSITE\home\powersite\NOC-Nature-of-Code\noc\node_modules\@babel\parser\lib\index.js:358:12)
    at Object.raise (C:\Users\reyna\OneDrive\Documents\WEBSITE\home\powersite\NOC-Nature-of-Code\noc\node_modules\@babel\parser\lib\index.js:3334:19)
    at Object.getTokenFromCode (C:\Users\reyna\OneDrive\Documents\WEBSITE\home\powersite\NOC-Nature-of-Code\noc\node_modules\@babel\parser\lib\index.js:2679:16)
    at Object.getTokenFromCode (C:\Users\reyna\OneDrive\Documents\WEBSITE\home\powersite\NOC-Nature-of-Code\noc\node_modules\@babel\parser\lib\index.js:8069:18)
    at Object.getTokenFromCode (C:\Users\reyna\OneDrive\Documents\WEBSITE\home\powersite\NOC-Nature-of-Code\noc\node_modules\@babel\parser\lib\index.js:6180:20)
    at Object.nextToken (C:\Users\reyna\OneDrive\Documents\WEBSITE\home\powersite\NOC-Nature-of-Code\noc\node_modules\@babel\parser\lib\index.js:2018:10)
    at Object.parse (C:\Users\reyna\OneDrive\Documents\WEBSITE\home\powersite\NOC-Nature-of-Code\noc\node_modules\@babel\parser\lib\index.js:16418:10)
    at parse (C:\Users\reyna\OneDrive\Documents\WEBSITE\home\powersite\NOC-Nature-of-Code\noc\node_modules\@babel\parser\lib\index.js:16472:38)
    at parser (C:\Users\reyna\OneDrive\Documents\WEBSITE\home\powersite\NOC-Nature-of-Code\noc\node_modules\@babel\core\lib\parser\index.js:52:34)

ERROR in src\index.js
  Line 1:  Parsing error: Unexpected character '�'. (1:0)

here is my index.js:

import React from 'react';  --> error is this line
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.jsx';
import reportWebVitals from './reportWebVitals';
import { StateProvider } from './StateProvider.jsx';
import reducer, { initialState } from './reducer';

ReactDOM.render(
  <React.StrictMode>
    <StateProvider initialState={initialState} reducer={reducer}>
      <App />
    </StateProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))

reportWebVitals();

here is the eslint conf file in case there something to do with it:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": ["eslint:recommended", "plugin:react/recommended"],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["react"],
  "rules": {
    "no-unused-vars": "warn"
  }
}

Any idea why do i get this error ? and how to solve it. Thank you

cloned
  • 6,346
  • 4
  • 26
  • 38
Reynald Lamury
  • 165
  • 1
  • 2
  • 9
  • That's the ["replacement character"](https://unicode-table.com/en/FFFD/), you might need to turn on hidden characters and white space in your editor so you can remove it? – evolutionxbox Mar 16 '22 at 08:39
  • @evolutionxbox i've turned on whitespace in my text editor, no hidden characters seem to appear and my code remains the same – Reynald Lamury Mar 16 '22 at 08:50
  • Did you also turn on hidden characters? Whitespace alone might not be enough. – cloned Mar 16 '22 at 08:59
  • 2
    Since it's at the very beginning of the file, it might be the byte-order mark; some editors automatically insert it when you edit a file. What editor do you use to make changes? Did you recently open it using anything else? – Jiří Baum Mar 16 '22 at 09:01
  • @JiříBaum I use vscode, and i didn't use other text editor, i've found that if i set `` editor.renderWhitespace: "all" `` in vscode it revelas all hidden characters as well as whitespaces, what do you mean by byte-order-mark? – Reynald Lamury Mar 16 '22 at 09:12
  • And for the hidden Character, it is only located at the very beginning of the file of the first letter of the line – Reynald Lamury Mar 16 '22 at 09:15
  • I acctually had the index.js file copied from another directory, and I'm working with powershell in case there might be something to do with it. And the directory I copy the file from is on the windows linux subsystem/wsl – Reynald Lamury Mar 16 '22 at 09:18
  • I created the script to copy all necessary files I want from the previous project, this is a piece of code that does copying the content of the file `` type $targetPath\src\index.js > $masterPath\src\index.js `` – Reynald Lamury Mar 16 '22 at 09:23
  • How do I convert the file to 'UTF-8 without BOM' in vscode ? @GalAbra – Reynald Lamury Mar 16 '22 at 09:28

0 Answers0