it doesn't parse ES6 Class static methods

[leonardoanalista]

Hi guys,

I am very exciting with Fusebox performance! 👍. Great job! I am testing in a massive project and have a road bump with es6 static classes props.

Steps:

• get a fresh copy of the react sample
• open file /src/App.jsx
• add a defaultProps static block to the class:

    static defaultProps = {
      nada : 'nadaaaaa'
    }

you get the error:
app ->

{ SyntaxError: unknown: Unexpected token (9:24)
7 |
8 | class App extends Component {

9 | static defaultProps = {
| ^
10 | nada : 'nadaaaaa'
11 | }
12 |
at Parser.pp$5.raise (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:4452:13)
at Parser.pp.unexpected (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:1761:8)
at Parser.pp$1.parseClassProperty (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:2571:50)
at Parser.pp$1.parseClassBody (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:2516:34)
at Parser.pp$1.parseClass (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:2406:8)
at Parser.pp$1.parseStatement (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:1843:19)
at Parser.pp$1.parseBlockBody (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:2268:21)
at Parser.pp$1.parseTopLevel (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:1778:8)
at Parser.parse (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:1673:17)
at parse (/Users/leonardo/aajs/fuse2/react-example/node_modules/babylon/lib/index.js:7180:37)
pos: 216,
loc: Position { line: 9, column: 24 },
_babel: true,
codeFrame: '\u001b[0m \u001b[90m 7 | \u001b[39m\n \u001b[90m 8 | \u001b[39m\u001b[36mclass\u001b[39m \u001b[33mApp\u001b[39m \u001b[36mextends\u001b[39m \u001b[33mComponent\u001b[39m {\n\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 9 | \u001b[39m static defaultProps \u001b[33m=\u001b[39m {\n \u001b[90m | \u001b[39m \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\n \u001b[90m 10 | \u001b[39m nada \u001b[33m:\u001b[39m \u001b[32m'nadaaaaa'\u001b[39m\n \u001b[90m 11 | \u001b[39m }\n \u001b[90m 12 | \u001b[39m \u001b[0m' }
Acorn error: Unexpected token (9:24)
File: /Users/leonardo/aajs/fuse2/react-example/src/App.jsx

7
8 class App extends Component {
9 static defaultProps = {
10 nada : 'nadaaaaa'
11 }
12
13 render() {

[leonardoanalista]

The same issue happens with spread operator:

const nada2 = { ...nada };
console.info('>>> ', nada2);

{ SyntaxError: unknown: Unexpected token (9:15)

[nchanged]

Hi! And welcome to the community! As I see from the traceback, that's babelon complaining, which means that fusebox has nothing to do with the error. Make sure you have a correct babel plugin setup, and also after changing the configuration during development make sure to bust the cache (clear .fusebox folder)

[leonardoanalista]

Thanks for the reply. Set up is out-of-the-box with Babel plugin, preset latest. Nothing has changed the example. I removed .fusebox and issues stays.

[nchanged]

Well clearly it cannot handle it. the error is coming from
Babel, not fusebox, nothing I can do here :( Try a different preset

[nchanged]

Someone asked before, the same issue I remember. all solved by changing a preset

[leonardoanalista]

I tired this one here http://babeljs.io/docs/plugins/transform-class-properties/
But didn't work. I think the order they appear on .babelrc matters. I'll tray again in a few hours and let you know

[nchanged]

@leonardoanalista it matters yes

[leonardoanalista]

I figured it out:

• .babelrc:

{
    "sourceMaps": true,
    "presets": ["latest", "stage-1"],
    "plugins": [
        ["transform-react-jsx", "transform-class-properties"]
    ]
}

npm install:

    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1"

Babel plugins and presets need to be in this order. I'll find out why later.

Leonardo