React项目组件首行不可见字符导致npm start编译失败

问题现象 #

• 执行npm start后编译失败，About.js、Experience.js、Projects.js等组件文件首行存在不可见字符�，触发语法错误
• 弹出webpack-dev-server的onAfterSetupMiddleware、onBeforeSetupMiddleware选项弃用警告
• 提示babel-preset-react-app未声明@babel/plugin-proposal-private-property-in-object依赖

完整报错日志 #

(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;

package.json #

{
  "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"
    ]
  }
}

已尝试的无效方法 #

• 卸载并重装项目依赖
• 使用全新的package.json配置
• 参考Stack Overflow相关方案

解决方案 #

1. 清除不可见字符（核心问题） #

这些�是UTF-8 BOM（字节顺序标记），是编辑器保存时自动添加的特殊字符，babel无法识别。解决方式：

• 单文件处理：用VS Code打开对应组件，点击右下角编码标识（如UTF-8），选择通过编码保存，再选UTF-8（不要选带BOM的选项）；或手动删除首行所有前置字符，确保首行以import React from "react";开头
• 批量处理：在项目根目录执行命令批量去除BOM：

find src/components -name "*.js" -exec sed -i '1s/^\xEF\xBB\xBF//' {} \;

2. 修复babel依赖警告 #

按照提示安装缺失的开发依赖：

npm install --save-dev @babel/plugin-proposal-private-property-in-object

3. 处理webpack-dev-server弃用警告（可选） #

该警告不影响编译，是create-react-app内置配置问题。由于create-react-app已停止维护，若要消除警告需执行npm run eject暴露webpack配置，替换onAfterSetupMiddleware和onBeforeSetupMiddleware为setupMiddlewares，但不建议eject，保持现状即可。

额外修复 #

App.js中引用了<Contact></Contact>组件但未导入，编译通过后会触发组件未定义错误，需补充import Contact from "./components/Contact";或移除该组件标签。

内容的提问来源于stack exchange，提问作者Citrine