[bug]: We are trying to upgrate too newest version but from 5.2.5 forward we cant build the application.

[secretsales-pkostadinov]

Description

I have been trying to upgrade to the latest version as was suggested to use it to resolve issues with personalization. But when I try to upgrade from "algoliasearch": "^4.24.0". to algoliasearch: 5.18.0 the application can't build.

Our application is magento/pwa-studio v10
webpack v4
node: v14.21.3

I start bumping the versions one by one. The first issue appears on: algoliasearch: 5.2.5 until "algoliasearch": "5.9.0"

ERROR in ./node_modules/algoliasearch/dist/lite/builds/node.cjs
Module not found: Error: Can't resolve '@algolia/client-common' in '/Users/pavelkostadinov/Projects/work/secretsales-pwa/node_modules/algoliasearch/dist/lite/builds'

ERROR in ./node_modules/algoliasearch/dist/lite/builds/node.cjs
Module not found: Error: Can't resolve '@algolia/requester-node-http' in '/Users/pavelkostadinov/Projects/work/secretsales-pwa/node_modules/algoliasearch/dist/lite/builds' 

From "algoliasearch": "5.9.0" the same error that we have with 5.18.0 start to appear.

ERROR in ./node_modules/@algolia/client-common/dist/common.cjs 331:7
Module parse failed: Unexpected token (331:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| // src/transporter/errors.ts
| var AlgoliaError = class extends Error {
>   name = "AlgoliaError";
|   constructor(message, name) {
|     super(message);

So to fix this issue I try to set a custom rule in webpack for the algolia packages.

config.module.rules.push({
        test: /\.cjs$/,
        include: /node_modules\/@algolia/,
        type: 'javascript/auto',
        use: [
            {
                loader: 'babel-loader',
                options: {
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                targets: {
                                    node: 'current', // Ensure compatibility with your Node.js environment
                                },
                                // modules: true, // Ensure CommonJS compatibility for `.cjs` files
                            },
                        ],
                    ],
                    plugins: [
                        '@babel/plugin-proposal-class-properties',
                        '@babel/plugin-transform-modules-commonjs',
                        [
                            '@babel/plugin-transform-runtime',
                            {
                                helpers: true,
                                regenerator: true,
                                // useESModules: true,
                            },
                        ],
                    ],
                },
            },
        ],
    });

I managed to get the build to succeed, but the search functionality isn’t working because is throws error for:

  import_url.URL is not a constructor

var import_url = webpack_require(/*! url */
"./node_modules/node-libs-browser/node_modules/url/url.js");

The file that is using is the node_modules/@algolia/requester-node-http/dist/requester.http.cjs:79:19

I tried changing the import, but it didn’t work.

import { algoliasearch } from 'algoliasearch/dist/browser';

Client

Search

Version

5.18.0

Relevant log output

No response

[shortcuts]

Hey, the v5 uses package.json#exports field to specify the bundle to pick, however I believe this is only supported in webpack v5 (as per webpack/webpack#9509).

I tried changing the import, but it didn’t work.

import { algoliasearch } from 'algoliasearch/dist/browser';

I believe using the umd build directly with import { algoliasearch } from "algoliasearch/dist/algoliasearch.umd.js"; should work

[secretsales-pkostadinov]

Hey, I tried it, and it’s working now, but it required a few adjustments.

Using the UMD build as you suggested with:

import algolia from "algoliasearch/dist/algoliasearch.umd.js"; const client = algolia.algoliasearch();

did the trick. Thanks for pointing that out!

[shortcuts]

nice!! enjoy :)

[secretsales-pkostadinov]

Hay we just found that recommendations stop working.

    "react-instantsearch": "^7.13.9",
    "algoliasearch": "^5.18.0",
    "@algolia/autocomplete-core": "^1.17.8",
    "@algolia/autocomplete-js": "^1.17.8",
    "qs": "6.13.1",
    "instantsearch.js": "4.75.6",
    "@algolia/autocomplete-plugin-query-suggestions": "^1.17.8",
    "@algolia/autocomplete-plugin-recent-searches": "1.17.8"

Do you know if there is some known issue.

[secretsales-pkostadinov]

@shortcuts

[shortcuts]

cc @Haroenv maybe the versions aren't correct?

[Haroenv]

No those look like recent versions of InstantSearch and autocomplete. Is the getRecommendations function available on the search client you are passing to InstantSearch?