Bud Error: stripAnsi is not a function // when using javascript classes

I’m using a fresh install of Sage with Bud 6.24.0. When attempting to use a javascript class, I get the following error during compiling:

 BudError

✘ stripAnsi is not a function

… Details

This error was thrown by the webpack compiler. It is likely a misconfiguration.

ℹ Stack trace

 at BudWebpackLifecyclePlugin.failed
(./node_modules/@roots/bud-extensions/lib/webpack-lifecycle-plugin/index.js:47:33)
 at Hook.eval [as call] (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:19:10),
<anonymous>:7:1)
 at Hook.CALL_DELEGATE [as _call] (./node_modules/tapable/lib/Hook.js:14:14)
 at finalCallback (./node_modules/webpack/lib/Compiler.js:496:23)
 at onCompiled (./node_modules/webpack/lib/Compiler.js:512:20)
 at ./node_modules/webpack/lib/Compiler.js:1341:25
 at finalCallback (./node_modules/webpack/lib/Compilation.js:2925:11)
 at ./node_modules/webpack/lib/Compilation.js:3203:18
 at eval (eval at create (./node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:86:1)

error Command failed with exit code 1.

For reference:

package.json

{
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @roots/browserslist-config"
  ],
  "engines": {
    "node": ">=20.0.0"
  },
  "type": "module",
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "translate": "npm run translate:pot && npm run translate:update",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"theme.json,patterns,app,resources\"",
    "translate:update": "for file in ./resources/lang/*.po; do wp i18n update-po ./resources/lang/sage.pot $file; done",
    "translate:compile": "npm run translate:mo && npm run translate:js",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
  },
  "devDependencies": {
    "@roots/bud": "6.24.0",
    "@roots/bud-eslint": "^6.24.0",
    "@roots/bud-react": "^6.24.0",
    "@roots/bud-swc": "^6.24.0",
    "@roots/bud-tailwindcss": "6.24.0",
    "@roots/eslint-config": "^6.24.0",
    "@roots/sage": "6.24.0",
    "@types/lodash": "^4.17.13"
  },
  "dependencies": {
    "lodash": "^4.17.21"
  }
}

tsconfig

{
	"extends": "@roots/bud/config/tsconfig.json",
	"compilerOptions": {
		"baseUrl": "./resources",
		"outDir": "./public",
		"paths": {
			"@fonts/*": ["fonts/*"],
			"@images/*": ["images/*"],
			"@scripts/*": ["scripts/*"],
			"@styles/*": ["styles/*"]
		},
		"types": [
			"@roots/bud",
			"@roots/bud-react",
			"@roots/bud-postcss",
			"@roots/bud-swc",
			"@roots/bud-preset-recommend",
			"@roots/bud-preset-wordpress",
			"@roots/bud-tailwindcss",
			"@roots/bud-wordpress-theme-json",
			"@roots/sage"
		]
	},
	"files": ["bud.config.ts"],
	"include": ["resources"],
	"exclude": ["node_modules", "public"],
	"bud": {
		"useCompilerOptions": false
	}
}

1 Like

My bad. Didn’t have bud-typescript installed. After doing that and adding:

parser: '@typescript-eslint/parser',

Everything worked

1 Like

Yap, was just about to comment and recomend the same; updating your bud or installing it if not installed should fix the issue.

2 Likes