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

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

Deleted comment

In your absence, I would be at a loss regarding my course of action. Your help is highly valued. papa's freezeria


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