Level 102
Most likely an error in your code or a missing post css config file. But hard to guess without the error and 0 lines of code
Feb 3, 2023
11
Level 1
Laravel vite post css issue
Hi, I am using Laravel 9 and trying to integrate react js design in it with vite but it's giving me error of postcss when I import css file in code and use npm run dev command but if I comments css files import statement design loads without css. Can anyone tell me what can be wrong with it
Thanks
Level 1
@Sinnbeck where can I check for that file? Postcss package is installed
Level 102
@maazkhan1 posted an example from breeze below :)
Level 55
Do you have postcss.config.js file? and what is inside of it? can you show us? Also what's the version of your vite and Node?
Level 1
@azimidev vite version is 4.0 and I don't have any postcss config file but post css package is installed. Can you share example post css file and where I have to place it Thanks
Level 102
@maazkhan1 https://github.com/laravel/breeze/blob/1.x/stubs/default/postcss.config.js
Root of the project
Level 1
@Sinnbeck thanks
Level 1
HI, I put Postcss config file on root of project and put this content in the file. I am new to laravel vite and Postcss so I have no idea about Postcss config. I am using Laravel Vite to create Laravel Shopify app using Laravel Shopify package. My react design doesn't contain tailwind css. module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, }, };
These are the errors I am facing
Plugin: vite:esbuild File: D:/apps/.../resources/js/components/navigation-menu/MainNavigation.jsx [postcss] Cannot read properties of undefined (reading 'config') [postcss] Cannot read properties of undefined (reading 'config') (x2) [postcss] Cannot read properties of undefined (reading 'config') (x3) 10:31:41 AM [vite] Internal server error: [postcss] Cannot read properties of undefined (reading 'config') Plugin: vite:css File: D:/apps/.../resources/js/index.css:undefined:undefined at getTailwindConfig (D:\apps...\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:84:63) at D:\apps...\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:96:92 at D:\apps...\node_modules\tailwindcss\lib\processTailwindFeatures.js:46:11 at plugins (D:\apps...\node_modules\tailwindcss\lib\index.js:38:63) at LazyResult.runOnRoot (D:\apps...\node_modules\postcss\lib\lazy-result.js:339:16) at LazyResult.runAsync (D:\apps...\node_modules\postcss\lib\lazy-result.js:393:26) at LazyResult.async (D:\apps...\node_modules\postcss\lib\lazy-result.js:221:30) at LazyResult.then (D:\apps...\node_modules\postcss\lib\lazy-result.js:206:17) 10:31:41 AM [vite] Internal server error: [postcss] Cannot read properties of undefined (reading 'config') Plugin: vite:css File: D:/apps/.../node_modules/@shopify/polaris/build/esm/styles.css:undefined:undefined at getTailwindConfig (D:\apps...\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:84:63) at D:\apps...\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:96:92 at D:\apps...\node_modules\tailwindcss\lib\processTailwindFeatures.js:46:11 at plugins (D:\apps...\node_modules\tailwindcss\lib\index.js:38:63) at LazyResult.runOnRoot (D:\apps...\node_modules\postcss\lib\lazy-result.js:339:16) at LazyResult.runAsync (D:\apps...\node_modules\postcss\lib\lazy-result.js:393:26) at LazyResult.async (D:\apps...\node_modules\postcss\lib\lazy-result.js:221:30) at LazyResult.then (D:\apps...\node_modules\postcss\lib\lazy-result.js:206:17) 10:31:41 AM [vite] Internal server error: [postcss] Cannot read properties of undefined (reading 'config') Plugin: vite:css File: D:/apps/.../resources/js/App.css:undefined:undefined at getTailwindConfig (D:\apps...\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:84:63) at D:\apps...\node_modules\tailwindcss\lib\lib\setupTrackingContext.js:96:92 at D:\apps...\node_modules\tailwindcss\lib\processTailwindFeatures.js:46:11 at plugins (D:\apps...\node_modules\tailwindcss\lib\index.js:38:63) at LazyResult.runOnRoot (D:\apps...\node_modules\postcss\lib\lazy-result.js:339:16) at LazyResult.runAsync (D:\apps...\node_modules\postcss\lib\lazy-result.js:393:26) at LazyResult.async (D:\apps...\node_modules\postcss\lib\lazy-result.js:221:30) at LazyResult.then (D:\apps...\node_modules\postcss\lib\lazy-result.js:206:17)
Level 102
@maazkhan1 so you are using tailwind? Seems like you have an error in MainNavigation.jsx
Level 1
@Sinnbeck no I am not using tailwind anywhere in code
Level 1
I am using Shopify Polaris and mui in react design and integrating it with laravel 9 if I comments css files import designs loads without style
Please or to participate in this conversation.