Add package.json exports map

[janosh]

I'm having trouble using this package with SvelteKit. Listing algoliasearch as svelte-algolia dependency and then attempting to import the latter leads to:

[vite] Error when evaluating SSR module /node_modules/.pnpm/[email protected]/node_modules/algoliasearch/lite.js?v=f431d156: ReferenceError: module is not defined

See https://github.com/janosh/svelte-algolia/issues/3 for details.

The error disappears when importing dist/algoliasearch-lite.esm.browser directly.

import algoliasearch, { SearchClient } from 'algoliasearch/dist/algoliasearch-lite.esm.browser'

but then TS complains

Cannot find module 'algoliasearch/dist/algoliasearch-lite.esm.browser' or its corresponding type declarations.ts(2307)

I think an easy fix to both these issues would be to add an exports map to your package.json in addition to the browser and files fields:

  "browser": {
    "./index.js": "./dist/algoliasearch.umd.js",
    "./lite.js": "./dist/algoliasearch-lite.umd.js"
  },
  "types": "index.d.ts",
  "files": [
    "dist",
    "index.js",
    "index.d.ts",
    "lite.js",
    "lite.d.ts"
  ],
  "exports": {
    "./lite": "./dist/algoliasearch-lite.esm.browser.js",
    // ...
  },

as that's what Vite and presumably other ESM bundlers are looking for.

[Haroenv]

Adding the exports is interesting, but a breaking change, as exports are all possible files you can use, not just a few you can map.

It probably would be interesting to make typescript generate definitions for the algoliasearch-lite.esm.browser build as well (maybe can even be copied from another file?)

[janosh]

Adding the exports is interesting, but a breaking change, as exports are all possible files you can use, not just a few you can map.

Yes, I meant all files. Is that a problem? The package tree seems small enough:

├── README.md
├── dist
│   ├── algoliasearch-lite.d.ts
│   ├── algoliasearch-lite.esm.browser.js
│   ├── algoliasearch-lite.umd.js
│   ├── algoliasearch.cjs.js
│   ├── algoliasearch.d.ts
│   ├── algoliasearch.esm.browser.js
│   └── algoliasearch.umd.js
├── index.d.ts
├── index.js
├── lite.d.ts
├── lite.js
└── package.json

Maybe an ESM only version of algoliasearch would be another option? Seen some people advocate against dual ESM/CJS packages.

[Haroenv]

Ah you're right, I didn't realise that this package didn't publish it source files, and all exposed files are public. In that case exports could work, but it's still a major version to add most likely. I'll discuss with the team to see what's best

[janosh]

@Haroenv Just checking in to see if the team discussed this yet?

[bodinsamuel]

cc @shortcuts

[shortcuts]

Hey ! We need to do a bit of investigation on how to adapt the exports key to match both our browser and node builds (probably conditional exports).

Do you have a simple reproduction available?

[janosh]

@shortcuts The reproduction used to be at https://github.com/kenjonespizza/svelteKit-svelte-algolia-test but I think @kenjonespizza deleted it.

I tried just now to recreate the error myself but didn't manage.

Do you still have the repo locally by any chance, @kenjonespizza?

[janosh]

Ah, I managed to see the error again.

It's not exactly a minimal reproduction but if you clone this branch

https://github.com/janosh/afara/tree/algolia-error

install deps and run npm/yarn/pnpm dev, you should see:

svelte-kit dev
Pre-bundling dependencies:
  svelte
  svelte/store
  svelte/animate
  js-yaml
  svelte/transition
  (...and 5 more)
(this will be run only when your dependencies or config have changed)

  SvelteKit v1.0.0-next.282

  local:   http://localhost:3000
  network: not exposed

  Use --host to expose server to other devices on this network


7:55:29 PM [vite] Error when evaluating SSR module /node_modules/algoliasearch/index.js?v=b6e66fba:
ReferenceError: require is not defined
    at /node_modules/algoliasearch/index.js?v=b6e66fba:2:23
    at instantiateModule (/Users/janosh/Repos/afara/node_modules/vite/dist/node/chunks/dep-971d9e33.js:56177:15)

[kenjonespizza]

Hi! I got this back up. I took down originally because I wasn't sure if env vars should be private... but I want this to be easy for you all to recreate. So, maybe just let me know if those vars should be private and I'll re-roll them in my test account 😅

https://github.com/kenjonespizza/svelteKit-svelte-algolia-test

The error I get is:

ReferenceError: module is not defined
    at /node_modules/algoliasearch/lite.js?v=94cfd32a:2:1
    at instantiateModule (/Users/ken_docs/www/public/svelteKit/svelteKit-svelte-algolia-test/node_modules/vite/dist/node/chunks/dep-971d9e33.js:56177:15)```

[acoyfellow]

After upgrading to latest SvelteKit that requires vite3, I'm getting this error on dev + build:

/[projectName]/node_modules/.pnpm/[email protected]/node_modules/algoliasearch/dist/algoliasearch.esm.browser.js:2221
export default algoliasearch;
^^^^^^

SyntaxError: Unexpected token 'export'
....

I'm importing algoliasesrch via import algoliasearch from "algoliasearch/dist/algoliasearch.esm.browser";

I'm assuming this is related?

edit: for anyone who is running into the same issue: my workaround is to import algoliasearch.esm.browser.js only in the browser, like a SSR unfriendly library (https://kit.svelte.dev/faq#integrations-how-do-i-use-a-client-side-only-library-that-depends-on-document-or-window)

[Radiergummi]

I'm getting a similar error with the 5.0.0 alpha client in SvelteKit:

import { algoliasearch } from 'algoliasearch';
^^^^^^

TypeError: Cannot read properties of undefined (reading 'default') 
    at /src/hooks.server.ts:9:13 
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async instantiateModule (file:///node_modules/vite/dist/node/chunks/dep-5e7f419b.js:52224:9)

I'm a little stumped by this. The module doesn't seem to have any export at all?

[manucorporat]

Thinking to drop algolia for Qwik docs, this issue needs to be fixed asap!