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.
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 app.build 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.
@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
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 this.app.build.rules.css.setUse(items => ['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!
As for chaining bud.build in a config… you should use the bud.tap function.
export default async bud => {
bud
// in a config chain
.entry('app', ['index.js'])
// call tap and use callback to do weedy stuff
.tap(bud => {
// vue fix
bud.build.items.precss.setOptions({esModule: false})
// tap doesn't care what you return. it will always return bud.
})
.proxy('http://example.test') // continue chaining off tap
}
