Lesson 1.2 Setting Up Your Development environment

[lp76]

Hi, I'm starting your video course and I encounter an error when I run the build command:

mastering-react@1.0.0 build /Users/luca/code/react/mastering-react browserify src/main.js -t babelify --outfile public/bundle.js

SyntaxError: /Users/luca/code/react/mastering-react/src/main.js: Unexpected token (6:11)
  4 | class App extends React.Component {
  5 |   render() {
6 |     return <h1>Hello World!</h1>;
    |            ^
  7 |   }
  8 | }

This is my package.json

{
  "name": "mastering-react",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "browserify src/main.js -t babelify --outfile public/bundle.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^0.14.2",
    "react-dom": "^0.14.2"
  },
  "devDependencies": {
    "babelify": "^7.2.0"
  }
}

[hojberg]

Hmm Babel recently released their new version which changed a lot of things about how transforms work, and by the look of this error it's not transpiling the jsx.

I'll look into this some more to get the repository up to date, but in the mean time try using the versions i'm using here: https://github.com/hojberg/mastering-react/blob/video_1_2_setting_up_your_development_environment/package.json

[lp76]

Thanks Simon, with babelify 6.x the error is gone. Any chance that also the video lessons will be updated in the future?

[hojberg]

@lp76 I think for now i'll have to simply link to the update code. Luckily all the concepts showcased in the videos are still very much up to date. Its just minor syntax changes that are breaking.

Unfortunately with things like tech, a video course (or a book) is basically out of date the moment it ships.

I'll try to help as much as possible if you have any issues.

[HyperSprite]

I got the 'npm run build' to work with the following changes. babel is depreciated.

npm uninstall -g babel

I already had the following babel components installed globally because I'm using it with ESlint with ST3, so I am not exactly sure which package is required here. babel-cli babel-polyfill babel-register babel-runtime

I changed the react and react-dom to 'latest' Then from inside the project, I did:

npm install --save-dev browserify babelify babel-preset-react babel-preset-es2015

which resulted in a the following package.json updates. (I made no other changes to package.json)

"dependencies": {
  "react": "latest",
  "react-dom": "latest"
},
"devDependencies": {
  "babel-preset-es2015": "^6.1.18",
  "babel-preset-react": "^6.1.18",
  "babelify": "^7.2.0",
  "browserify": "^12.0.1"
} 

I then added a file at the root of the project '.babelrb' with:

{
  "presets": ["es2015", "react"]
}

Then I ran 'npm run build' and received no errors and a complete bundle.js file.

[danielsdesk]

I, too, solved this using the same steps as the above comment: npm install --save-dev babelify babel-preset-es2015 babel-preset-react

and then adding a .babelrc file with: { "presets": ["es2015", "react"] }

These links have more info on the changes and how to use the babel options: http://babeljs.io/blog/2015/10/29/6.0.0/ https://github.com/babel/babelify#options

[hojberg]

@HyperSprite @danielsdesk thanks for the updates!

[anthonybrown]

@hojberg any chance of updating the code? this is one of the best courses I've seen