SPFX App Customizer error "Extension failed to load for componentId" - sharepoint-online

Question

I am having errors when I deploy this in my tenant site but when i run it in debug mode via gulp serve the app is rendering.
this is the error:
Uncaught (in promise) Error
at t [as constructor]
Uncaught (in promise) Error: Failed to create application customizer 'ClientSideExtension.ApplicationCustomizer.75e06db2-212d-41f4-ad01-758e014c7b40'. Error information is 'Extension failed to load for componentId "75e06db2-212d-41f4-ad01-758e014c7b40".'.
i installed all the needed dependency and it briefly worked but when i removed the bottom placeholder customization, deployed then it didn't render anymore. I'd also like to note that when it briefly worked, it only rendered in the site contents, documents, settings it didn't render in the site pages such as my homepage and other pages i created.
I have followed the docs in building the customizer:
private _renderPlaceHolders(): void {
console.log("HelloWorldApplicationCustomizer._renderPlaceHolders()");
console.log(
"Available placeholders: ",
this.context.placeholderProvider.placeholderNames
.map(name => PlaceholderName[name])
.join(", ")
);
// Handling the top placeholder
if (!this._topPlaceholder) {
console.log("no placeholder found");
this._topPlaceholder = this.context.placeholderProvider.tryCreateContent(
PlaceholderName.Top,
{ onDispose: this._onDispose }
);
// The extension should not assume that the expected placeholder is available.
if (!this._topPlaceholder) {
console.error("The expected placeholder (Top) was not found.");
return;
}
//MORE CODE BELOW
}
}
my package.json
{
"name": "searchbar-ext",
"version": "0.0.1",
"private": true,
"main": "lib/index.js",
"scripts": {
"build": "gulp bundle",
"clean": "gulp clean",
"test": "gulp test"
},
"dependencies": {
"#microsoft/decorators": "1.11.0",
"#microsoft/sp-application-base": "1.11.0",
"#microsoft/sp-core-library": "1.11.0",
"#microsoft/sp-dialog": "1.11.0",
"#microsoft/sp-http": "1.11.0",
"#microsoft/sp-office-ui-fabric-core": "1.11.0",
"#pnp/common": "^2.5.0",
"#pnp/graph": "^2.5.0",
"#pnp/logging": "^2.5.0",
"#pnp/odata": "^2.5.0",
"#pnp/pnpjs": "^2.0.13",
"#pnp/sp": "^2.5.0",
"#types/rijndael-js": "^1.0.0",
"crypto-js": "^4.0.0",
"dayjs": "^1.10.5",
"dotenv": "^10.0.0",
"dotenv-expand": "^5.1.0",
"gulp-cli": "^2.3.0",
"js-cookie": "^2.2.1",
"ncrypt-js": "^2.0.0",
"react-cookie": "^4.0.3",
"rijndael-js": "^2.0.0"
},
"devDependencies": {
"#microsoft/rush-stack-compiler-3.3": "0.3.5",
"#microsoft/sp-build-web": "1.11.0",
"#microsoft/sp-module-interfaces": "1.11.0",
"#microsoft/sp-tslint-rules": "1.11.0",
"#microsoft/sp-webpart-workbench": "1.11.0",
"#types/js-cookie": "^2.2.6",
"#types/react-cookies": "^0.1.0",
"#types/webpack-env": "1.13.1",
"ajv": "~5.2.2",
"gulp": "3.9.1",
"gulp-sequence": "1.0.0",
"sass-loader": "^8.0.2",
"spfx-uifabric-themes": "^0.8.0",
"ts-loader": "^6.2.1"
}
}