[bug]: Getting `appId` is missing error while running code on production mode

[sureshkumarsendrayan]

Description

I'm using algolia search in my Angular 18 application. Normally it works without any issue in the development mode. But if I build the application in the production mode with optimization using angular.json file and tries to serve it, then I'm getting the below error.

The same application on the production mode is working when I built it without optimization. Below is the piece of production build configuration where optimization is set to false for testing in the angular.json file.

"configurations": { "production": { "optimization": false, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" }, { "type": "anyComponentStyle", "maximumWarning": "20kb", "maximumError": "25kb" } ], "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "outputHashing": "all" },

Below is my package.json file. { "name": "unieuro-ecommerce-fe", "version": "5.0.0", "web-version": "0.0.17-static", "author": "SopraSteria", "homepage": "https://www.soprasteria.it/", "browser": { "stream": false }, "scripts": { "ng": "ng", "start": "ng serve --open", "start:local": "ng serve --open --configuration local --ssl", "start:localApple": "ng serve --open --configuration local --host quality.unieuro.it --ssl --port 9002 ", "start:pp1": "node versioning.js && ng serve --open --configuration pp1", "start:pp1ssl": "ng serve --open --configuration pp1 --ssl --port 9002", "start:pp2": "ng serve --open --configuration pp2", "start:qa1": "ng serve --open --configuration qa1", "start:qa2": "ng serve --open --configuration qa2", "build:android:pp1": "ionic build --configuration pp1 && npx cap sync && npx cap copy android", "build:android:pp2": "ionic build --configuration pp2 && npx cap sync && npx cap copy android", "build:android:qa1": "ionic build --configuration qa1 && npx cap sync && npx cap copy android", "build:android:qa2": "ionic build --configuration qa2 && npx cap sync && npx cap copy android", "build:android:prd": "ionic build --configuration && npx cap sync && npx cap copy android", "build:ios:pp1": "ionic build --configuration pp1 && npx cap sync && npx cap copy ios", "build:ios:pp2": "ionic build --configuration pp2 && npx cap sync && npx cap copy ios", "build:ios:qa1": "ionic build --configuration qa1 && npx cap sync && npx cap copy ios", "build:ios:qa2": "ionic build --configuration qa2 && npx cap sync && npx cap copy ios", "build:ios:prd": "ionic build && npx cap sync && npx cap copy ios", "build:docker": "docker build -t uni-test:v0.0.1-static .", "build": "ng build", "watch": "ng build --watch --configuration development", "test": "ng test", "lint": "ng lint", "dev:ssr": "ng run app:serve-ssr", "serve:ssr": "node dist/app/server/main.js", "build:ssr": "ng build && ng run app:server", "prerender": "ng run app:prerender", "storybook": "ng run app:storybook", "build-storybook": "ng run app:build-storybook" }, "private": true, "dependencies": { "@algolia/client-abtesting": "^5.2.1", "@algolia/client-analytics": "^5.2.1", "@algolia/client-personalization": "^5.2.1", "@angular-devkit/schematics": "^18.1.2", "@angular/animations": "^18.0.0", "@angular/common": "^18.0.0", "@angular/compiler": "^18.0.0", "@angular/core": "^18.0.0", "@angular/forms": "^18.0.0", "@angular/platform-browser": "^18.0.0", "@angular/platform-browser-dynamic": "^18.0.0", "@angular/platform-server": "^18.0.0", "@angular/pwa": "^18.0.7", "@angular/router": "^18.0.0", "@angular/service-worker": "^18.0.0", "@angular/ssr": "^18.0.7", "@capacitor-community/apple-sign-in": "^6.0.0", "@capacitor-community/facebook-login": "^6.0.0", "@capacitor-community/sqlite": "^6.0.1", "@capacitor/android": "^6.1.2", "@capacitor/app": "6.0.0", "@capacitor/browser": "^6.0.1", "@capacitor/core": "6.1.0", "@capacitor/haptics": "6.0.0", "@capacitor/ios": "^6.1.1", "@capacitor/keyboard": "6.0.1", "@capacitor/network": "^6.0.1", "@capacitor/status-bar": "6.0.0", "@codetrix-studio/capacitor-google-auth": "3.4.0-rc.4", "@contentstack/utils": "^1.3.11", "@ionic/angular": "^8.2.7", "@ionic/angular-server": "^8.3.3", "@ionic/storage": "^4.0.0", "@ionic/storage-angular": "^4.0.0", "@ngrx/effects": "^18.0.1", "@ngrx/store": "^18.0.1", "@ngx-translate/core": "^15.0.0", "@ngx-translate/http-loader": "^8.0.0", "add": "^2.0.6", "algoliasearch": "5.2.2", "android": "^0.0.8", "cap": "^0.2.1", "contentstack": "^3.21.0", "date-fns": "^3.6.0", "express": "^4.18.2", "ionicons": "^7.2.1", "lodash-es": "^4.17.21", "ngx-cookie-service-ssr": "^18.0.0", "npx": "^10.2.2", "rxjs": "~7.8.0", "swiper": "^11.1.9", "tslib": "^2.3.0", "zone.js": "~0.14.2" }, "devDependencies": { "@angular-devkit/build-angular": "^18.0.0", "@angular-eslint/builder": "^18.0.0", "@angular-eslint/eslint-plugin": "^18.0.0", "@angular-eslint/eslint-plugin-template": "^18.0.0", "@angular-eslint/schematics": "^18.0.0", "@angular-eslint/template-parser": "^18.0.0", "@angular/cli": "^18.0.0", "@angular/compiler-cli": "^18.0.0", "@angular/language-service": "^18.0.0", "@capacitor/cli": "6.1.0", "@chromatic-com/storybook": "^1.6.1", "@ionic/angular-toolkit": "^12.1.1", "@ngrx/store-devtools": "^18.0.1", "@storybook/addon-a11y": "^8.2.6", "@storybook/addon-backgrounds": "^8.2.6", "@storybook/addon-essentials": "^8.2.6", "@storybook/addon-interactions": "^8.2.6", "@storybook/addon-links": "^8.2.6", "@storybook/addon-measure": "^8.2.6", "@storybook/addon-onboarding": "^8.2.6", "@storybook/addon-viewport": "^8.2.6", "@storybook/angular": "^8.2.6", "@storybook/blocks": "^8.2.6", "@storybook/test": "^8.2.6", "@types/express": "^4.17.17", "@types/jasmine": "~5.1.0", "@types/lodash": "^4.17.6", "@types/lodash-es": "^4.17.12", "@types/node": "^18.18.0", "@typescript-eslint/eslint-plugin": "^8.0.0", "@typescript-eslint/parser": "^8.0.0", "browser-sync": "^3.0.0", "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsdoc": "^48.2.1", "eslint-plugin-prefer-arrow": "1.2.2", "eslint-plugin-storybook": "^0.8.0", "jasmine-core": "~5.1.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.2.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.1.0", "prettier": "^3.3.2", "storybook": "^8.2.6", "typescript": "~5.4.0" }, "pnpm": { "overrides": { "rollup": "npm:@rollup/wasm-node" } }, "description": "Unieuro Ecommerce Frontend", "packageManager": "[email protected]" }

Client

Search

Version

5.2.2

Relevant log output

main.js:1 Error: `appId` is missing.
    at xt (main.js:1:1392089)
    at new ge (main.js:1:1392122)
    at Mn.ɵfac [as factory] (main.js:1:1393794)
    at Mc.hydrate (main.js:23:70880)
    at Mc.get (main.js:23:69435)
    at on (main.js:23:58722)
    at hn (main.js:23:58801)
    at fn (main.js:23:58846)
    at new p (main.js:1:1546928)
    at mb.ɵfac [as factory] (main.js:1:1550213)

[shortcuts]

Hey, thanks for opening the issue, could you share a code snippet of your algoliasearch instantiation?

[sureshkumarsendrayan]

Hey, thanks for opening the issue, could you share a code snippet of your algoliasearch instantiation?

Here is the code.

import { algoliasearch, SearchResponse, SearchResponses } from 'algoliasearch';
import { environment } from 'src/environments/environment';

@Injectable({
	providedIn: 'root'
})
export class AlgoliaService {
	private readonly searchClient = algoliasearch(
		environment.algolia.appId,
		environment.algolia.apiKey
	);

	search = <T>(
		query: string,
		filters: string
	): Observable<SearchResponse<T>> => {
		return from(
			this.searchClient.searchSingleIndex({
				indexName: environment.algolia.relevanceIndex,
				searchParams: {
					query,
					analytics: true,
					filters,
					facets: ['*'],
					hitsPerPage: environment.algolia.hitsPerPage
				}
			})
		) as Observable<SearchResponse<unknown>> as Observable<SearchResponse<T>>;
	};
}

In the environment.prod.js, I have the correct appId and appKey property values.

[shortcuts]

Could you try bumping to the latest 5.9.1 version and let me know if the error still occurs?

[sureshkumarsendrayan]

Could you try bumping to the latest 5.9.1 version and let me know if the error still occurs?

I'm getting below error while running ng serve when I try to use algoliasearch 5.9.1 version.

You can find the minimal reproducible repo here for the above issue. I removed appId and apiKey in the code. You can use other keys.

[sureshkumarsendrayan]

Could you try bumping to the latest 5.9.1 version and let me know if the error still occurs?

And one more point from my side is, I'm facing the appId not found issue when buildOptimizer is true in angular.json.

[rubenheymans]

same for me, works in dev but not on a prod build

"algoliasearch": "^5.12.0", "instantsearch.js": "^4.75.3", "@angular/core": "17.0.9",

[rubenheymans]

it works now, this is what I did: remove the old angular algolia packages from package.json rm -rf node_modules rm -rf package-lock.json npm i update import from import { liteClient as algoliasearch } from 'algoliasearch/lite'; to import { algoliasearch } from 'algoliasearch';

[shortcuts]

thanks @rubenheymans !! closing the issue, anyone feel free to let us know if you can still see this error

[rubenheymans]

I'm not the op though? should not you wait for @sureshkumarsendrayan confirmation?

[bdairy]

Same Issue on version 5.21 "@algolia/client-search": "^5.21.0", I had to turn off "buildOptimizer" to make it work..

[Giusti]

@bdairy compared to the old version it now requires the appId during build time. Initially I was confused because it worked locally and the old deployed Version also worked. I had not exposed it in my build Pipeline but after it worked as expected.

Maybe that solves your issue

[narcecl]

I'm having the same issue but with the test (jest) on Next.js

[kavalcio]

Still having this issue using React and Vite

[artem-netepin]

Having the same issue in v5.37.0 with Next.js app. Any workarounds?