Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lesson 1.2 Setting Up Your Development environment #31

Open
lp76 opened this issue Nov 13, 2015 · 7 comments
Open

Lesson 1.2 Setting Up Your Development environment #31

lp76 opened this issue Nov 13, 2015 · 7 comments

Comments

@lp76
Copy link

lp76 commented Nov 13, 2015

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
Copy link
Owner

hojberg commented Nov 13, 2015

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
Copy link
Author

lp76 commented Nov 13, 2015

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

@hojberg
Copy link
Owner

hojberg commented Nov 13, 2015

@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
Copy link

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
Copy link

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
Copy link
Owner

hojberg commented Nov 24, 2015

@HyperSprite @danielsdesk thanks for the updates!

@anthonybrown
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants