Babel transform class properties, what's wrong?

[direct-fuel-injection]

Hello. Gulp task code:

gulp.task('build', ['clean', 'prepare'], function () {
    var fuse = new fusebox.FuseBox({
        homeDir: buildDir,
        cache: true,
        outFile: path.join(buildDir, 'bundle.js'),
        plugins: [
            fusebox.CSSPlugin(),
            fusebox.BabelPlugin({
                test: /\.jsx?$/,
                config: {
                    presets: ["es2015", "stage-0", "react"],
                    plugins: [["transform-react-jsx"]]
                }
            })
        ]
    });

    return fuse.bundle('>index.js');
});

Error:

 [12:13:28] Starting 'build'...
SyntaxError: unknown: Unexpected token (13:10)
  11 | 
  12 | class App extends Component {
> 13 |     state = {
     |           ^
  14 |         isLoading: true
  15 |     }
  16 |     shouldComponentUpdate (nextProps, nextState) {
    at Parser.pp$5.raise (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:4246:13)
    at Parser.pp.unexpected (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:1627:8)
    at Parser.pp$1.parseClassProperty (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:2419:50)
    at Parser.pp$1.parseClassBody (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:2330:34)
    at Parser.pp$1.parseClass (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:2270:8)
    at Parser.pp$1.parseStatement (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:1711:19)
    at Parser.pp$1.parseBlockBody (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:2133:21)
    at Parser.pp$1.parseTopLevel (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:1645:8)
    at Parser.parse (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:1537:17)
    at parse$1 (/home/dfi/Projects/ReduxAppBoiler/node_modules/babel-core/node_modules/babylon/lib/index.js:6466:37)
[12:13:28] Finished 'build' after 256 ms

[devmondo]

@direct-fuel-injection
are you sure you included all required babel plugins?

[direct-fuel-injection]

@devmondo

npm list | grep babel-preset
├─┬ babel-preset-es2015@6.18.0
├── babel-preset-latest@6.16.0 extraneous
├─┬ babel-preset-react@6.16.0
├─┬ babel-preset-stage-0@6.16.0
│ └─┬ babel-preset-stage-1@6.16.0
│   └─┬ babel-preset-stage-2@6.18.0
│     └─┬ babel-preset-stage-3@6.17.0

[devmondo]

@direct-fuel-injection
i may be wrong but shouldn't

state = {
     |           ^
  14 |         isLoading: true
  15 |     }

be

state:{} //notice the double colon 

[nchanged]

That issue is coming from babel, no fusebox trace back is here

[devmondo]

@nchanged he has syntax error above as i mentioned

[direct-fuel-injection]

@devmondo webpack + babel works with that code fine.

[nchanged]

But if you get a babel error that means that fuse has nothing to do with it

[direct-fuel-injection]

@nchanged looks like babel-preset-stage-0 not included.

[direct-fuel-injection]

@devmondo babeljs.io/repl transformed code.

[direct-fuel-injection]

state = {} added this line to react-example demo code, samer error.

[devmondo]

@nchanged do we use acorn when we use babel plugin ?

[devmondo]

@direct-fuel-injection do you have repo so we can reproduce this ?

[nchanged]

@devmondo no it skips it ...

[devmondo]

@nchanged then most probably it is not fuse! as fuse dont modify the source code.

any ways if @direct-fuel-injection provide repo we will see if we can reproduce it.

[nchanged]

@direct-fuel-injection config is fed to babel-core as is. Make sure you have it all installed (plugins, presets). And yes, if nothing helps we are ready to help as soon as you give us some sample code.

[direct-fuel-injection]

@nchanged, @devmondo forked react-example.

[09:43:01] Starting 'build'...
SyntaxError: unknown: Unexpected token (5:10)
  3 | import logo from './logo.svg';
  4 | class App extends Component {
> 5 |     state = {
    |           ^
  6 | 	title: 'example'
  7 |     }
  8 |     render() {
    at Parser.pp$5.raise (/home/dfi/Projects/test-fuse-box/react-example-master/node_modules/babylon/lib/index.js:4333:13)
    at Parser.pp.unexpected (/home/dfi/Projects/test-fuse-box/react-example-master/node_modules/babylon/lib/index.js:1705:8)
    at Parser.pp$1.parseClassProperty (/home/dfi/Projects/test-fuse-box/react-example-master/node_modules/babylon/lib/index.js:2498:50)
    at Parser.pp$1.parseClassBody (/home/dfi/Projects/test-fuse-box/react-example-master/node_modules/babylon/lib/index.js:2409:34)
    at Parser.pp$1.parseClass (/home/dfi/Projects/test-fuse-box/react-example-master/node_modules/babylon/lib/index.js:2349:8)
    at Parser.pp$1.parseStatement (/home/dfi/Projects/test-fuse-box/react-example-master/node_modules/babylon/lib/index.js:1789:19)
    at Parser.pp$1.parseBlockBody (/home/dfi/Projects/test-fuse-box/react-example-master/node_modules/babylon/lib/index.js:2212:21)
    at Parser.pp$1.parseTopLevel (/home/dfi/Projects/test-fuse-box/react-example-master/node_modules/babylon/lib/index.js:1723:8)
    at Parser.parse (/home/dfi/Projects/test-fuse-box/react-example-master/node_modules/babylon/lib/index.js:1617:17)
    at parse (/home/dfi/Projects/test-fuse-box/react-example-master/node_modules/babylon/lib/index.js:6657:37)
[09:43:02] Finished 'build' after 246 ms

[devmondo]

@direct-fuel-injection , i downloaded your fork and after lots of testing, i found the problem.

you did not install babel-preset-stage-0, install it and just add it to babel preset presets: ["latest","stage-0"] and everything works fine.

[direct-fuel-injection]

@devmondo I've found that sourceMaps: false gives Acorn error: Unexpected token (5:10).
Can you checkout latest commits in react-example?

[devmondo]

@direct-fuel-injection i just tested it and it runs fine without error, again try to delete fuse cache folder and node_modules folder and start from scratch and let us know.

[direct-fuel-injection]

@devmondo after cache cleared same error.
What information do you need to reproduce this?

[devmondo]

@nchanged do you have any idea about why this would cause sourcemaps errors with @direct-fuel-injection ?

on my machine, i tested with source maps, and everything looks fine and i get no errors.

@direct-fuel-injection, if you get the same error even after installing babel preset and removing cache, then there is something really odd!!! i attached screen shot to show you it is working

[direct-fuel-injection]

@devmondo turn off sourcemaps, or update to latest commit in my fork of react-example.

[nchanged]

#180

[ada-lovecraft]

Experiencing this on v1.3.115

.babelrc

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

offending js

export default class Editor extends Component {
  let codeblock = null
  let codewrap = null

  componentDidMount() {
    this.editor = new Misbehave(codeblock)
  }
  render() {
    <pre refs={() => {codewrap = pre}}>
      <code
        className="language-javascript"
        contenteditable="true"
        autocorrect="off"
        autocapitalize="off"
        spellcheck="false"
        ref={() => {codeblock = code}}></code>
    </pre>
  }
}

error output

SyntaxError: unknown: Unexpected token, expected ( (7:6)
   5 | 
   6 | export default class Editor extends Component {
>  7 |   let codeblock = null
     |       ^
   8 |   let codewrap = null
   9 | 
  10 |   componentDidMount() {

[ada-lovecraft]

And.... please disregard... had the wrong syntax for class properties.

mea culpa

[nchanged]

Have u tried nuking? (Cache)