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

Metronic 9 template react based project


Do you have a based workable react project for your Metronic 9 template?

I bought your template but I can't seem to figureout the react setup.


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 (5)


Thank you! It works now.



Hi,

Could you please refer to this post and try the steps?

Regards.



I followed exactly the steps and I get this error when I run 'npm run build':

PS C:\...\metronic-tailwind-html-integration-main\metronic-tailwind-react> npm run build

> metronic-react-tailwind@0.0.0 build
> tsc -b && vite build

src/App.tsx:12:14 - error TS2339: Property 'init' does not exist on type 'typeof import("C:/../metronic-tailwind-react/src/theme/app/layouts/demo1")'.
12 KTLayout.init();
~~~~

Found 1 error.



HI,

To fix this error in file src/theme/app/layouts/demo1.js you should change


KTDom.ready(() => {
KTLayout.init();
});


to


export default KTLayout;


Regards,
Lauris Stepanovs,
Keenthemes Support Team



react-dom_client.js?v=c060d72e:16670 Uncaught
ReferenceError: KTToggle is not defined
at KTLayout._handleSidebar (demo1.js:19:25)
at KTLayout.init (demo1.js:53:9)
at App.tsx:12:14
at commitHookEffectListMount (react-dom_client.js?v=c060d72e:16915:34)
at commitPassiveMountOnFiber (react-dom_client.js?v=c060d72e:18156:19)
at commitPassiveMountEffects_complete (react-dom_client.js?v=c060d72e:18129:17)
at commitPassiveMountEffects_begin (react-dom_client.js?v=c060d72e:18119:15)
at commitPassiveMountEffects (react-dom_client.js?v=c060d72e:18109:11)
at flushPassiveEffectsImpl (react-dom_client.js?v=c060d72e:19490:11)
at flushPassiveEffects (react-dom_client.js?v=c060d72e:19447:22)
_handleSidebar @ demo1.js:19
init @ demo1.js:53
(anonymous) @ App.tsx:12
Show 11 more frames

react-dom_client.js?v=c060d72e:14032 The above error occurred in the <App> component:

at App (

Consider adding an error boundary to your tree to customize error handling behavior.
Visit to learn more about error boundaries.


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  :(