I'm building out a Shedquarters in my backyard! Check out the ever-evolving post + pictures here →

Laravel + Vue: ReferenceError document is not defined at insertStyleElement

June 22, 2021

If you're running into a document is not defined at insertStyleElement error with Vue + Laravel, it's likely because Laravel Mix changed the way they are handling styles in single-file Vue components in version 6.0.20.

You can compare version 6.0.19 to 6.0.20 here, specifically it looks like this commit:

vue-style-loader

I'll be honest, I don't fully understand the reasoning and all the discussion behind the change, but basically what they did is make the vue-style-loader opt in instead of opt out. This can lead to issues during SSR, when there is no document.

You can fix it is by adding one line to your webpack.mix.js to opt in to using the vue-style-loader:

webpack.mix.js

1mix
2 .js('resources/js/ssr.js', 'public/js')
3 .vue({
4 version: 3,
5 useVueStyleLoader: true // This should fix it!
6 });
Code highlighting powered by torchlight.dev.

Let me know on twitter if this worked or not!

Thanks for reading! My name is Aaron and I'm currently working at small property tax firm in Texas called Resolute Property Tax Solutions, where I serve in dual roles as COO & CTO.

I work on a lot of projects. I'm building a shedquarters. I currently do a podcast, and I used to do a different podcast.

If you ever have any questions or want to chat, I'm always on Twitter
Copyright 2013 - 2021, Aaron Francis.