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?

I don’t know if you’ve had any more luck over the last month or so, and I’ve yet to find a permanent solution but after banging my head against it (and Sage 10 thanks to live reload under WSL2 ), I’ve found a hacky workaround that will do for me at the minute, though might not be for everyone!

Basically in @roots/bud-vue/lib/cjs/extension.js within the addStyleLoader() function it seem that if I comment out => ['vue-style', ...items]); and just leave the similar line below for sass then everything starts working as normal so long as your component’s style tags don’t have the lang="scss" property.

If they do have lang="scss" then it all breaks again, though it seems you can comment out the rules.sass? line and add the original rules.css line back in and it will start working again. Though the original locals/content undefined message comes back in that instance but things still seem to work.

This is on bud 5.8.7 and bud-vue 5.8.7. As I say, not an ideal solution and it feels like maybe lurking in the docs or on Github is how to override these build.rules from the bud.config.js file. However, I’ve not managed to work it out yet but will hopefully get there eventually!

1 Like

Hello @Codent, i hope this can help.

It was a pretty easy fix. I don’t use vue so I don’t know why this works.

export default async app =>{esModule: false})

Here is a vue 3 app that works with scss. I tried scoped and global styles and both seem to behave as one might expect.

Edit bud-example-vue-3

1 Like

As for chaining in a config… you should use the bud.tap function.

export default async bud => {
    // in a config chain
    .entry('app', ['index.js'])

    // call tap and use callback to do weedy stuff
    .tap(bud => {
      // vue fix{esModule: false})
      // tap doesn't care what you return. it will always return bud.

    .proxy('http://example.test') // continue chaining off tap

Thank you very much for the support, it works perfectly


bud@6.3.0 is on npm and includes this fix in @roots/bud-vue directly. Updated the sandbox (just removed the now redundant config call).

Edit bud-example-vue-3

Thanks for the help @Guto and for the fix @kellymears, much appreciated! Looking forward to giving Bud 6.3.0 a go later this week!

1 Like