使用create-react-app开发应用时遇Uncaught SyntaxError: Unexpected identifier错误

嘿，我来帮你搞定这个报错！你遇到的Uncaught SyntaxError: Unexpected identifier问题，根源在于public目录下的JS文件不会被create-react-app的构建工具（Babel+Webpack）处理。

浏览器原生不支持未经转译的ES6 import语法，而public文件夹里的脚本是直接被浏览器加载执行的，没有经过转译步骤，所以才会抛出这个错误。

这里给你两个可行的解决方案：

方案1：遵循create-react-app的规范，将代码移到src目录 #

这是最推荐的做法，完全贴合项目的构建流程：

• 把public/scripts/app.js移动到src目录下（比如重命名为src/app.js）
• 在src/index.js里通过import './app.js'引入这个文件
• 重新运行npm start，此时你的代码会被Babel自动转译成浏览器能识别的语法，报错自然就消失了

方案2：如果必须在public目录使用脚本，改用全局变量方式 #

如果你有特殊需求要保留public目录下的脚本，可以通过引入React的UMD版本，用全局变量代替import语句：

1. 在public/index.html的<head>标签里添加React的CDN引用：

   <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
   <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
   

2. 修改public/scripts/app.js里的代码，去掉import语句，改用全局的React变量：

   'use strict';
   const { Component } = React; // 从全局React对象中解构Component
   var _createClass = (function() { 
     function defineProperties(target, props) { 
       for (var i = 0; i < props.length; i++) { 
         var descriptor = props[i]; 
         descriptor.enumerable = descriptor.enumerable || false; 
         descriptor.configurable = true; 
         if ('value' in descriptor) descriptor.writable = true; 
         Object.defineProperty(target, descriptor.key, descriptor); 
       } 
     } 
     return function(Constructor, protoProps, staticProps) { 
       if (protoProps) defineProperties(Constructor.prototype, protoProps); 
       if (staticProps) defineProperties(Constructor, staticProps); 
       return Constructor; 
     }; 
   })();
   // 后续代码正常使用Component即可
   

简单总结下：create-react-app的src目录是源码处理区，会被完整转译打包；public是静态资源输出区，文件直接交给浏览器，所以尽量把业务代码放在src里能避免很多这类语法兼容问题哦～

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