The extension manifest of "@directus/extension-toolkit" is not valid.

[lukeliasi]

Describe the Bug

I created a blank fresh interface extension following this guide: Creating Extensions
I get the error The extension manifest of "@directus/extension-toolkit" is not valid. when directus starts up. I am using docker compose.

I exec'd into the docker container and can see my extension in the folder but it doesn't seem to load it. In the admin UI when going to add a new input type string and go to the Interface menu, I do not see my custom interface.

Extension index.js src file:

import InterfaceComponent from './interface.vue';

export default {
	id: 'custom',
	name: 'Custom',
	icon: 'box',
	description: 'This is my custom interface!',
	component: InterfaceComponent,
	options: null,
	types: ['string'],
};

interface.vue

<template>
	<input :value="value" @input="handleChange($event.target.value)" />
</template>

<script>
export default {
	props: {
		value: {
			type: String,
			default: null,
		},
	},
	emits: ['input'],
	setup(props, { emit }) {
		return { handleChange };

		function handleChange(value) {
			emit('input', value);
		}
	},
};
</script>

Compiled extension which I put in the extensions/interfaces/test folder

import{openBlock as e,createElementBlock as n}from"vue";var t={props:{value:{type:String,default:null}},emits:["input"],setup:(e,{emit:n})=>({handleChange:function(e){n("input",e)}})};const u=["value"];t.render=function(t,i,a,o,r,l){return e(),n("input",{value:a.value,onInput:i[0]||(i[0]=e=>o.handleChange(e.target.value))},null,40,u)},t.__file="src/interface.vue";var i={id:"custom",name:"Custom",icon:"box",description:"This is my custom interface!",component:t,options:null,types:["string"]};export{i as default};

My docker-compose.yml:

version: '3'
services:
  database:
    container_name: database
    image: postgis/postgis:13-master
    volumes:
      - ./data/database:/var/lib/postgresql/data
    networks:
      - directus
    environment:
      POSTGRES_USER: 'directus'
      POSTGRES_DB: 'directus'
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}

  cache:
    container_name: cache
    image: redis:6
    networks:
      - directus

  directus:
    build: .
    restart: always
    container_name: directus
    image: directus/directus:9.12.1
    ports:
      - 8055:8055
    volumes:
      # By default, uploads are stored in /directus/uploads
      # Always make sure your volumes matches the storage root when using
      # local driver
      - ./uploads:/directus/uploads
      # Make sure to also mount the volume when using SQLite
      # - ./database:/directus/database
      # If you want to load extensions from the host
      - ./extensions:/directus/extensions
    networks:
      - directus
    depends_on:
      - cache
      - database
    environment:
      PUBLIC_URL: ${PUBLIC_URL}

      KEY: ${KEY}
      SECRET: ${SECRET}

      DB_CLIENT: 'pg'
      DB_HOST: 'database'
      DB_PORT: '5432'
      DB_DATABASE: 'directus'
      DB_USER: 'directus'
      DB_PASSWORD: ${POSTGRES_PASSWORD}

      CACHE_ENABLED: 'true'
      CACHE_STORE: 'redis'
      CACHE_REDIS: 'redis://cache:6379'

      ADMIN_EMAIL: ${ADMIN_EMAIL}
      ADMIN_PASSWORD: ${ADMIN_PASSWORD}

      EMAIL_FROM: ${EMAIL_FROM}
      EMAIL_TRANSPORT: ${EMAIL_TRANSPORT}
      EMAIL_SMTP_HOST: ${EMAIL_SMTP_HOST}
      EMAIL_SMTP_PORT: ${EMAIL_SMTP_PORT}
      EMAIL_SMTP_USER: ${EMAIL_SMTP_USER}
      EMAIL_SMTP_PASSWORD: ${EMAIL_SMTP_PASSWORD}
      
networks:
  directus:

To Reproduce

I created a new blank interface extension called "test" with npm init directus-extension (did not change any code) I then cd test and npm run build. I copied the dist/index.js into the extensions folder - extensions/interfaces/test/index.js.

I then run docker compose up and get the following warning: The extension manifest of "@directus/extension-toolkit" is not valid.

Errors Shown

database  | 2022-06-05 15:30:22.913 UTC [1] LOG:  database system is ready to accept connections
directus  | 15:30:25 ⚠️  Couldn't load extensions
directus  | 15:30:25 ⚠️  The extension manifest of "@directus/extension-toolkit" is not valid.
directus  | 15:30:25 ✨ Initializing bootstrap...
directus  | 15:30:25 ✨ Database already initialized, skipping install
directus  | 15:30:25 ✨ Running migrations...
directus  | 15:30:25 ✨ Done
directus  | 15:30:27 ⚠️  Couldn't load extensions
directus  | 15:30:27 ⚠️  The extension manifest of "@directus/extension-toolkit" is not valid.
directus  | 15:30:28 ✨ Server started at http://0.0.0.0:8055

What version of Directus are you using?

9.12.1

What version of Node.js are you using?

16.15.0

What database are you using?

postgis:13-master

What browser are you using?

Chrome

How are you deploying Directus?

Docker

[azrikahar]

I've tested your compiled extension and it seems to work without any issue:

Truncated logs for brevity

directus    | 13:08:19 ✨ Applying Add Default Language...
directus    | 13:08:19 ✨ Applying Remove Default Value Panel Icon...
directus    | 13:08:19 ✨ Applying Add Flows...
directus    | 13:08:19 ✨ Applying Add Color to Insights Icon...
directus    | 13:08:19 ✨ Applying Drop Non Null from IP of Activity...
directus    | 13:08:19 ✨ Applying Drop Non Null from Sender of Notifications...
directus    | 13:08:19 ✨ Setting up first admin role...
directus    | 13:08:19 ✨ Adding first admin user...
directus    | 13:08:19 ✨ Done
directus    | 13:08:24 ✨ Loaded extensions: test
directus    | 13:08:24 ⚠️  PUBLIC_URL should be a full URL
directus    | 13:08:25 ✨ Server started at http://0.0.0.0:8055

Custom interface shown in App

---

Based on the error, I believe it stems from:

directus/packages/shared/src/utils/node/get-extensions.ts

Lines 28 to 30 in b6a3389

	if (!validateExtensionManifest(extensionManifest)) {
	throw new Error(`The extension manifest of "${extensionName}" is not valid.`);
	}

This is because Directus will load packages as extensions based on the name which matches:

directus/packages/shared/src/constants/extensions.ts

Line 22 in b6a3389

export const EXTENSION_NAME_REGEX = /^(?:(?:@[^/]+\/)?directus-extension-|@directus\/extension-).+$/;

and for some reason it seems like you have @directus/extension-toolkit installed which is being attempted to load as an extension but it isn't? 🤔 Are you using a custom image by any chance (even though your compose file says otherwise)? It doesn't seem like that package should exist unless it's added manually. cc @nickrum in case I'm mistaken here.