0

I recently started to study about semantic ui react. I successfully compiled the code for buttons and other components. But when I used the example of menu from https://react.semantic-ui.com/collections/menu, I got an error.

Here is the error I got after compiling:Screenshot of compilation

And here is the code for menu :- app.js

Vikas Yadav
  • 3,094
  • 2
  • 20
  • 21
Shubham Navale
  • 220
  • 2
  • 13

1 Answers1

0

I think the error is because your setup miss a babel configuration to support class properties.
To enable that you need to install a babel plugin:

npm i -D npm install --save-dev babel-plugin-transform-class-properties

then in your .babelrc

{
  "plugins": ["transform-class-properties"]
}

Here is the official documentation.

Here I have a configuration you can use to test the instruction I mention above. It has the .babelrc file and webpack configured to use it.

Hope it helps.

Arnold Gandarillas
  • 3,896
  • 1
  • 30
  • 36
  • Do I have to create a .babelrc file? There is no such file in my project. If yes, then how to create it? – Shubham Navale Jan 05 '18 at 17:20
  • I've installed that babel plugin. I've also created that .babelrc file. Now I am getting another error. Here is the screenshot:- https://i.gyazo.com/efdd7065aa4b31b879383f60ac31aaa5.jpg – Shubham Navale Jan 05 '18 at 17:45
  • I've updated my answer providing a link to a repo I thing could be useful for you. – Arnold Gandarillas Jan 05 '18 at 22:07
  • I did something wrong, I gave you wrong screenshot. So, when you told me to add babel configuration, I executed that command, then I added that metadata in .babelrc file. After that when I compiled I got different error. here is my error:---- ERROR in ./App.js Module build failed: SyntaxError: Missing class properties transform. 3 | 4 | export default class MenuExampleBasic extends Component { > 5 | state = {} – Shubham Navale Jan 07 '18 at 14:20
  • Currently I am adding your configuration. I hope that'll work. I'll contact you asap after compiling. – Shubham Navale Jan 07 '18 at 14:23
  • Sorry for the late response, got busy with my work. The code given in the website of semantic ui didn't work. So, I changed it. Here is my code:- https://gist.github.com/ElavanResu/a3b84aaf1917594a6b7899baeac5d07c – Shubham Navale Jan 16 '18 at 17:24
  • See Topbar class. But thank you for investing your time. – Shubham Navale Jan 16 '18 at 17:24