[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