Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

modal's problem on react version


Hi
when I click a button which is supposed to open a modal but it doesn't happen and got this error

the button :
<a
href='#'
className='btn btn-sm btn-light-success fw-bolder ms-2 fs-8 py-1 px-3'
data-bs-toggle='modal'
data-bs-target='#kt_modal_upgrade_plan'
>
Upgrade to Pro
</a>

the error :

Uncaught TypeError: Cannot read properties of undefined (reading 'classList')
Uncaught ReferenceError: process is not defined


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (10)


I had the same issue and when I replaced package.json and yarn.lock from the below URL it got fixed. not sure what's your root cause

https://gist.github.com/carmelodevuz/40c32fa5a96d3a64c5f4be20bf44085c.



Hi,

May I know which product and version are you using?

Regards.



HI
metronic 8
react . demo 1
Regards



Hi,

It looks like your errors are not related to the modals, do you have this problem only with #kt_modal_upgrade_plan modal or with all modals?



Modal doesn't working on the all parts of template



Do you use the latest version of Metronic?

As you can see on our preview page all modals work fine.



But for ours doesn't



Do you use the latest version of Metronic 8?



Unfortunately, we weren't able to reproduce it in the latest Metronic version.

Did you make any changes to our codebase?


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(