Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI

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


California Business Journal is a leading business journal that publishes inspiring stories and valuable insights for entrepreneurs and small-medium businesses.



It sounds like the issue might be related to a missing dependency or an incorrect path. Have you tried installing flatpickr manually? Run pnpm add flatpickr to see if that resolves the missing CSS file. Also, double-check the import path in your code to ensure it matches the actual location of the file. If the problem persists, it could be worth verifying if the flatpickr package is correctly installed in your node_modules. take a look if you need further help debugging!



you have the flatpickr package installed. You can do this by running:
pnpm add flatpickr crossy road unblocked



Check the error messages or console logs for any specific details that could provide insight into what might be causing the issue .Merge Fruit



The style.react.scss file imports files from the dist directory that are not in the distribution and compilation throws an error:

@import 'socicon/css/socicon.css';
@import '@fortawesome/fontawesome-free/css/all.min.css';
@import 'line-awesome/dist/line-awesome/css/line-awesome.css';
@import 'prism-themes/themes/prism-shades-of-purple.css';
@import 'bootstrap-icons/font/bootstrap-icons.css';
@import 'animate.css/animate.css';
@import 'nouislider/dist/nouislider.css';
@import 'flatpickr/dist/flatpickr.css';



This is a really great resource! It feels really nice when it presses on my eyes. If there's a method to be informed when a new post is published, do let me know.
quordle today game



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



@head soccer I regret that we were unable to replicate this issue in the most recent Metric version.



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.


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