Solid Devtools requires `solid-devtools` as a peer dependenc

Error message

Solid Devtools requires `solid-devtools` as a peer dependency, add it to your project.

What it means

When devtools: true is set on the Solid integration, it dynamically imports solid-devtools/vite to load the devtools Vite plugin. If that import fails (package not installed), getDevtoolsPlugin() catches the error, prints this warning, and returns null, so the build continues but without the devtools_autoname/babel plugin and without the 'import "solid-devtools"' page script.

Source

Thrown at packages/integrations/solid/src/index.ts:39

				key?: string;
				/** Inject location attributes to jsx templates */
				jsxLocation?: boolean;
				/** Inject location information to component declarations */
				componentLocation?: boolean;
		  };
};
type DevtoolsPlugin = (_options?: DevtoolsPluginOptions) => PluginOption;

async function getDevtoolsPlugin(logger: AstroIntegrationLogger, retrieve: boolean) {
	if (!retrieve) {
		return null;
	}

	try {
		// @ts-ignore
		return (await import('solid-devtools/vite')).default as DevtoolsPlugin;
	} catch (_) {
		logger.warn(
			'Solid Devtools requires `solid-devtools` as a peer dependency, add it to your project.',
		);
		return null;
	}
}

function getViteConfiguration(
	{ include, exclude }: Options,
	devtoolsPlugin: DevtoolsPlugin | null,
	solidNoExternal: string[],
) {
	const plugins: PluginOption[] = [
		solid({ include, exclude, ssr: true }),
		configEnvironmentPlugin(solidNoExternal),
	];

	if (devtoolsPlugin) {
		plugins.push(devtoolsPlugin({ autoname: true }));

View on GitHub (pinned to 52e6c34790)

Solutions

Install the peer dependency in the project: npm install -D solid-devtools (or pnpm add -D solid-devtools).
Ensure it is added to the same package.json that owns the Astro config.
Restart the dev server; the warning should disappear and devtools annotations appear in the browser.
Alternatively set devtools: false (or remove it) if devtools are not wanted.

Example fix

# before
# package.json has no solid-devtools, but config uses:
# solid({ devtools: true })

# after
npm install -D solid-devtools
# config stays: solid({ devtools: true })

Defensive patterns

Strategy: validation

Validate before calling

import { access } from 'node:fs/promises';
let devtoolsInstalled = true;
try {
  await access('node_modules/solid-devtools/package.json');
} catch {
  devtoolsInstalled = false;
}
const safeOptions = devtoolsInstalled ? { devtools: true } : {};

Prevention

Install solid-devtools as a devDependency whenever devtools: true is set.
In monorepos, add it to the package.json that contains the Astro config.
Watch build logs after enabling devtools: the warning means the plugin silently did not load.

When it happens

Trigger: astro.config.mjs sets integrations: [solid({ devtools: true })] but solid-devtools is not in package.json dependencies/devDependencies, so await import('solid-devtools/vite') rejects and the catch branch logs the warning.

Common situations: Copying a config that enables devtools without copying the dependency; solid-devtools installed but not linked in pnpm/npm workspaces; monorepos where the package is added to the wrong package.json.

Related errors

AI-assisted analysis of withastro/astro@52e6c34790 (2026-08-18). Data as JSON: /api/errors/90f71000adc63000. Report an issue: GitHub.