search

ctrlplusb / react-universally

A starter kit for universal react applications.
MIT License
1.7k stars 244 forks source link

class property initializers #534

Closed sahaam closed 6 years ago

sahaam commented 6 years ago

Hi,

I am not able to use class properties such as

`class TempComponent extends React.Component { state = { open: false, };

handleDrawerOpen = () => { this.setState({ open: true }); };`

Getting the following error

`{ BabelLoaderError: SyntaxError: Unexpected token (98:8)

96 | 97 | class TempComponent extends React.Component {

98 | state = { | ^ 99 | open: false, 100 | }; 101 | 

at transpile (/Users/sahaam/Desktop/workspace/mygit/react-universally/node_modules/babel-loader/lib/index.js:65:13)
at Object.module.exports (/Users/sahaam/Desktop/workspace/mygit/react-universally/node_modules/babel-loader/lib/index.js:175:20)
at applySyncOrAsync (/Users/sahaam/Desktop/workspace/mygit/react-universally/node_modules/happypack/lib/applyLoaders.js:341:21)
at apply (/Users/sahaam/Desktop/workspace/mygit/react-universally/node_modules/happypack/lib/applyLoaders.js:268:5)
at /Users/sahaam/Desktop/workspace/mygit/react-universally/node_modules/happypack/lib/applyLoaders.js:131:7
at applyPitchLoader (/Users/sahaam/Desktop/workspace/mygit/react-universally/node_modules/happypack/lib/applyLoaders.js:184:14)
at applyPitchLoader (/Users/sahaam/Desktop/workspace/mygit/react-universally/node_modules/happypack/lib/applyLoaders.js:192:14)
at applyPitchLoaders (/Users/sahaam/Desktop/workspace/mygit/react-universally/node_modules/happypack/lib/applyLoaders.js:222:4)
at applyLoaders (/Users/sahaam/Desktop/workspace/mygit/react-universally/node_modules/happypack/lib/applyLoaders.js:116:3)
at HappyWorker.compile (/Users/sahaam/Desktop/workspace/mygit/react-universally/node_modules/happypack/lib/HappyWorker.js:32:3)

name: 'BabelLoaderError', message: 'SyntaxError: Unexpected token (98:8)\n\n\u001b[0m \u001b[90m 96 | \u001b[39m\n \u001b[90m 97 | \u001b[39m\u001b[36mclass\u001b[39m \u001b[33mTempComponent\u001b[39m \u001b[36mextends\u001b[39m \u001b[33mReact\u001b[39m\u001b[33m.\u001b[39m\u001b[33mComponent\u001b[39m {\n\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 98 | \u001b[39m state \u001b[33m=\u001b[39m {\n \u001b[90m | \u001b[39m \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\n \u001b[90m 99 | \u001b[39m open\u001b[33m:\u001b[39m \u001b[36mfalse\u001b[39m\u001b[33m,\u001b[39m\n \u001b[90m 100 | \u001b[39m }\u001b[33m;\u001b[39m\n \u001b[90m 101 | \u001b[39m\u001b[0m\n', hideStack: true, error: { SyntaxError: /Users/sahaam/Desktop/workspace/mygit/react-universally/shared/components/DemoApp/AsyncAboutRoute/AboutRoute.js: Unexpected token (98:8)`

I see we are using babel-preset-stage-3, this class property transform is provided as part of Babel's stage 2 preset. But why is this issue then

ctrlplusb commented 6 years ago

Yeah, us using stage 3 will include all plugins from stage 3 and higher. ie. >= 3

The stages map to TC39 stages where lower numbers are very early stage through the process and stage 3/4 are basically accepted. You can read more about that here: https://tc39.github.io/process-document/

You will have to extend your babel config using the provided mechanisms within the config file in order to support your required needs.

I do warn against using anything below stage 3. Even stage 3 is a risk, but I think below stage 3 is significantly more risky to use. See what happened to the decorators syntax. :)