Sage 10 - Bud doesn't start the dev server when using a plugin

bud
1

When using the ‘svg-spritemap-webpack-plugin’ plugin on bud, the local server of localhost:3000 doesn’t start and it only says: Sorry can’t find that!

It works fine if I remove the plugin. This is the bud config of the plugin:

const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin');

module.exports = async (config) =>
  config
    .use(new SVGSpritemapPlugin('resources/sprite/*.svg', {
      output: {
        filename: 'spritesheet.svg',
        chunk: { keep: true },
        svgo: false,
      },
    }))
2

:eyes: Hey there! Mind getting a bug report opened on the Bud repo?

3

I think this is fixed in bud 5.1.0. I just tested it and it does not cause any errors in the terminal or browser.

4

I did upgrade with yarn upgrade @roots/bud but now when I run yarn dev it just returns

TypeError: Cannot read properties of undefined (reading 'store')

on the terminal.

5

you should open an issue in the bud repo.

for now, without much else to go on, you should:

  • run yarn bud install to update your package.json dependencies
  • run yarn install to install them

you can see the expected dependencies in the current main branch of roots/sage, for reference.

not sure if you read the release notes for bud v5.1.0 but there is a change that needs to be made to the bud.assets() call in your config.

for further debugging please make an issue on github. the issue form will ask you for some files from the .budfiles directory of your project along with a few other critical pieces of information that will make it much easier for me to help.

1 Like
6

Ok, I opened a bug report here: The dev server doesn't start when using a plugin · Issue #1003 · roots/bud · GitHub

Thanks!

Although, after updating to the new versions of Bud and Sage, other problems have come up:

The SASS file doesn’t get compiled.
The JS file path is incorrect, it adds localhost:3000 in the URL, it is like this:
http://mysite-sage.test/app/themes/mysite-sage/public/http://localhost:3000app.js

When I installed the new Sage from scratch it was shown like this:
http://mysite-sage.test/app/themes/mysite-sage/public/undefinedapp.js

Maybe I should open a new issue here at discourse about these?

7

i’ll have to look into this.

you need to update acorn in composer.json. snag the current version from roots/sage repo’s composer.json.

you aren’t setting a publicPath in bud.config.js, which is required in order for sage to work properly in development mode.

based on my interpretation of your filepath, it’s probably:

bud.setPublicPath('/app/themes/galia-sage/')

the relevant output in webpack.config.js:

  "output": Object {
    ...,
    "publicPath": "",
  },

that string shouldn’t be empty.

8

Thanks for the information. It worked, also with the reply I had in the repo.

The only thing that doesn’t totally work is the SASS compilation. When I’m running yarn dev it updates the CSS, but only as <style></style> not as app.css, while when running yarn build it works as expected.

9

in order for hot reload to work styles are applied by js in development. there is no css file generated. when you update your source files the style tag is updated directly in the DOM.

10

Ah, I see, thanks :smiley:

So, for anyone else that came here for the issue title, the solution is here: The dev server doesn't start when using a plugin · Issue #1003 · roots/bud · GitHub but I’m sure this will get fixed in a future release.

Marking this as solved.