Vue / @bud-vue - Cannot read properties of undefined (reading 'locals')

Hi there, I can’t seem to dig this one out, so perhaps someone can help or point me in the right direction?

I’ve installed under WSL2 with the files on the WSL file system, a fresh release of Bedrock, Sage (10.1.6), @roots/bud (5.7.7) and @roots/bud-tailwindcss (5.7.7) which all initially seemed fine. However once I added @bud-vue (5.7.7) I immediately received the following console error:

Uncaught TypeError: Cannot read properties of undefined (reading 'locals')

Here’s the part of my app.js file where it’s falling over:

Initially it didn’t seem to be causing a problem as the CSS and Vue components were rendering fine. However, as soon as I used an SFC which had style tags, all the CSS for the entire theme stopped working. Removing the style tags from the SFC allowed the theme’s CSS to render correctly again. Removing @roots/bud-vue immediately removes the console error.

A Google search lead me to these SO answers which link back to this Github mini-css-extract-plugin repo issue issue which suggests the problem is do with trying to use mini-css-extract-plugin and style-loader together.

It seems like this could well be the case here too but after trying and failing to make much headway for the past day or so, I’ve had to go back to Sage 9 to until I can get to the bottom of it.

1 Like

I have the same problem with Sage 10 and Vue 3, any solution?

Hi Guto,

I’ve been away for a few days but was keen to see that you’d found a solution. Unfortunately I couldn’t get it to work when I tried this morning and I see you’ve removed your post today. Was that due to also having problems with the fix you’d found?

When I tried what you suggested it didn’t seem to like chaining with entry, assets etc. I’ve spent the morning playing around, looking at the docs and the Bud Github repo to see if I can get to the bottom of it, but haven’t had any luck nor found anything particularly useful unfortunately.

using bud-vue breaks my project too in the same way, any help would be greatly appreciated.

Hi, Try adding lang=“scss” in styles tags, it work in my case.

this doesn’t work if for example you are importing external components that you can’t modify

@Davide_0 , i just migrated from react to vue so I’m not an especialist in vue, can you show the code that prevents you styling imported components?

@Guto what I meant is that your workaround, adding lang=“scss” to sfc, can’t work in the case of imported components from external packages, given you can’t modify them, for example packages you are importing from node_modules

1 Like

Has anyone found a solutions to this?