# Bud v5.6.0 released **URL:** https://discourse.roots.io/t/bud-v5-6-0-released/22587 **Category:** bud **Tags:** releases **Created:** 2022-03-16T01:11:52Z **Posts:** 20 ## Post 1 by @kellymears — 2022-03-16T01:11:52Z [bud v5.6.0 released](https://github.com/roots/bud/releases/tag/v5.6.0) ## Performance bud is now about 30% faster :tada:. There is a new CLI flag `--flush` which will force a full recompilation if you feel like something is goofy. It’s also recommended to run `bud clean` after installing an update. ## Notifier MacOS notification center notices are fixed. If you don’t want them run the cli command with the `--no-notify` flag. ## **bud.path** and **bud.setPath** TLDR: Way less clunky to work with. - `bud.path()` can be called with no parameters will now resolve to the project root. - `bud.path('relative/path')` now returns an absolute path from a project relative one. - `bud.path('/absolute/path')` is recognized as an absolute path and will not be interpolated. - There are several reserved strings referencing key directories: `@src`, `@dist`, `@storage`, `@modules`. The `@` prefix is now being used to make it clearer that this is not a normal path. - You can use `bud.setPath` to define additional directory aliases: ``` bud.setPath({'@config': 'app/config/directory'}) bud.path('@config/config-file.json') // => [root]/app/config/directory/config-file.json ``` - This only applies to the _first segment_ and only when the _@_ symbol is prefixed. `app/@alias/example` will not work. - This does not automatically make webpack aliases from a path. To use the same convention in your client scripts you still need to use `bud.alias`. ### :warning: Upgrade guide - Any calls which referenced `'project'` as the first parameter should have that parameter removed. Examples: - Any calls which used `src`, `dist`, `storage` or `modules` as the first parameter should be updated to use the `@` prefix. Examples: - Any calls to `bud.setPath` which referenced those magic strings also needs to be updated. Example: ## Defining modules is a lot easier Want to add support to bud for some arcane syntax? Great news, the API for `loaders`, `items` and `rules` just got a nice upgrade. Here’s typescript. ``` app.build .setLoader('ts', 'ts-loader') .setItem('ts', {loader: 'ts', options: {}}) .setRule('ts', {test: /\.tsx?/, use: [`babel`, `ts`]}) ``` If you just want to modify an existing rule, there is lots for you in this update: ``` app.build.rule.ts.setUse([`babel`, `ts`]) app.build.loaders.ts.setSrc(`alternate-ts-loader`) app.build.items.ts.setOptions({...options}) ``` Extension authors should take advantage of how all properties for loader, item, and rule definitions can be expressed with a callback. This means if someone changes their source path later your rule will still be pointed in the right direction. ## More information - [Read the release notes](/releases/5.6.0) - [Review the diff to see what’s changed](https://github.com/roots/bud/compare/v5.4.0...v5.6.0) ## Changelog - docs: update by @kellymears in [docs: update by kellymears · Pull Request #1221 · roots/bud · GitHub](https://github.com/roots/bud/pull/1221) - :wrench: docs header: add discourse link by @retlehs in [https://github.com/roots/bud/pull/1223](https://github.com/roots/bud/pull/1223) - fix: docs fouc by @kellymears in [https://github.com/roots/bud/pull/1222](https://github.com/roots/bud/pull/1222) - :sparkles: add discourse topic release workflow by @retlehs in [https://github.com/roots/bud/pull/1234](https://github.com/roots/bud/pull/1234) - improve: build, cache, compiler by @kellymears in [https://github.com/roots/bud/pull/1229](https://github.com/roots/bud/pull/1229) - fix: macos notifier by @kellymears in [https://github.com/roots/bud/pull/1236](https://github.com/roots/bud/pull/1236) **Full Changelog** : [https://github.com/roots/bud/compare/v5.5.0...v5.6.0](https://github.com/roots/bud/compare/v5.5.0...v5.6.0) --- ## Post 2 by @BSBjorn — 2022-03-16T07:07:14Z I get this Error when ugradingto 5.6, running on 5.5 works fine? ``` [webpack-dev-middleware] Error: TypeError [ERR_INVALID_ARG_TYPE]: The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received undefined at /Users/bjorn/Projects/Sites/kyrkjebygd.test/web/app/themes/kyrkjebygdheia/node_modules/@roots/sage/lib/cjs/theme/plugin.js:18:23 ``` My bud config. ``` /** * @typedef {import('@roots/bud').Bud} bud * * @param {bud} app */ module.exports = async (app) => { app /** * Application entrypoints * * Paths are relative to your resources directory */ .entry({ app: ['@scripts/app', '@styles/app'], banner: ['@scripts/banner'], editor: ['@scripts/editor', '@styles/editor'], }) /** * These files should be processed as part of the build * even if they are not explicitly imported in application assets. */ .assets('images') /** * These files will trigger a full page reload * when modified. */ .watch([ 'tailwind.config.js', 'resources/views/**/*.blade.php', 'app/View/**/*.php', ]) /** * Target URL to be proxied by the dev server. * * This is your local dev server. */ .proxy('http://kyrkjebygdheia.test') /** * Development URL */ .serve('http://kyrkjebygdheia.test:3000') /** * Generate WordPress `theme.json` * * @note This overwrites `theme.json` on every build. */ .themeJson({ color: { custom: false, customGradient: false, defaultPalette: false, defaultGradients: false }, custom: { spacing: {}, typography: { fontSize: {}, lineHeight: {} } }, spacing: { padding: true, units: ["px", "%", "em", "rem", "vw", "vh"] }, typography: { customFontSize: false } }) /** * Set `theme.json` colors from `tailwind.config.js` values */ .useTailwindColors(); }; ``` --- ## Post 3 by @Gydo_Verbeek — 2022-03-16T09:03:03Z I get an error, also got it at version 5.5 ``` TypeError: mod.require is not a function at dynamicRequire ([secure]/node_modules/@roots/bud-support/lib/cjs/index.js:4683:14) at Object.exports.install ([secure]/node_modules/@roots/bud-support/lib/cjs/index.js:5307:16) at installSourceMapSupport ([secure]/node_modules/@roots/bud-support/lib/cjs/index.js:127001:26) at create ([secure]/node_modules/@roots/bud-support/lib/cjs/index.js:126999:5) at register ([secure]/node_modules/@roots/bud-support/lib/cjs/index.js:126862:19) at Bud.read ([secure]/node_modules/@roots/bud-support/lib/cjs/index.js:133020:9) at [secure]/node_modules/@roots/bud/lib/cjs/services/Project/project.service.js:169:45 at Array.map () at Project.searchConfigs ([secure]/node_modules/@roots/bud/lib/cjs/services/Project/project.service.js:151:72) at Project.boot ([secure]/node_modules/@roots/bud/lib/cjs/services/Project/project.service.js:88:20) ``` Am I missing something? Cleared yarn cache, re-install but no success… --- ## Post 4 by @kellymears — 2022-03-16T11:57:19Z @BSBjorn i pushed a fix for this in 5.6.1. it’s available on npm now. thanks for the heads up. --- ## Post 5 by @BSBjorn — 2022-03-16T12:42:06Z @kellymears works like a dream now :slight_smile: :smiling_face_with_three_hearts: --- ## Post 6 by @kellymears — 2022-03-16T13:07:21Z @Gydo_Verbeek i’m guessing based on context you are configuring bud with typescript. I can reproduce and have a patch in process: > > > ## Overview > > - fix ts config files > > refers: none > closes: none > > ## Type of… change > > - PATCH: Backwards compatible bug fix > > > > This PR includes breaking changes to the following core packages: > > - none > > This PR includes breaking changes to the follow extensions: > > - none > > ## Dependencies > > > > ### Adds > > - none > > ### Removes > > - none It’ll be available later today. Until then if you want to revert to using `.js` config (with commonjs syntax) you’ll be back in action. --- ## Post 7 by @Gydo_Verbeek — 2022-03-16T13:10:28Z Yes we’re using Typescript. Looking forward for the fix! Thanks! --- ## Post 8 by @kellymears — 2022-03-16T18:52:52Z [bud v5.6.1 released](https://github.com/roots/bud/releases/tag/v5.6.1) This small update is recommended for all users of 5.6.x. - :adhesive_bandage: fix: theme.json generator in [fix: theme.json generator by kellymears · Pull Request #1240 · roots/bud · GitHub](https://github.com/roots/bud/pull/1240) --- ## Post 9 by @Gydo_Verbeek — 2022-03-17T21:08:15Z Hi Kelly, I’ve got a problem now for compiling scss. It gives an error: Unexpected character ‘@’. When I try to set a custom loader with your example it gives me the following error: ``` TypeError: Cannot read properties of undefined (reading 'toWebpack') at [secure]/node_modules/@roots/bud-build/lib/cjs/Rule/index.js:186:75 at Array.map () at Rule.toWebpack ([secure]/node_modules/@roots/bud-build/lib/cjs/Rule/index.js:186:36) at [secure]/node_modules/@roots/bud-build/lib/cjs/Build/config/builder.js:39:101 at Array.map () at [secure]/node_modules/@roots/bud-build/lib/cjs/Build/config/builder.js:39:84 at [secure]/node_modules/@roots/bud-hooks/lib/cjs/Hooks/index.js:169:42 at Array.reduce () at Hooks.filter ([secure]/node_modules/@roots/bud-hooks/lib/cjs/Hooks/index.js:168:23) at [secure]/node_modules/@roots/bud-build/lib/cjs/Build/config/builder.js:35:30 ``` How to fix this? Scss compiled fine before the update. --- ## Post 10 by @kellymears — 2022-03-19T06:41:38Z Make sure all your versions are in sync. SCSS compiles fine in 5.6.2. --- ## Post 11 by @Gydo_Verbeek — 2022-03-19T11:49:32Z I can’t get it working. I have latest versions of bud dependencies… Tried everything, fresh install, bud clean. Nothing seems to fix this problem. My dependencies: ``` "@roots/bud": "5.6.2", "@roots/bud-babel": "5.6.2", "@roots/bud-eslint": "5.6.2", "@roots/bud-postcss": "5.6.2", "@roots/bud-sass": "5.6.2", "@roots/bud-typescript": "5.6.2", "@roots/sage": "5.6.2", ``` Error: ``` Module parse failed: Unexpected character '@' (2:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders // Import default style @import 'default'; ``` --- ## Post 12 by @alwaysblank — 2022-03-19T14:50:10Z Have you checked out this post about a similar error? [Fontsource Error - Unexpected character '@'](https://discourse.roots.io/t/fontsource-error-unexpected-character/22629) --- ## Post 13 by @Gydo_Verbeek — 2022-03-21T08:13:08Z Thanks, this post fixed my issue. Now I run into the following problem. I enabled sourcemap by setting devtool(‘eval’). When this setting is enabled the builder gives me an error about sourcemap option has to be a boolean. So setting something different than false or devtool() is not working. How do i fix this, because the eval option is great for developing. --- ## Post 14 by @alwaysblank — 2022-03-21T14:07:56Z @Gydo_Verbeek Please post your code, and the text of the error you’re seeing. --- ## Post 15 by @Gydo_Verbeek — 2022-03-21T14:15:27Z Error: ``` Module build failed (from ./node_modules/css-loader/dist/cjs.js): │ │ ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema. │ │ - options.sourceMap should be a boolean. │ │ -> Allows to enable/disable source maps. │ │ -> Read more at https://github.com/webpack-contrib/css-loader#sourcemap │ │ at validate (/Users/gydoverbeek/Documents/Projects/brilonline-website/node_modules/schema-utils/dist/validate.js:105:11) │ │ at Object.getOptions (/Users/gydoverbeek/Documents/Projects/brilonline-website/node_modules/webpack/lib/NormalModule.js:580:19) │ │ at Object.loader (/Users/gydoverbeek/Documents/Projects/brilonline-website/node_modules/css-loader/dist/index.js:31:27) ``` My config (typescript): ``` import type {Bud} from '@roots/bud'; const BrowserSyncPlugin = require('browser-sync-webpack-plugin'); export default (app: Bud) => { app .setPath({ '@src': 'web/app/themes/apex/resources', '@dist': 'web/app/themes/apex/public', '@plugin': 'plugins/brilonline-resources/resources', }) .tap((config) => { config.build.rules.sass.setInclude([ app.path("@src"), app.path("@plugin"), ]); }) .when(app.isProduction, (config) => { config.devtool(false).splitChunks().minimize().runtime('single'); }) .when(app.isDevelopment, (config) => { config.devtool('eval'); config.use(new BrowserSyncPlugin({ proxy: config.env.get('WP_HOME'), })) }) .alias({ '@fonts': app.path('@plugin', 'fonts'), '@icons': app.path('@plugin','fonts/brilonline-icons'), '@styles_resources': app.path('@plugin','styles'), '@scripts_resources': app.path('@plugin', 'scripts'), '@images': app.path('@src', 'images'), '@scripts': app.path('@src', 'scripts'), '@component': app.path('@src', 'scripts/component'), '@styles': app.path('@src', 'styles'), }) .entry({ app: ['@scripts/app.ts', '@styles/app.scss'], styleguide: ['@styles_resources/styleguide.scss'], }) .watch([ app.path('@src', 'views/**/*.blade.php'), 'web/app/themes/apex/app/View/**/*.php', ]) .proxy(app.env.get('WP_HOME')); }; ``` --- ## Post 16 by @Gydo_Verbeek — 2022-03-28T06:20:59Z @alwaysblank You have an update on my latest post? I installed the latest version but the error still remains. --- ## Post 17 by @webspilka — 2022-03-31T20:09:01Z hm… I have same problem in sage theme 10.1.6 I just add to config .devtool(‘eval’) my env: mode development bud 5.7.6 webpack 5.70.0 node v17.5.0 ``` Module build failed (from ./node_modules/css-loader/dist/cjs.js): │ │ ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema. │ │ - options.sourceMap should be a boolean. │ │ -> Allows to enable/disable source maps. │ │ -> Read more at https://github.com/webpack-contrib/css-loader#sourcemap │ │ at validate (/Users/bit/containers/newformat/src/public/wp-content/themes/newformat/node_modules/schema-utils/dist/validate.js:105:11) │ │ at Object.getOptions (/Users/bit/containers/newformat/src/public/wp-content/themes/newformat/node_modules/webpack/lib/NormalModule.js:585:19) │ │ at Object.loader (/Users/bit/containers/newformat/src/public/wp-content/themes/newformat/node_modules/css-loader/dist/index.js:31:27) ``` --- ## Post 18 by @kellymears — 2022-04-01T09:39:41Z @Gydo_Verbeek @webspilka I noticed this over the weekend but hadn’t seen this thread until this evening. Couple updates: First, I submitted the fix for it a couple days ago: > > > ## Overview > > - improve: bud.devtool > - feat: bud.devtool default `cheap-module-so…urce-map` > - fix: `sourceMap` prop for css loaders > > > > refers: none > closes: none > > ## Type of change > > - PATCH: Backwards compatible bug fix > > > > This PR includes breaking changes to the following core packages: > > - none > > This PR includes breaking changes to the follow extensions: > > - none > > ## Dependencies > > > > ### Adds > > - none > > ### Removes > > - none Second, tonightI added a test spec for `bud.devtool` in honor of the time lost on this: > > > ## Overview > > - Simple test spec for `bud.devtool`. > > refers: none > closes: no…ne > > ## Type of change > > - NONE: internal change > > > > This PR includes breaking changes to the following core packages: > > - none > > This PR includes breaking changes to the follow extensions: > > - none > > ## Dependencies > > > > ### Adds > > - none > > ### Removes > > - none This will be included in the next release. In the meantime this is an easy fix – The `bud.devtool` function is an extremely thin wrapper around a simple hook: ``` bud.hooks.on('build.devtool', 'source-map') ``` Or, using a callback. Will be passed the current value, if it is exists: ``` bud.hooks.on('build.devtool', v => 'source-map') ``` You can pass whatever options webpack accepts as the second param. Heads up that `false` is not an acceptable `devtool` value and will cause webpack to throw. You’ll want to pass `undefined` to disable: ``` bud.hooks.on('build.devtool', undefined) ``` Since you’re using TS you should get type hinting for the value. `bud.hooks.on` returns the `Bud` instance, so you’re good to just add it to the fn chain. --- ## Post 19 by @Gydo_Verbeek — 2022-04-01T10:48:18Z Thanks for the reply! Looking forward for the release. When I’m using your easy fix it still gives me the same error. When the release is live I will update the source and hopefully I can use it again. --- ## Post 20 by @webspilka — 2022-04-01T11:32:50Z cool I change only sources/@roots/bud-build/src/Build/items.ts and it’s work for me )) Grateful for the quick solution