react-scripts中随机位置的“语法错误：意外关键字”

Question

I've recently updated my Javascript project from Webpack to react-scripts.

My code structure is fairly simple. I have a src folder with an index.js that just renders the DOM like this:

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

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

and my Index which is just a single page that renders some stuff like this:

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

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

in my package.json I use react-scripts to start the app. When running npm run start the dev-webserver starts.

I can change a single letter, save the file, the dev-webserver restarts, and then I get random syntax errors throughout the code. They look like this:

./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>

or this

./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}>

or on any other part of the project. They keep happening until I restart npm.

I've tried to delete code until it doesn't happen anymore. Then I end up with a single React.Component that only renders a div with text.

I've tried to work on another project; the same issue happens there.

The project works fine on other devices.

Things I've tried:

• delete node_modules folder
• downgrade dependencies
• delete project and clone again
• use different browser
• restart pc
• change back to webpack
• try to search online for the error

My node version is:

v6.9.1

My npm version is:

v6.8.0

Answer 1

Turns out my node version is very old (2016) .

I updated node to the newest version and it stopped happening.