sweetalert2 / sweetalert2-react-content

Official SweetAlert2 enhancer adding support for React elements as content
MIT License
695 stars 47 forks source link

JSX isn't working #182

Closed sandenson closed 2 years ago

sandenson commented 2 years ago

I'm currently doing the following:

import React from 'react';
import sweetAlert from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';

const swal = withReactContent(sweetAlert);

swal
    .fire({
      // title: t('Publish page'),
      title: <p>Test</p>,
      text: t('Are you sure you want to publish this page?'),
      icon: 'warning',
      focusCancel: true,
      showCancelButton: true,
      confirmButtonText: t('Confirm'),
      confirmButtonAriaLabel: t('Confirm'),
      confirmButtonColor: '#5b73e8',
      cancelButtonText: t('Cancel'),
      cancelButtonAriaLabel: t('Cancel'),
      cancelButtonColor: '#e64942',
      background: '#2b2e3b',
    })

Everything works properly if I don't use JSX, but when I do so, I get the following error:

Unterminated regular expression (27:28)

  25 |           .fire({
  26 |             // title: t('Publish page'),
> 27 |             title: <p>Test</p>,
     |                             ^
  28 |             text: t('Are you sure you want to publish this page?'),
  29 |             icon: 'warning',
  30 |             focusCancel: true,

67 couldn't help me, either.

limonte commented 2 years ago

Make sure your component file extension is .tsx (if you're using TypeScript) or .jsx (if you're using JavaScript).