Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Metronic react demo1 not working


I tried to run the react project by running
`pnpm install`
`pnpm dev`

I'm getting this error when opening the page

```
Unable to resolve `@import "flatpickr/dist/flatpickr.css"` from /Users/ragnarok/Downloads/UI/metronic_v8.2.2/react/metronic_react_v8.2.2_demo1/src/_metronic/assets/sass
7:02:40 AM [vite] Internal server error: [postcss] ENOENT: no such file or directory, open 'flatpickr/dist/flatpickr.css'
Plugin: vite:css
File: /Users/ragnarok/Downloads/UI/metronic_v8.2.2/react/metronic_react_v8.2.2_demo1/src/_metronic/assets/sass/style.react.scss
at async open (node:internal/fs/promises:633:25)
at async Object.readFile (node:internal/fs/promises:1242:14)
at async Object.load (file:///Users/ragnarok/Downloads/UI/metronic_v8.2.2/react/metronic_react_v8.2.2_demo1/node_modules/.pnpm/vite@4.5.1_@types+node@20.3.1_sass@1.55.0/node_modules/vite/dist/node/chunks/dep-68d1a114.js:38849:30)
at async Promise.all (index 0)
at async LazyResult.runAsync (/Users/ragnarok/Downloads/UI/metronic_v8.2.2/react/metronic_react_v8.2.2_demo1/node_modules/.pnpm/postcss@8.4.32/node_modules/postcss/lib/lazy-result.js:261:11)
at async compileCSS (file:///Users/ragnarok/Downloads/UI/metronic_v8.2.2/react/metronic_react_v8.2.2_demo1/node_modules/.pnpm/vite@4.5.1_@types+node@20.3.1_sass@1.55.0/node_modules/vite/dist/node/chunks/dep-68d1a114.js:38903:25)
at async TransformContext.transform (file:///Users/ragnarok/Downloads/UI/metronic_v8.2.2/react/metronic_react_v8.2.2_demo1/node_modules/.pnpm/vite@4.5.1_@types+node@20.3.1_sass@1.55.0/node_modules/vite/dist/node/chunks/dep-68d1a114.js:38300:56)
at async Object.transform (file:///Users/ragnarok/Downloads/UI/metronic_v8.2.2/react/metronic_react_v8.2.2_demo1/node_modules/.pnpm/vite@4.5.1_@types+node@20.3.1_sass@1.55.0/node_modules/vite/dist/node/chunks/dep-68d1a114.js:44352:30)
at async loadAndTransform (file:///Users/ragnarok/Downloads/UI/metronic_v8.2.2/react/metronic_react_v8.2.2_demo1/node_modules/.pnpm/vite@4.5.1_@types+node@20.3.1_sass@1.55.0/node_modules/vite/dist/node/chunks/dep-68d1a114.js:55026:29)
[postcss] ENOENT: no such file or directory, open 'flatpickr/dist/flatpickr.css'```


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (4)


Hi,

Unfortunately, we were not able to reproduce this problem in the latest Metronic version.

Can you try to install dependencies with npm or yarn?


  1. Delete node_modules and yarn.lock/pacakge-lock.json.

  2. Run command to clear npm cache npm cache clean --force.

  3. Then install dependencies again with npm install or yarn install.



Regards,
Lauris Stepanovs,
Keenthemes Support Team

i have already on latest LTE Node version and clean cache as well but its not intalling with NPM also package.lock file deleted.

Metronics has down in technologies day by day.



its showing dependencies compatibility issue and not install. you did not setup compatible dependencies with your latest react demo.



Review any error messages or console logs for any specific clues about what might be causing the issue merge fruit.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(