sdc-build-wp 5.5.2 → 5.6.0

package/lib/components/blocks.js

@@ -1,7 +1,6 @@
-import { fileURLToPath } from 'url';
 import BaseComponent from './base.js';
-import { stat, readFile } from 'fs/promises';
-import { exec } from 'child_process';
+import { access, stat, readFile } from 'fs/promises';
+import { execFile } from 'child_process';
 import { promisify } from 'util';
 import { createHash } from 'crypto';
 
@@ -10,6 +9,31 @@ export default class BlocksComponent extends BaseComponent {
 	constructor() {
 		super();
 		this.description = `Process the theme's WordPress blocks`;
+		this._didLogWpScriptsFallback = false;
+	}
+
+	async getWpScriptsRunner() {
+		const localWpScripts = `${this.project.path}/node_modules/@wordpress/scripts/bin/wp-scripts.js`;
+
+		try {
+			await access(localWpScripts);
+			return {
+				command: process.execPath,
+				baseArgs: [localWpScripts]
+			};
+		} catch {
+			if (!this._didLogWpScriptsFallback) {
+				this.log('info', 'Using temporary @wordpress/scripts via npx for block builds');
+				this._didLogWpScriptsFallback = true;
+			}
+
+			const npxCommand = process.platform === 'win32' ? 'npx.cmd' : 'npx';
+
+			return {
+				command: npxCommand,
+				baseArgs: ['--yes', '--package', '@wordpress/scripts@31', 'wp-scripts']
+			};
+		}
 	}
 
 	async init() {
@@ -132,17 +156,17 @@ export default class BlocksComponent extends BaseComponent {
 		this.clearHashCache([workingBlockJson, ...dependencies]);
 
 		try {
-			const cmds = [
-				`${this.project.path}/node_modules/@wordpress/scripts/bin/wp-scripts.js`,
-				`build`,
+			const runner = await this.getWpScriptsRunner();
+			const args = [
+				...runner.baseArgs,
+				'build',
 				`--source-path=.${entry.replace(this.project.path, '')}/src`,
 				`--output-path=.${entry.replace(this.project.path, '')}/build`,
-				`--webpack-copy-php`,
-				`--config=${this.path.resolve(this.path.dirname(fileURLToPath(import.meta.url)), '../../webpack.config.js')}`,
+				'--webpack-copy-php'
 			];
-			const execPromise = promisify(exec);
+			const execFilePromise = promisify(execFile);
 			const timeoutMS = 40000;
-			const buildPromise = execPromise(cmds.join(' '), {
+			const buildPromise = execFilePromise(runner.command, args, {
 				maxBuffer: 1024 * 1024 * 10,
 				cwd: this.project.path
 			});

package/lib/page-script.js

@@ -5,23 +5,22 @@ let socket = window.___browserSync___?.socket;
 let checkedForPort = false;
 
 function redirectAdminFromPort() {
-	if (!checkedForPort && window.location.port) {
-		const url = new URL(window.location.href);
-		const urlParams = new URLSearchParams(window.location.search);
-		if (urlParams.has('keepPort')) {
-			checkedForPort = true;
-			return;
-		}
-		url.port = '';
-		socket.emit('sdc:redirectAdminFromPort', {
-			timestamp: Date.now(),
-			port: window.location.port,
-			from: window.location.href,
-			to: url.toString()
-		});
-		window.location.replace(url.toString());
-	}
 	checkedForPort = true;
+	if (!window.location.port) { return; }
+	const url = new URL(window.location.href);
+	const isAdmin = /^\/wp-admin(?:\/|$)/.test(url.pathname);
+	const urlParams = new URLSearchParams(url.search);
+	if (!isAdmin || urlParams.has('keepPort')) {
+		return;
+	}
+	url.port = '';
+	socket.emit('sdc:redirectAdminFromPort', {
+		timestamp: Date.now(),
+		port: window.location.port,
+		from: window.location.href,
+		to: url.toString()
+	});
+	window.location.replace(url.toString());
 }
 
 function getScriptsOnPage() {
@@ -36,7 +35,7 @@ function getScriptsOnPage() {
 const scriptsOnPageInterval = setInterval(() => {
 	socket = window.___browserSync___?.socket;
 	if (socket) {
-		redirectAdminFromPort();
+		if (!checkedForPort) { redirectAdminFromPort(); }
 		getScriptsOnPage();
 		clearInterval(scriptsOnPageInterval);
 	}

package/lib/project.js

@@ -252,6 +252,10 @@ export function keypressListen() {
 		if (isPrompting) { return; }
 		switch (key) {
 			case '\r': // [Enter]/[Return]
+				if (tui.isInitialized && !tui.isMouseEnabled) {
+					tui.enableMouseCapture();
+					break;
+				}
 				log(null, '');
 				break;
 			case '\u0003': // [Ctrl]+C

package/lib/tui.js

@@ -1,12 +1,95 @@
-import blessed from 'blessed';
+import React from 'react';
+import { Box, Text, render as renderInk, useInput, useStdout } from 'ink';
 import { styleText } from 'node:util';
 import log from './logging.js';
 
+const sgrMouseRegex = /\x1b\[<(\d+);(\d+);(\d+)([mM])/g;
+
+function TUIRoot({ tui }) {
+	const { stdout } = useStdout();
+	const terminalRows = stdout?.rows || 24;
+	const headerLines = tui.getHeaderLines();
+	const promptLines = tui.getPromptRenderLines();
+	const availableLogRows = Math.max(3, terminalRows - headerLines.length - promptLines.length - 6);
+	const visibleLogs = tui.getVisibleLogLines(availableLogRows);
+
+	useInput((input, key) => {
+		if (!tui.isInitialized) {
+			return;
+		}
+
+		if (tui.isMouseEscapeSequence(input)) {
+			return;
+		}
+
+		if (tui.hasPrompt()) {
+			tui.handlePromptInput(input, key);
+			return;
+		}
+
+		if (key.upArrow) {
+			tui.scrollLogs(1);
+			return;
+		}
+
+		if (key.downArrow) {
+			tui.scrollLogs(-1);
+			return;
+		}
+
+		if (key.pageUp) {
+			tui.scrollLogs(availableLogRows);
+			return;
+		}
+
+		if (key.pageDown) {
+			tui.scrollLogs(-availableLogRows);
+		}
+	});
+
+	return React.createElement(
+		Box,
+		{ flexDirection: 'column' },
+		React.createElement(
+			Box,
+			{
+				borderStyle: 'round',
+				borderColor: 'blue',
+				paddingX: 1,
+				flexDirection: 'column'
+			},
+			headerLines.map((line, index) => React.createElement(Text, { key: `header-${index}` }, line))
+		),
+		React.createElement(
+			Box,
+			{
+				borderStyle: 'single',
+				borderColor: 'blue',
+				paddingX: 1,
+				flexDirection: 'column',
+				height: availableLogRows + 2
+			},
+			visibleLogs.map((line, index) => React.createElement(Text, { key: `log-${index}` }, line))
+		),
+		tui.hasPrompt()
+			? React.createElement(
+				Box,
+				{
+					borderStyle: 'round',
+					borderColor: 'cyan',
+					paddingX: 1,
+					marginTop: 1,
+					flexDirection: 'column'
+				},
+				tui.getPromptRenderLines().map((line, index) => React.createElement(Text, { key: `prompt-${index}` }, line))
+			)
+			: null
+	);
+}
+
 class TUI {
 	constructor() {
-		this.screen = null;
-		this.headerBox = null;
-		this.logBox = null;
+		this.app = null;
 		this.isInitialized = false;
 		this.urls = {
 			local: '',
@@ -18,141 +101,95 @@ class TUI {
 		this.isPaused = false;
 		this.isMouseEnabled = true;
 		this._logHistory = [];
+		this._logScrollOffset = 0;
+		this._activePrompt = null;
+		this._mouseDataHandler = null;
 	}
 
 	init() {
 		if (this.isInitialized) {
-			// If already initialized, redraw the header to reflect current state
-			this.updateHeader();
 			this.render();
 			return;
 		}
 
-		if (process.stdout.isTTY) {
-			process.stdout.write('\x1b[?25h');
-			process.stdout.write('\x1b[0m');
-		}
-
-		this.screen = blessed.screen({
-			smartCSR: true,
-			fullUnicode: true,
-			title: 'SDC Build WP',
-			input: process.stdin,
-			output: process.stdout
+		this.isInitialized = true;
+		this.app = renderInk(React.createElement(TUIRoot, { tui: this }), {
+			exitOnCtrlC: false,
+			stdin: process.stdin,
+			stdout: process.stdout,
+			patchConsole: false
 		});
 
-		this.headerBox = blessed.box({
-			top: 0,
-			left: 0,
-			width: '100%',
-			height: 5,
-			content: '',
-			tags: true,
-			style: {
-				fg: 'white',
-				bg: 'black',
-				border: {
-					fg: 'blue'
-				}
-			},
-			border: {
-				type: 'line',
-				bottom: true
-			},
-			shrink: false,
-			scrollable: false
-		});
+		this.setMouseCaptureEnabled(this.isMouseEnabled);
+		this.attachMouseHandler();
 
-		this.logBox = blessed.log({
-			top: 5,
-			left: 0,
-			width: '100%',
-			height: '100%-5',
-			tags: true,
-			scrollable: true,
-			alwaysScroll: true,
-			scrollbar: {
-				ch: ' ',
-				track: {
-					bg: 'blue'
-				},
-				style: {
-					inverse: true
-				}
-			},
-			mouse: true,
-			keys: true,
-			vi: true,
-			style: {
-				fg: 'white',
-				bg: 'black'
-			}
-		});
+		this.render();
+	}
 
-		this.screen.append(this.logBox);
-		this.screen.append(this.headerBox);
+	isMouseEscapeSequence(input) {
+		if (!input || typeof input !== 'string') {
+			return false;
+		}
 
-		this.screen.on('resize', () => {
-			this.updateHeader();
-			this.screen.render();
-		});
+		sgrMouseRegex.lastIndex = 0;
+		return sgrMouseRegex.test(input);
+	}
 
-		this.screen.key(['escape', 'q', 'C-c'], () => {
-			return false;
-		});
+	attachMouseHandler() {
+		if (!process.stdin?.isTTY || this._mouseDataHandler) {
+			return;
+		}
 
-		this.screen.key(['enter', 'return'], () => {
-			if (!this.isMouseEnabled) {
-				this.enableMouseCapture();
-				this.updateHeader();
-				this.render();
+		this._mouseDataHandler = (chunk) => {
+			if (!this.isInitialized || !this.isMouseEnabled || this.hasPrompt()) {
 				return;
 			}
-			this.logBox.log('');
-			this.screen.render();
-		});
 
-		const handleMouseDisable = () => {
-			if (this.isMouseEnabled) {
-				this.disableMouseCapture();
-				this.updateHeader();
-				this.render();
-			}
+			const data = String(chunk);
+			this.handleMouseData(data);
 		};
-		this.logBox.on('click', handleMouseDisable);
-		this.headerBox.on('click', handleMouseDisable);
 
-		this.screen.key(['down'], () => {
-			this.logBox.scroll(1);
-			this.screen.render();
-		});
+		process.stdin.on('data', this._mouseDataHandler);
+	}
 
-		this.screen.key(['up'], () => {
-			this.logBox.scroll(-1);
-			this.screen.render();
-		});
+	handleMouseData(data) {
+		sgrMouseRegex.lastIndex = 0;
 
-		this.screen.key(['pagedown'], () => {
-			this.logBox.scroll(this.logBox.height);
-			this.screen.render();
-		});
+		let match;
+		while ((match = sgrMouseRegex.exec(data)) !== null) {
+			const code = Number(match[1]);
+			const action = match[4];
 
-		this.screen.key(['pageup'], () => {
-			this.logBox.scroll(-this.logBox.height);
-			this.screen.render();
-		});
+			if ((code & 64) === 64) {
+				const isScrollDown = (code & 1) === 1;
+				this.scrollLogs(isScrollDown ? -3 : 3);
+				continue;
+			}
 
-		this.updateHeader();
-		this.screen.render();
+			const isButtonPress = action === 'M';
+			const isDragEvent = (code & 32) === 32;
 
-		this.isInitialized = true;
+			if (isButtonPress && !isDragEvent) {
+				this.disableMouseCapture();
+				break;
+			}
+		}
 	}
 
-	updateHeader() {
-		if (!this.isInitialized) {
+	setMouseCaptureEnabled(isEnabled) {
+		if (!process.stdout?.isTTY) {
+			return;
+		}
+
+		if (isEnabled) {
+			process.stdout.write('\x1b[?1000h\x1b[?1002h\x1b[?1006h');
 			return;
 		}
 
+		process.stdout.write('\x1b[?1000l\x1b[?1002l\x1b[?1006l');
+	}
+
+	getHeaderLines() {
 		const lines = [];
 
 		let titleLine = ' ' + styleText(['bold', 'blue'], 'SDC Build WP');
@@ -173,7 +210,9 @@ class TUI {
 				urlLine += `Local: ${styleText('green', this.urls.local)}`;
 			}
 			if (this.urls.external) {
-				if (urlLine.length > 1) urlLine += '  ';
+				if (urlLine.length > 1) {
+					urlLine += '  ';
+				}
 				urlLine += `External: ${styleText('green', this.urls.external)}`;
 			}
 			lines.push(urlLine);
@@ -193,32 +232,28 @@ class TUI {
 			lines.push(' ');
 		}
 
-		this.headerBox.setContent(lines.join('\n'));
+		return lines;
 	}
 
 	setURLs(local, external) {
 		this.urls.local = local;
 		this.urls.external = external;
-		this.updateHeader();
 		this.render();
 	}
 
 	setCommands(commands) {
 		this.commands = commands;
-		this.updateHeader();
 		this.render();
 	}
 
 	setPaused(isPaused) {
 		this.isPaused = isPaused;
-		this.updateHeader();
 		this.render();
 	}
 
 	setComponents(components, watchMode = false) {
 		this.components = components;
 		this.watchMode = watchMode;
-		this.updateHeader();
 		this.render();
 	}
 
@@ -228,7 +263,10 @@ class TUI {
 			log(null, message);
 			return;
 		}
-		this.logBox.log(message);
+
+		if (this._logScrollOffset === 0) {
+			this._logScrollOffset = 0;
+		}
 		this.render();
 	}
 
@@ -236,104 +274,156 @@ class TUI {
 		return this._logHistory.join('\n');
 	}
 
+	getVisibleLogLines(maxRows) {
+		if (this._logHistory.length === 0) {
+			return [''];
+		}
+
+		const maxOffset = Math.max(0, this._logHistory.length - maxRows);
+		this._logScrollOffset = Math.max(0, Math.min(this._logScrollOffset, maxOffset));
+
+		const endIndex = this._logHistory.length - this._logScrollOffset;
+		const startIndex = Math.max(0, endIndex - maxRows);
+		return this._logHistory.slice(startIndex, endIndex);
+	}
+
+	scrollLogs(delta) {
+		const nextOffset = this._logScrollOffset + delta;
+		const maxOffset = Math.max(0, this._logHistory.length - 1);
+		this._logScrollOffset = Math.max(0, Math.min(nextOffset, maxOffset));
+		this.render();
+	}
+
 	render() {
-		if (this.isInitialized && this.screen) {
-			this.screen.render();
+		if (this.isInitialized && this.app) {
+			this.app.rerender(React.createElement(TUIRoot, { tui: this }));
+		}
+	}
+
+	hasPrompt() {
+		return Boolean(this._activePrompt);
+	}
+
+	getPromptRenderLines() {
+		if (!this._activePrompt) {
+			return [];
+		}
+
+		if (this._activePrompt.type === 'menu') {
+			const promptLines = [this._activePrompt.prompt];
+			for (let i = 0; i < this._activePrompt.options.length; i++) {
+				const isSelected = i === this._activePrompt.selectedIndex;
+				const prefix = isSelected ? styleText(['bold', 'green'], '>') : ' ';
+				promptLines.push(`${prefix} ${this._activePrompt.options[i]}`);
+			}
+			promptLines.push(styleText('gray', 'Use arrows to choose. Enter to confirm. Esc/q to cancel.'));
+			return promptLines;
+		}
+
+		if (this._activePrompt.type === 'input') {
+			const cursor = styleText(['bold', 'cyan'], '_');
+			return [
+				this._activePrompt.prompt,
+				`${styleText('gray', '>')} ${this._activePrompt.value}${cursor}`,
+				styleText('gray', 'Type your value, Enter to submit, Esc/q to cancel.')
+			];
+		}
+
+		return [];
+	}
+
+	handlePromptInput(input, key) {
+		if (!this._activePrompt) {
+			return;
+		}
+
+		if (this._activePrompt.type === 'menu') {
+			if (key.upArrow) {
+				this._activePrompt.selectedIndex = (this._activePrompt.selectedIndex - 1 + this._activePrompt.options.length) % this._activePrompt.options.length;
+				this.render();
+				return;
+			}
+			if (key.downArrow) {
+				this._activePrompt.selectedIndex = (this._activePrompt.selectedIndex + 1) % this._activePrompt.options.length;
+				this.render();
+				return;
+			}
+			if (key.return) {
+				const selectedIndex = this._activePrompt.selectedIndex;
+				const selectedValue = this._activePrompt.options[selectedIndex];
+				const resolve = this._activePrompt.resolve;
+				this._activePrompt = null;
+				this.render();
+				resolve({ value: selectedValue, index: selectedIndex });
+				return;
+			}
+			if (key.escape || input === 'q') {
+				const resolve = this._activePrompt.resolve;
+				this._activePrompt = null;
+				this.render();
+				resolve(null);
+			}
+			return;
+		}
+
+		if (this._activePrompt.type === 'input') {
+			if (key.return) {
+				const resolve = this._activePrompt.resolve;
+				const value = this._activePrompt.value;
+				this._activePrompt = null;
+				this.render();
+				resolve(value);
+				return;
+			}
+			if (key.escape || input === 'q') {
+				const resolve = this._activePrompt.resolve;
+				this._activePrompt = null;
+				this.render();
+				resolve(null);
+				return;
+			}
+			if (key.backspace || key.delete) {
+				this._activePrompt.value = this._activePrompt.value.slice(0, -1);
+				this.render();
+				return;
+			}
+			if (!key.ctrl && !key.meta && input) {
+				this._activePrompt.value += input;
+				this.render();
+			}
 		}
 	}
 
 	async showMenu(options, prompt = 'Choose an option:') {
+		if (!this.isInitialized) {
+			return null;
+		}
+
 		return new Promise((resolve) => {
-			const menu = blessed.list({
-				parent: this.screen,
-				top: 'center',
-				left: 'center',
-				width: '50%',
-				height: options.length + 4,
-				label: ` ${prompt} `,
-				items: options,
-				keys: true,
-				mouse: true,
-				border: 'line',
-				style: {
-					fg: 'white',
-					bg: 'black',
-					border: { fg: 'blue' },
-					selected: { bg: 'blue', fg: 'white' }
-				}
-			});
-			menu.focus();
-			const stopLogScroll = (ch, key) => {
-				if (['up', 'down', 'pagedown', 'pageup'].includes(key.name)) {
-					return false;
-				}
+			this._activePrompt = {
+				type: 'menu',
+				options,
+				prompt,
+				selectedIndex: 0,
+				resolve
 			};
-			this.logBox.ignoreKeys = true;
-			menu.on('detach', () => {
-				this.logBox.ignoreKeys = false;
-			});
-			menu.on('keypress', stopLogScroll);
-			this.screen.render();
-			menu.on('select', (item, idx) => {
-				menu.destroy();
-				this.screen.render();
-				resolve({ value: item.getText(), index: idx });
-			});
-			menu.on('cancel', () => {
-				menu.destroy();
-				this.screen.render();
-				resolve(null);
-			});
-			menu.key(['escape', 'q'], () => {
-				menu.emit('cancel');
-			});
+			this.render();
 		});
 	}
 
 	async showInput(prompt = 'Enter value:') {
+		if (!this.isInitialized) {
+			return null;
+		}
+
 		return new Promise((resolve) => {
-			const box = blessed.box({
-				parent: this.screen,
-				top: 'center',
-				left: 'center',
-				width: '50%',
-				height: 5,
-				label: ` ${prompt} `,
-				border: 'line',
-				style: {
-					fg: 'white',
-					bg: 'black',
-					border: { fg: 'blue' }
-				}
-			});
-			const input = blessed.textbox({
-				parent: box,
-				top: 2,
-				left: 2,
-				width: '90%',
-				height: 1,
-				inputOnFocus: true,
-				style: {
-					fg: 'white',
-					bg: 'black',
-					focus: { bg: 'blue' }
-				}
-			});
-			input.focus();
-			this.screen.render();
-			input.on('submit', (value) => {
-				box.destroy();
-				this.screen.render();
-				resolve(value);
-			});
-			input.on('cancel', () => {
-				box.destroy();
-				this.screen.render();
-				resolve(null);
-			});
-			input.key(['escape', 'q'], () => {
-				input.emit('cancel');
-			});
+			this._activePrompt = {
+				type: 'input',
+				prompt,
+				value: '',
+				resolve
+			};
+			this.render();
 		});
 	}
 
@@ -356,65 +446,53 @@ class TUI {
 			this.watchMode = state.watchMode;
 			this.isPaused = state.isPaused;
 			this.isMouseEnabled = state.isMouseEnabled ?? true;
-			if (this.isMouseEnabled) {
-				this.enableMouseCapture();
-			} else {
-				this.disableMouseCapture();
-			}
-			this.updateHeader();
 			this.render();
 		}
 	}
 
 	enableMouseCapture() {
-		if (!this.screen || this.isMouseEnabled) {
+		if (this.isMouseEnabled) {
 			return;
 		}
 		this.isMouseEnabled = true;
-		if (this.screen.enableMouse) {
-			this.screen.enableMouse();
-			return;
-		}
-		if (this.screen.program && this.screen.program.enableMouse) {
-			this.screen.program.enableMouse();
-		}
+		this.setMouseCaptureEnabled(true);
+		this.render();
 	}
 
 	disableMouseCapture() {
-		if (!this.screen || !this.isMouseEnabled) {
+		if (!this.isMouseEnabled) {
 			return;
 		}
 		this.isMouseEnabled = false;
-		if (this.screen.disableMouse) {
-			this.screen.disableMouse();
+		this.setMouseCaptureEnabled(false);
+		this.render();
+	}
+
+	destroy() {
+		if (!this.isInitialized) {
 			return;
 		}
-		if (this.screen.program && this.screen.program.disableMouse) {
-			this.screen.program.disableMouse();
+
+		if (this.app) {
+			this.app.unmount();
+			this.app = null;
 		}
-	}
 
-	destroy() {
-		if (this.isInitialized && this.screen) {
-			if (this.screen.program) {
-				this.screen.program.showCursor();
-				this.screen.program.normalBuffer();
-				this.screen.program.reset();
-			}
+		if (this._mouseDataHandler && process.stdin) {
+			process.stdin.off('data', this._mouseDataHandler);
+			this._mouseDataHandler = null;
+		}
 
-			this.screen.destroy();
-			this.isInitialized = false;
-			this.screen = null;
-			this.headerBox = null;
-			this.logBox = null;
-			this.isMouseEnabled = true;
-
-			if (process.stdout.isTTY) {
-				process.stdout.write('\x1b[?25h');
-				process.stdout.write('\x1b[0m');
-				process.stdout.write('\x1b[2J');
-				process.stdout.write('\x1b[H');
-			}
+		this.setMouseCaptureEnabled(false);
+
+		this.isInitialized = false;
+		this.isMouseEnabled = true;
+		this._activePrompt = null;
+		this._logScrollOffset = 0;
+
+		if (process.stdout.isTTY) {
+			process.stdout.write('\x1b[?25h');
+			process.stdout.write('\x1b[0m');
 		}
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sdc-build-wp",
-	"version": "5.5.2",
+	"version": "5.6.0",
 	"description": "Custom WordPress build process.",
 	"engines": {
 		"node": ">=22"
@@ -26,17 +26,18 @@
 		"@stylistic/stylelint-plugin": "^4.0.0",
 		"@typescript-eslint/eslint-plugin": "^8.48.1",
 		"@typescript-eslint/parser": "^8.48.1",
-		"@wordpress/scripts": "^31.4.0",
 		"autoprefixer": "^10.4.24",
-		"blessed": "^0.1.81",
 		"browser-sync": "^3.0.4",
 		"chokidar": "^5.0.0",
 		"esbuild": "^0.27.3",
 		"eslint": "^9.39.1",
+		"ink": "^6.8.0",
 		"postcss": "^8.5.6",
 		"postcss-scss": "^4.0.9",
 		"postcss-sort-media-queries": "^5.2.0",
 		"prettier": "^3.8.1",
+		"react": "^19.2.4",
+		"react-dom": "^19.2.4",
 		"sass": "^1.97.3",
 		"sharp": "^0.34.5",
 		"stylelint": "^16.26.1",

package/webpack.config.js

@@ -1,4 +1,11 @@
-import defaultConfig from '@wordpress/scripts/config/webpack.config.js';
+let defaultConfig = {};
+
+try {
+	const wpConfig = await import('@wordpress/scripts/config/webpack.config.js');
+	defaultConfig = wpConfig.default || {};
+} catch {
+	defaultConfig = {};
+}
 
 export default {
 	...defaultConfig,