Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Building Applications with React and Redux Modularizing the React Scoreboard Application Building the Stopwatch Logical Component

Posted by Earlybird Vietnam
Earlybird Vietnam
15,645 Points

Error compiling! (and solution)

When I started refactoring the Stopwatch component, I got this error when running npm start 

ERROR in ./src/components/Stopwatch.js
Module build failed: SyntaxError: Unexpected token (4:8)

  2 |
  3 | export default class Stopwatch extends Component {
> 4 |   state = {
    |         ^
  5 |     running: false,
  6 |     previouseTime: 0,
  7 |     elapsedTime: 0,

Solution: make sure you add stage-0 to your .babelrc file like so

{
  "presets": ["es2015", "stage-0" ,"react"]
}

3 Answers

Beau Palmquist
STAFF
Beau Palmquist
Treehouse Guest Teacher
Beau Palmquist
Beau Palmquist
Treehouse Guest Teacher

Thanks for posting this information.

Another alternative (not shown in the video) is to put all of your Babel presets with the Babel loader in the webpack.config.js file like this:

// ...
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: [
          'react-hot',
          'babel',
          query: {
            presets: ['es2015', 'stage-0', 'react']
          }
        ]
      }
    ]
  }
//...

Then you no longer need the .babelrc file.

Geoffrey Emerson
Geoffrey Emerson
18,726 Points
Geoffrey Emerson
Geoffrey Emerson
18,726 Points

That solution led to a new error: "Missing class properties transform."

I had to switch the order in .babelrc to:

{
    "presets": ["react", "es2015", "stage-0"]
}
jonathan chadeyras
jonathan chadeyras
15,015 Points
jonathan chadeyras
jonathan chadeyras
15,015 Points

Thx for that, I was starting to struggle a little ^^ Also here is the CL to install stage-0

npm install --save-dev babel-preset-stage-0