javascript - react 脚本中随机位置的 "Syntax error: Unexpected keyword"

Question

我最近将我的 Javascript 项目从 Webpack 更新为 react-scripts。

我的代码结构相当简单。我有一个 src 文件夹，其中包含一个 index.js，它只呈现 DOM，如下所示:

import ReactDOM from 'react-dom';
import Index from './pages/index';

ReactDOM.render(<Index />, document.querySelector('#root'));

和我的 Index，它只是一个页面，呈现如下内容:

/**
 * Injected styles for this component
 */
const styles = theme => ({
  ...
})
class Index extends Component {
  ...
}

export default withRoot(withStyles(styles)(Index));

在我的 package.json 中，我使用 react-scripts 来启动应用程序。 当运行 npm run start 时，dev-webserver 启动。

我可以更改单个字母，保存文件，dev-webserver 重新启动，然后我在整个代码中出现随机语法错误。它们看起来像这样:

./src/pages/index.js
Syntax error: Unexpected keyword 'return' (144:7)

  142 |
  143 |     if(!this.state.data){
> 144 |       return null;
      |       ^
  145 |     }
  146 |
  147 |     return <Grid>

或者这个

./src/pages/index.js
Syntax error: Unexpected token (76:11)

  74 |    */
  75 |   render() {
> 76 |     const { classes } = this.props;
     |           ^
  77 |
  78 |     return (
  79 |       <div className={classes.root}>

或项目的任何其他部分。它们一直在发生，直到我重新启动 npm。

我已经尝试删除代码，直到它不再发生。然后我得到了一个只呈现带有文本的 div 的 React.Component。

我曾尝试从事另一个项目；那里发生了同样的问题。

该项目在其他设备上运行良好。

我尝试过的事情:

• 删除 node_modules 文件夹
• 降级依赖
• 删除项目并重新克隆
• 使用不同的浏览器
• 重启电脑
• 改回 webpack
• 尝试在线搜索错误

我的节点版本是:

v6.9.1

我的 npm 版本是:

v6.8.0

Answer 1

原来我的节点版本是very old (2016) .

我将节点更新为 newest version它不再发生了。