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!

Join my newsletter

I'll send you emails. Not too many. Anytime I post a new article, or make a new video, or do something else I think you might like. No spam, obviously.

Thanks for reading! My name is Aaron and I'm a Developer Educator at PlanetScale — a serverless MySQL database company.

My main project focus is Hammerstone, where we build components for your Laravel and Rails applications. My business partner and I do a podcast where we talk about building a software company.

I do another podcast about web frameworks called Framework Friends.

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