WorkerNavigator is not defined

[richard-thai]

Hi

I'm encountering an error "WorkerNavigator is not defined" while testing @azure/app-configuration-provider on a NextJS 14 project using App Router.

Any assistance would be appreciated. Thank you.

stacktrace

ReferenceError: WorkerNavigator is not defined
    at **isWebWorker** (webpack-internal:///(rsc)/../../node_modules/.pnpm/@azure+app-configuration-provider@1.0.0/node_modules/@azure/app-configuration-provider/dist-esm/requestTracing/utils.js:97:137)
    at getHostType (webpack-internal:///(rsc)/../../node_modules/.pnpm/@azure+app-configuration-provider@1.0.0/node_modules/@azure/app-configuration-provider/dist-esm/requestTracing/utils.js:74:14)
    at createCorrelationContextHeader (webpack-internal:///(rsc)/../../node_modules/.pnpm/@azure+app-configuration-provider@1.0.0/node_modules/@azure/app-configuration-provider/dist-esm/requestTracing/utils.js:20:72)
    at #loadSelectedKeyValues (webpack-internal:///(rsc)/../../node_modules/.pnpm/@azure+app-configuration-provider@1.0.0/node_modules/@azure/app-configuration-provider/dist-esm/AzureAppConfigurationImpl.js:129:197)
    at #loadSelectedAndWatchedKeyValues (webpack-internal:///(rsc)/../../node_modules/.pnpm/@azure+app-configuration-provider@1.0.0/node_modules/@azure/app-configuration-provider/dist-esm/AzureAppConfigurationImpl.js:169:65)
    at AzureAppConfigurationImpl.load (webpack-internal:///(rsc)/../../node_modules/.pnpm/@azure+app-configuration-provider@1.0.0/node_modules/@azure/app-configuration-provider/dist-esm/AzureAppConfigurationImpl.js:185:52)
    at load (webpack-internal:///(rsc)/../../node_modules/.pnpm/@azure+app-configuration-provider@1.0.0/node_modules/@azure/app-configuration-provider/dist-esm/load.js:53:32)
    at eval (webpack-internal:///(rsc)/../../packages/core/src/config/app-configuration.ts:21:96)
    at __webpack_require__.a (C:\Projects\Framework\ui\template\nextjs\internal-webapp-basic\apps\webui\.next\server\webpack-runtime.js:105:13)
    at eval (webpack-internal:///(rsc)/../../packages/core/src/config/app-configuration.ts:1:21)
    at (rsc)/../../packages/core/src/config/app-configuration.ts (C:\Projects\Framework\ui\template\nextjs\internal-webapp-basic\apps\webui\.next\server\app\(workflow)\admin\page.js:719:1)
    at __webpack_require__ (C:\Projects\Framework\ui\template\nextjs\internal-webapp-basic\apps\webui\.next\server\webpack-runtime.js:33:43)
    at eval (webpack-internal:///(rsc)/./app/(workflow)/admin/page.tsx:8:96)
    at __webpack_require__.a (C:\Projects\Framework\ui\template\nextjs\internal-webapp-basic\apps\webui\.next\server\webpack-runtime.js:105:13)
    at eval (webpack-internal:///(rsc)/./app/(workflow)/admin/page.tsx:1:21)
    at (rsc)/./app/(workflow)/admin/page.tsx (C:\Projects\Framework\ui\template\nextjs\internal-webapp-basic\apps\webui\.next\server\app\(workflow)\admin\page.js:577:1)
    at Function.__webpack_require__ (C:\Projects\Framework\ui\template\nextjs\internal-webapp-basic\apps\webui\.next\server\webpack-runtime.js:33:43)
    at runNextTicks (node:internal/process/task_queues:60:5)
    at listOnTimeout (node:internal/timers:540:9)
    at process.processTimers (node:internal/timers:514:7)
    at async e7 (C:\Projects\Framework\ui\template\nextjs\internal-webapp-basic\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:35:39
6786)
    at async rU (C:\Projects\Framework\ui\template\nextjs\internal-webapp-basic\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:72
90)
    at async C:\Projects\Framework\ui\template\nextjs\internal-webapp-basic\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:10360
    at async Promise.all (index 0)
    at async rU (C:\Projects\Framework\ui\template\nextjs\internal-webapp-basic\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:10
036)
    at async C:\Projects\Framework\ui\template\nextjs\internal-webapp-basic\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:10360
    at async Promise.all (index 0)
    at async rU (C:\Projects\Framework\ui\template\nextjs\internal-webapp-basic\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:10
036)
    at async C:\Projects\Framework\ui\template\nextjs\internal-webapp-basic\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:10360
    at async Promise.all (index 0)
    at async rU (C:\Projects\Framework\ui\template\nextjs\internal-webapp-basic\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:10
036)
    at async r1 (C:\Projects\Framework\ui\template\nextjs\internal-webapp-basic\node_modules\.pnpm\next@14.2.5_react-dom@18.3.1_react@18.3.1__react@18.3.1\node_modules\next\dist\compiled\next-server\app-page.runtime.dev.js:39:17
308)

config.tsx

import { config } from "@example/core/config/app-configuration";

export default function Config() {

    return (
        <>
            <h1>Config</h1>
            <p>{JSON.stringify(config)}</p>
        </>
    );
}

app-configuration.ts

import { load } from '@azure/app-configuration-provider';

const connectionString = process.env.APPCONFIG_CONNECTION_STRING!;
const keyPrefix = process.env.APPCONFIG_KEY_PREFIX!;

const appConfig = await load(connectionString, {
    selectors: [
        {
            keyFilter: `${keyPrefix}.*`,
        },
    ],
    trimKeyPrefixes: [keyPrefix],
});

export const config = appConfig.constructConfigurationObject({
    separator: "."
});

[Eskibear]

Looks like a bug here, as browser usage is not guarded by current test cases.

AppConfiguration-JavaScriptProvider/src/requestTracing/utils.ts

Line 162 in 9f841d7

const isNavigatorDefinedAsExpected = typeof navigator === "object" && typeof WorkerNavigator !== "function" && navigator instanceof WorkerNavigator;

[richard-thai]

Thanks Eskibear. To get around the problem, I've set the environment variable AZURE_APP_CONFIGURATION_TRACING_DISABLED=true.

[Eskibear]

@richard-thai
v1.0.1 has been released. Please give it a try, see if it works. Thanks.

[richard-thai]

@richard-thai v1.0.1 has been released. Please give it a try, see if it works. Thanks.

Yes, that fix works perfectly. Thank you for the quick turnaround!