Laravel + Vue: ReferenceError document is not defined at insertStyleElement

A simple one-line configuration tweak in your build script is all it takes to resolve the frustrating style loader error plaguing developers using Laravel Mix version 6.0.20 and above.

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:

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!
    });

Let me know on twitter if this worked or not!