Sign up for early access for MySQL for Developers, a video course I'm working on.

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

mix
.js('resources/js/ssr.js', 'public/js')
.vue({
version: 3,
useVueStyleLoader: true // This should fix it!
});
Code highlighting powered by torchlight.dev (A service I created!)

Let me know on twitter if this worked or not!

Thanks for reading! My name is Aaron and I'm the Marketing Engineer at Tuple — the best remote pair programming app.

My main project focus is Hammerstone, where we build components for your Laravel and Rails applications. I currently do a podcast.

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