sanity: [plugin:vite:css] [postcss] Cannot read properties of undefined (reading 'config')

Trying to migrate an existing studio from V2 to V3

[plugin:vite:css] [postcss] Cannot read properties of undefined (reading 'config')
    at getTailwindConfig (/Users/briannelson/Documents/GitHub/ross-rings-app/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:84:63)
    at /Users/briannelson/Documents/GitHub/ross-rings-app/node_modules/tailwindcss/lib/lib/setupTrackingContext.js:96:92
    at /Users/briannelson/Documents/GitHub/ross-rings-app/node_modules/tailwindcss/lib/processTailwindFeatures.js:46:11
    at plugins (/Users/briannelson/Documents/GitHub/ross-rings-app/node_modules/tailwindcss/lib/index.js:38:63)
    at LazyResult.runOnRoot (/Users/briannelson/Documents/GitHub/ross-rings-app/admin/node_modules/postcss/lib/lazy-result.js:339:16)
    at LazyResult.runAsync (/Users/briannelson/Documents/GitHub/ross-rings-app/admin/node_modules/postcss/lib/lazy-result.js:393:26)
    at LazyResult.async (/Users/briannelson/Documents/GitHub/ross-rings-app/admin/node_modules/postcss/lib/lazy-result.js:221:30)
    at LazyResult.then (/Users/briannelson/Documents/GitHub/ross-rings-app/admin/node_modules/postcss/lib/
Screen Shot 2022-11-18 at 1 36 27 PM

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 8
  • Comments: 21 (2 by maintainers)

Commits related to this issue

Most upvoted comments

I was also getting the same error. I got it working by deleting the tailwindcss:{} line in the postcss.config.js file.

This is very confusing, but indeed - it seems to be caused by a parent folder containing any postcss configuration allowed by postcss-load-config, such as a postcss.config.js, .postcssrc or similar.

I’ve created a PR against Vite that should allow for us to disable this behavior, but it is unclear whether or not it will be accepted, and will in any case take some time to land.

For now, you should be able to work around this issue by placing a postcss.config.js file containing module.exports = {} in your Sanity project folder.

Please stop commenting on this issue. It has been closed.

To resolve the issue, you can follow these steps:

Install Tailwind CSS and PostCSS, along with Autoprefixer, by running the following command: npm install -D tailwindcss postcss autoprefixer

Once the installation is complete, initialize Tailwind CSS configuration by executing the following command: npx tailwindcss init -p

For more detailed information, you can refer to : [https://tailwindcss.com/docs/guides/vite]

I did by created tailwind.config.js file

module.exports = { content: [ './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './app/**/*.{js,ts,jsx,tsx}', ], theme: { extend: {}, }, plugins: [], }

Please stop commenting on this issue. It has been closed.

it is not solved though, there are still issues out of the box, I had to apply the workaround posted by @keshri95 to fix it

I get this when creating any project with vite, none of the projects come with a postcss config file out of the box, or after I npm install

Getting a similar error 18:30:34 ~/Projects/Blog/sanity main $ sanity dev ✔ Checking configuration files... Sanity Studio using vite@3.2.5 ready in 1166ms and running at http://localhost:3333 18:31:11 [vite] Internal server error: [postcss] Cannot read properties of undefined (reading 'config')

Looks like it could be something todo with me having the sanity project nested within a project that is using tailwind.

Edit: Can confirm that sanity works fine outside of the project that contains the tailwind / next config.

Getting a similar error 18:30:34 ~/Projects/Blog/sanity main $ sanity dev ✔ Checking configuration files... Sanity Studio using vite@3.2.5 ready in 1166ms and running at http://localhost:3333 18:31:11 [vite] Internal server error: [postcss] Cannot read properties of undefined (reading 'config')

Looks like it could be something todo with me having the sanity project nested within a project that is using tailwind.

Edit: Can confirm that sanity works fine outside of the project that contains the tailwind / next config.

yes. its working outside tailwind/next…

Please, need help with this error

I ran into this error today, using Svelte and Tailwind in a parent directory.

I’ve fixed my error by putting an empty postcss.config.mjs file into my Sanity studio directory

export default {
  plugins: {},
}

I have successfully deployed the studio, but I’m cautious that this this configuration might cause problems in the future.


[plugin:vite:css] [postcss] Cannot read p

How can I fix it

I only had one postcss config in my setup. So the suggested solution didn’t work for me. But I found another solution where you use path.join(__dirname, ...) in both, the postcss config and tailwind config. This solved the problem for me.

More on that in this comment here: https://github.com/tailwindlabs/tailwindcss/issues/6393#issuecomment-1080723375