Skip to content

FIX babel-core including react-display-name & UPGRADE babel & other packages #3

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.

Sign up for GitHub

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

Jump to bottom
Merged
merged 2 commits into from
May 31, 2016
Merged

FIX babel-core including react-display-name & UPGRADE babel & other packages #3

merged 2 commits into from
May 31, 2016

Conversation

ndelangen
Copy link
Member

@ndelangen ndelangen commented May 21, 2016 •
edited
Loading

At first i just wanted to see if I could fix a small problem I had with a package react-display-name being loaded twice. See styleguidist/react-styleguidist@596c42d

Then I thought what the hell, let's try upgrade to babel 6; as that's what I've wanted to do for a while.
Found a merge PR for react-styleguidist for doing just that, here and pretty much followed that and fixed the stuff that came up.

Norbert de Langen added 2 commits May 21, 2016 23:46
FIX babel-core including react-display-name
c0c2d3d
UPGRADE multiple dependencies including babel
cf2c8dd 
UPGRADE to babel:6.x.x
UPGRADE to lodash:4.x.x
UPDATE webpack
UPDATE glob
@ndelangen ndelangen changed the title FIX babel-core including react-display-name FIX babel-core including react-display-name & UPGRADE babel & other packages May 22, 2016
@robhrt7
Copy link
Member

robhrt7 commented May 23, 2016

Thanks for the PR, I'll try to check it today!

@robhrt7
Copy link
Member

robhrt7 commented May 23, 2016

I started testing your changes with SourceJS react bundle example here in dev branch https://github.com/sourcejs/sourcejs-react-bundle-example and I got these errors, seems like JSX is not rendered by default:

ERROR in ./specs/placeholder/Placeholder.jsx
Module build failed: SyntaxError: /Users/robert-lg/Downloads/sourcejs-react-bundle-example/specs/placeholder/Placeholder.jsx: Unexpected token (28:3)
  26 |      let { width, height } = this.props;
  27 |      return (
> 28 |          <img className={s.root} src={this.getImageUrl()} width={width} height={height}/>
     |          ^
  29 |      );
  30 |  }
  31 | }
    at Parser.pp.raise (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:89:8)
    at Parser.pp.parseExprAtom (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:517:12)
    at Parser.pp.parseExprSubscripts (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:272:19)
    at Parser.pp.parseMaybeUnary (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:252:19)
    at Parser.pp.parseExprOps (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:183:19)
    at Parser.pp.parseMaybeConditional (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:165:19)
    at Parser.pp.parseMaybeAssign (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:128:19)
    at Parser.pp.parseParenAndDistinguishExpression (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:590:26)
    at Parser.pp.parseExprAtom (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:476:19)
 @ ../sourcejs-react-styleguidist/loaders/styleguide.loader.js! 3:544-645

ERROR in ./specs/button/Button.jsx
Module build failed: SyntaxError: /Users/robert-lg/Downloads/sourcejs-react-bundle-example/specs/button/Button.jsx: Unexpected token (28:3)
  26 |
  27 |      return (
> 28 |          <button className={s.root} style={styles} onClick={this.onClick}>{this.props.children}</button>
     |          ^
  29 |      );
  30 |  }
  31 | }
    at Parser.pp.raise (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:22:13)
    at Parser.pp.unexpected (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:89:8)
    at Parser.pp.parseExprAtom (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:517:12)
    at Parser.pp.parseExprSubscripts (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:272:19)
    at Parser.pp.parseMaybeUnary (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:252:19)
    at Parser.pp.parseExprOps (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:183:19)
    at Parser.pp.parseMaybeConditional (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:165:19)
    at Parser.pp.parseMaybeAssign (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:128:19)
    at Parser.pp.parseParenAndDistinguishExpression (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:590:26)
    at Parser.pp.parseExprAtom (/Users/robert-lg/Downloads/sourcejs-react-styleguidist/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:476:19)
 @ ../sourcejs-react-styleguidist/loaders/styleguide.loader.js! 3:165-256

Does changes to plugin require some changes to project as well?

@ndelangen
Copy link
Member Author

ndelangen commented May 23, 2016 •
edited
Loading

Does changes to plugin require some changes to project as well?

Unfortunately, yes: You need a new .babelrc in your project folder:

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

@ndelangen
Copy link
Member Author

I'm not sure if there's a way around that with the 'npm dependency install'-route.

But I think it's actually correct to have a .babelrc there.

@robhrt7
Copy link
Member

robhrt7 commented May 24, 2016

That totally makes sense, since they decoupled the babel config from the project code. I will continue the testing.

@robhrt7
Copy link
Member

robhrt7 commented May 24, 2016

I've made the bundle working in dev branch, but live reload is not working anymore. The changes are rebuilt, but not applied to the examples in the spec.

@ndelangen
Copy link
Member Author

Does using this .babelrc make it work?

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

This is exactly what the plugin itself uses.

@robhrt7
Copy link
Member

robhrt7 commented May 31, 2016

I've tested with new presets, now it's working fine, will merge it and release with breaking change version. Thanks again for your PR!

@robhrt7 robhrt7 merged commit f163b2e into sourcejs:master May 31, 2016
This was referenced May 31, 2016
Closed
Closed
@ndelangen
Copy link
Member Author

Super awesome! Happy to help!

@ndelangen ndelangen deleted the ndelangen/dev branch May 31, 2016 10:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@ndelangen @robhrt7