Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Error Integrating Metronic 9 with Laravel 



~/PhpstormProjects/cms-app git:[main]

pnpm run build



> @ build /home/alex/PhpstormProjects/cms-app

> vite build



vite v5.4.0 building for production...

✓ 58 modules transformed.

x Build failed in 635ms

error during build:

[vite:css] [postcss] Cannot read properties of undefined (reading "light")

file: /home/alex/PhpstormProjects/cms-app/resources/css/app.scss:undefined:NaN

    at getDefaultGrayColors (/home/alex/PhpstormProjects/cms-app/resources/metronic/core/plugins/components/theme.js:32:41)

    at /home/alex/PhpstormProjects/cms-app/resources/metronic/core/plugins/components/theme.js:119:7

    at registerPlugins (/home/alex/PhpstormProjects/cms-app/node_modules/.pnpm/tailwindcss@3.4.10/node_modules/tailwindcss/lib/lib/setupContextUtils.js:815:61)

    at createContext (/home/alex/PhpstormProjects/cms-app/node_modules/.pnpm/tailwindcss@3.4.10/node_modules/tailwindcss/lib/lib/setupContextUtils.js:1221:5)

    at getContext (/home/alex/PhpstormProjects/cms-app/node_modules/.pnpm/tailwindcss@3.4.10/node_modules/tailwindcss/lib/lib/setupContextUtils.js:1278:19)

    at /home/alex/PhpstormProjects/cms-app/node_modules/.pnpm/tailwindcss@3.4.10/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:118:81)

    at /home/alex/PhpstormProjects/cms-app/node_modules/.pnpm/tailwindcss@3.4.10/node_modules/tailwindcss/lib/processTailwindFeatures.js:46:11)

    at plugins (/home/alex/PhpstormProjects/cms-app/node_modules/.pnpm/tailwindcss@3.4.10/node_modules/tailwindcss/lib/plugin.js:38:69)

    at LazyResult.runOnRoot (/home/alex/PhpstormProjects/cms-app/node_modules/.pnpm/postcss@8.4.41/node_modules/postcss/lib/lazy-result.js:329:16)

    at LazyResult.runAsync (/home/alex/PhpstormProjects/cms-app/node_modules/.pnpm/postcss@8.4.41/node_modules/postcss/lib/lazy-result.js:258:26)


/* Main style */
@tailwind base;
@tailwind components;
@tailwind utilities;


@import "../metronic/vendors/keenicons/duotone/style.css";
@import "../metronic/vendors/keenicons/filled/style.css";
@import "../metronic/vendors/keenicons/outline/style.css";
@import "../metronic/vendors/keenicons/solid/style.css";


user
Alex Nogueira 1 year ago
Laravel Tailwind 4
3 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 (3)

user
Faizal Author 1 year ago

Hi Alex,

Are you using Laravel from our sample project on GitHub? https://github.com/keenthemes/metronic-tailwind-html-integration

We're unsure if pnpm works the same way as npm for this setup. Could you please try running the installation commands with npm install and npm run build instead?

For further details, please refer to the documentation if you haven't already:

https://keenthemes.com/metronic/tailwind/docs/getting-started/integration/laravel

Thank you!

user
Alex Nogueira 1 year ago

Can I configure it to use Livewire?


user
Faizal Author 1 year ago

Yes, you can configure the Laravel project to use Livewire. While we haven't installed Livewire in the project by default, you can easily add it by following the installation instructions in the Livewire documentation


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