TypeError: Cannot set property 'parent' of undefined

[jenniferhail]

I did the quick setup on Vercel, but I'm running into issues after cloning my repo and trying to set it up locally.

Initially I had issues running npm install in the project directory, but finally got that to work after switching to node v. 14.17.0. Not sure why I was having so much trouble with the other versions of 14.

Now, I'm getting this after running npm run dev. To note, I can get the studio up and running on local.

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/jenhail/Sites/lujo-shopify-sanity/.env.local
wait  - compiling...
error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[3].oneOf[8].use[2]!./styles/app.css
TypeError: Cannot set property 'parent' of undefined

I'm thinking this is related to how I'm connecting my Shopify store, but it doesn't make sense to me yet. Not sure what else to try.

[valse]

Hi, that error is related to Tailwind, it means there are some CSS bad rules... Did you changed some styles or upgraded package versions?

[jenniferhail]

Hi @valse, thanks for the quick response!

I've narrowed it down to Tailwind issues in _drawers.css, _dropdowns.css, and _filters.css. Looks like using @apply inside media queries doesn't want to compile. And commenting out css like this in all three of the files removes the errors.

@media (min-width: 400px) {
    @apply border-r;
  }

If it helps, these are my dependency versions. I haven't changed any styles yet. So far I'm just trying to get local working and learning how to use Sanity.

"dependencies": {
    "@mailchimp/mailchimp_marketing": "^3.0.71",
    "@reach/rect": "^0.16.0",
    "@sanity/block-content-to-react": "^3.0.0",
    "@sanity/client": "^3.0.3",
    "@sanity/image-url": "^1.0.1",
    "@vimeo/player": "^2.15.3",
    "axios": "^0.25.0",
    "base64-string": "^1.1.2",
    "classnames": "^2.2.6",
    "contrast-color": "^1.0.1",
    "cross-env": "^7.0.3",
    "embla-carousel-react": "^6.0.2",
    "focus-trap-react": "^8.8.2",
    "framer-motion": "^5.5.5",
    "js-cookie": "^3.0.0",
    "jsondiffpatch": "^0.4.1",
    "marqy": "^0.0.8",
    "next": "^12.0.7",
    "next-themes": "^0.0.15",
    "qs": "^6.10.1",
    "query-string": "^7.0.1",
    "raw-body": "^2.4.1",
    "react": "^17.0.2",
    "react-cool-inview": "^2.0.8",
    "react-dom": "^17.0.2",
    "react-hook-form": "^7.18.0",
    "react-keyed-flatten-children": "^1.3.0",
    "shopify-buy": "^2.13.0",
    "sitemap": "^7.0.0",
    "swr": "^1.0.0"
  },
  "devDependencies": {
    "@next/bundle-analyzer": "^12.0.1",
    "@types/classnames": "^2.2.10",
    "@types/cookie": "^0.4.0",
    "@types/node": "^17.0.0",
    "@types/react": "^17.0.33",
    "@types/shopify-buy": "^2.10.5",
    "autoprefixer": "^10.4.0",
    "cssnano": "^5.0.13",
    "postcss": "^8.3.11",
    "postcss-import": "^14.0.2",
    "tailwindcss": "^3.0.5",
    "typescript": "^4.4.4"
  },
  "peerDependencies": {
    "postcss": "^8.4.5"
  }

Using an M1 Mac node 14.17.0

[ndimatteo]

Hey there @jenniferhail, do you know what version of tailwind is actually installed? They've had a number of changes in the v3 releases that may have removed the ability to parse custom @media queries with @apply within them, which would explain why those were breaking your build.

For what it's worth, the version installed out of the box with the current version of HULL does compile, so I'm wondering if you have a later minor release that introduced this issue.

Closing this for now, but feel free to continue the conversation if you uncover more to the story. Happy coding! 🤘