Webpacker 6: Troubleshooting Guide

Share:
Please consider sharing 🙏
Published At:
Dec 24th, 2020
Tags:
#rails, #webpacker, #tutorial, #debugging
Next:
Webpacker 6: Tailwind CSS 2.0 Integration
Previous:
Webpacker 6: Image Asset Guide

A (growing) collection of tools and techniques for debugging your Webpack(er) setup.

I highly recommend reading the SurviveJS - Webpack 5 ebook for a real deep dive!.

Locating the Issue

Use the network tab in your browser to view the CSS that’s being sent to the browser for clues.

Cached Styles

If you update your styles but your UI does not change and there are no errors, it’s likely browser caching.

Hard reload after clearing your cache and you should see your changes.

To avoid these errors, import your styles into your JS pack vs. using style-loader.

Tools

Dashboards

View All Articles

Want to receive news and updates?