[bug]: Webpack / Typescript build issues

[bennettl]

Description

webpack is preventing the app from compiling due to type issues with the algoliasearch package

Language

JavaScript

Client

All

Steps to reproduce

I have the following relevant package dependencies

"typescript": "^4.7.4"
"@typescript-eslint/eslint-plugin": "^5.0.0",
"@typescript-eslint/parser": "^5.0.0",
 "algoliasearch": "^5.4.1",
"@nestjs/core": "^9.0.0",
...

And executed my backend with nest start --watch and contain the follow errors (on the relvant log output)

Here is my TS Config

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "es2021",
    "lib": [
      "es2021"
    ],
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false,
    "paths": {
      "@app/cache": [
        "libs/cache/src"
      ],
      "@app/cache/*": [
        "libs/cache/src/*"
      ],
      "@app/auth": [
        "libs/auth/src"
      ],
      "@app/auth/*": [
        "libs/auth/src/*"
      ],
      "@app/interceptors": [
        "libs/interceptors/src"
      ],
      "@app/interceptors/*": [
        "libs/interceptors/src/*"
      ],
      "@app/analytics": [
        "libs/analytics/src"
      ],
      "@app/analytics/*": [
        "libs/analytics/src/*"
      ],
      "@app/encrypt": [
        "libs/encrypt/src"
      ],
      "@app/encrypt/*": [
        "libs/encrypt/src/*"
      ],
      "@app/geolocation": [
        "libs/geolocation/src"
      ],
      "@app/geolocation/*": [
        "libs/geolocation/src/*"
      ]
    }
  }
}

Relevant log output

ERROR in /api/node_modules/@algolia/client-common/src/types/cache.ts
55:17-24
[tsl] ERROR in /api/node_modules/@algolia/client-common/src/types/cache.ts(55,18)
      TS2304: Cannot find name 'Storage'.

ERROR in //api/node_modules/@algolia/client-common/src/cache/createBrowserLocalStorageCache.ts
4:15-22
[tsl] ERROR in /api/node_modules/@algolia/client-common/src/cache/createBrowserLocalStorageCache.ts(4,16)
      TS2304: Cannot find name 'Storage'.

ERROR in /api/node_modules/@algolia/client-common/src/cache/createBrowserLocalStorageCache.ts
8:25-32
[tsl] ERROR in. /api/node_modules/@algolia/client-common/src/cache/createBrowserLocalStorageCache.ts(8,26)
      TS2304: Cannot find name 'Storage'.

ERROR in/api/node_modules/@algolia/client-common/src/cache/createBrowserLocalStorageCache.ts
10:40-46
[tsl] ERROR in /api/node_modules/@algolia/client-common/src/cache/createBrowserLocalStorageCache.ts(10,41)
      TS2304: Cannot find name 'window'.

4 errors have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

webpack 5.76.2 compiled with 4 errors in 16823 ms

### Self-service

- [ ] I'd be willing to fix this bug myself.

[shortcuts]

Hey, thanks for opening the issue :)

The type issue seems to be related to the fact that your backend build resolves to our browser build, rather than the node one.

Do you have a minimal reproduction of your stack, or more information about your environment?

Also, can you confirm your un on algoliasearch 5.5.2?

edit: I just saw nestjs

[bennettl]

Yes we are using NestJS and i ran

npm install --save algoliasearch

and on the package.json i see

"algoliasearch": "^5.5.3"

Is there something special i need to do resolve this to node build?

[shortcuts]

I think you need to hint webpack directly, with something like https://webpack.js.org/configuration/resolve/#resolveexportsfields

I don't get why nest resolves to the browser build, we default everything to node unless unspecified. I don't know nest enough to help debug the installation, @Fluf22 any idea?

[RLMarkStrudwick]

Hey, I'm also seeing this issue when running tsc within node.

I'm using "@algolia/client-search": "^5.6.1", and "typescript": "^5.4.5".

My tsconfig is:

{
  "compilerOptions": {
    "target": "es2020",
    "lib": ["es2020"],
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "inlineSourceMap": true,
    "inlineSources": true,
    "allowJs": true,
    "noEmit": true
  },
  "exclude": ["node_modules"]
}

I'm seeing the same errors about not being able to find window or Storage because this is not running in a browser.

> tsc

node_modules/@algolia/client-common/src/cache/createBrowserLocalStorageCache.ts:4:16 - error TS2304: Cannot find name 'Storage'.

4   let storage: Storage;
                 ~~~~~~~

node_modules/@algolia/client-common/src/cache/createBrowserLocalStorageCache.ts:8:26 - error TS2304: Cannot find name 'Storage'.

8   function getStorage(): Storage {
                           ~~~~~~~

node_modules/@algolia/client-common/src/cache/createBrowserLocalStorageCache.ts:10:41 - error TS2304: Cannot find name 'window'.

10       storage = options.localStorage || window.localStorage;
                                           ~~~~~~

node_modules/@algolia/client-common/src/transporter/helpers.ts:42:11 - error TS2550: Property 'replaceAll' does not exist on type 'string'. Do you need to change your target library? Try changing the 'lib' compiler option to 'es2021' or later.

42         ).replaceAll('+', '%20')}`,
             ~~~~~~~~~~

node_modules/@algolia/client-common/src/types/cache.ts:55:18 - error TS2304: Cannot find name 'Storage'.

55   localStorage?: Storage;
                    ~~~~~~~

Found 5 errors in 3 files.

Errors  Files
     3  node_modules/@algolia/client-common/src/cache/createBrowserLocalStorageCache.ts:4
     1  node_modules/@algolia/client-common/src/transporter/helpers.ts:42
     1  node_modules/@algolia/client-common/src/types/cache.ts:55

[RLMarkStrudwick]

Updating the tsconfig so that the lib includes "DOM" and changing the target to "es2021" appears to fix this. In your node example you've also added "DOM" to the lib, is there a reason for needing this within node? https://github.com/algolia/api-clients-automation/blob/main/playground/javascript/node/tsconfig.json#L6

[shortcuts]

Hey @bennettl could you let me know if this error still exist in 5.9.1? I believe the recent changes of the published typescript files might've fixed it.

Good point @RLMarkStrudwick I think that's a leftover of a copy, not needed for the node playground, I'll take a look