The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro
Light
Dark
System
Ask  Question

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'```
user
Adharsh M 2 years ago
React
4 Answers
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 (4)

 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
 
Deleted comment
user
Space Qukla 2 years ago

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';


 
Deleted comment
 
Deleted comment
 
Deleted comment
user
Lauris Stepanovs Author 2 years ago

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
user
H H 2 years ago

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.


user
H H 2 years ago

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

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.

ReUI by Keenthemes React Components UI Blocks React Templates ReUI Documentation