csstools / postcss-preset-env

Convert modern CSS into something browsers understand
https://github.com/csstools/postcss-plugins/tree/main/plugin-packs/postcss-preset-env
Creative Commons Zero v1.0 Universal
2.22k stars 90 forks source link

Updating browserslist without upgrading postcss-preset-env caused "Cannot find module" #237

Closed CaitlinWeb closed 2 years ago

CaitlinWeb commented 2 years ago

Ran into an issue after running npx browserslist@latest --update-db due to an outdated dependency of postcss-preset-env, postcss-focus-within.

I encountered this error during deployment (but not locally):

ModuleError: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
         Loading PostCSS "postcss-preset-env" plugin failed: Cannot find module 'postcss-focus-within'

Upgrading postcss-preset-env fixed it.

prior version: 6.7.0 working version: 7.3.1


Is it recommended to upgrade postcss-preset-env when updating the browserslist db (ie caniuse-lite)?

The reason I ask is we've automated running npx browserslist@latest --update-db in a GitHub action during deploy, so I want to make sure this doesn't break deployments in the future. Any advice is appreciated!

Antonio-Laguna commented 2 years ago

@CaitlinWeb thanks for reaching out and I'm sorry you're experiencing that issue.

It shouldn't be necessary to upgrade postcss-preset-env to upgrade browserlist. However, 6.7.0 is quite an old version and I'm not sure how / if we could fix it.

Out of curiosity, what's your PostCSS version? Version 7 is made for PostCSS 8 (current version) whereas 6 was made for PostCSS 7. We recommend upgrading as we're keeping postcss-preset-env alive and new features (and fixes) are pouring in.

CaitlinWeb commented 2 years ago

PostCSS version: 8.4.6

Got it, I think the issue was that we were using PostCSS 8 with postcss-preset-env on version 6. Good to know that this isn't an issue I have to watch out for in the future. Seems to just have been caused by using on an old version meant for PostCSS 7.

Thank you for the quick response and clarifying the source of this issue for me, @Antonio-Laguna!