rcaferati / react-awesome-button

React button component. Awesome button is a 3D UI, progress, social and share enabled, animated at 60fps, light weight, performant, production ready react UI button component. 🖥️ 📱
https://awesome-button.caferati.me
MIT License
1.28k stars 131 forks source link

Issue : babel transformation (syntax error) #78

Open taruntosh opened 3 years ago

taruntosh commented 3 years ago

Capture I am sorry, I don't know how to solve this. Please help. Couldn't find help anywhere. Sorry for posting as a issue here.

CantFayle commented 3 years ago

I am also getting this.

./node_modules/react-awesome-button/src/components/AwesomeButton/index.js
SyntaxError: /home/.../Documents/movie-list/node_modules/react-awesome-button/src/components/AwesomeButton/index.js: Support for the experimental syntax 'jsx' isn't currently enabled (20:25):

  18 | */
  19 | 
> 20 | const Anchor = props => <a {...props} />;
     |                         ^
  21 | const Button = props => <button {...props} />;
  22 | 
  23 | export default class AwesomeButton extends React.Component {

Add @babel/preset-react (https://git.io/JfeDR) to the 'presets' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-jsx (https://git.io/vb4yA) to the 'plugins' section to enable parsing.

I didn't even have babel installed before getting this error. I haven't been able to render the buttons at all.

Tried installing babel and configuring the modules as in https://github.com/babel/babel/issues/12018 but no luck.

irfancnk commented 3 years ago

I am having the same issue. Default usage of the button that is shown in the tutorial throws this error. React version is 17.0.1

Radon333 commented 3 years ago

Same issue. Did anyone find a fix?

sipian commented 3 years ago

I was getting this error when I was including this module using the example given on the website ,

import AwesomeButton from 'react-awesome-button/src/components/AwesomeButton';
import AwesomeButtonProgress from 'react-awesome-button/src/components/AwesomeButtonProgress';
import AwesomeButtonSocial from 'react-awesome-button/src/components/AwesomeButtonSocial';

I fixed this error by following the example in the README. I included this module in my react project as

import { AwesomeButton } from "react-awesome-button";
import "react-awesome-button/dist/styles.css";
blakfreeman commented 2 years ago

Same problem we should check another solution