Instantsearch.js: Webpack and Typescript, v2.3.0 Error: Can't resolve 'react'

[Giovanni-Mattucci]

I'm using Webpack 3 and Typescript, and I have been including instantsearch.js in my files like so:

import * as instantsearch from 'instantsearch.js';

This has been working fine.

I recently tried upgrading from 2.0.2 to 2.3.0 and I followed your es6 example in your v2 documentation:

import instantsearch from 'instantsearch.js/es';
import { searchBox } from 'instantsearch.js/es/widgets';
const search = instantsearch(/* parameters */);
search.addWidget(
    searchBox({
        container: '#search-input'
    })
);

However I am running into trouble.
I get the following errors when I try initializing a widget.

ERROR in ./node_modules/instantsearch.js/es/components/MenuSelect.js
Module not found: Error: Can't resolve 'react' in 'C:\Users\mattucci\Documents\Visual-Studio-2017\Projects\Ontariocolleges\Ontariocolleges\node_modules\instantsearch.js\es\components'
 @ ./node_modules/instantsearch.js/es/components/MenuSelect.js 11:0-41
 @ ./node_modules/instantsearch.js/es/widgets/menu-select/menu-select.js
 @ ./node_modules/instantsearch.js/es/widgets/index.js
 @ ./Content/Scripts/search/search-programs-instantsearch.ts
 @ ./Content/Scripts/pages/program-search.ts

ERROR in ./node_modules/instantsearch.js/es/widgets/menu-select/menu-select.js
Module not found: Error: Can't resolve 'react' in 'C:\Users\mattucci\Documents\Visual-Studio-2017\Projects\Ontariocolleges\Ontariocolleges\node_modules\instantsearch.js\es\widgets\menu-select'
 @ ./node_modules/instantsearch.js/es/widgets/menu-select/menu-select.js 1:0-26
 @ ./node_modules/instantsearch.js/es/widgets/index.js
 @ ./Content/Scripts/search/search-programs-instantsearch.ts
 @ ./Content/Scripts/pages/program-search.ts

ERROR in ./node_modules/instantsearch.js/es/widgets/menu-select/menu-select.js
Module not found: Error: Can't resolve 'react-dom' in 'C:\Users\mattucci\Documents\Visual-Studio-2017\Projects\Ontariocolleges\Ontariocolleges\node_modules\instantsearch.js\es\widgets\menu-select'
 @ ./node_modules/instantsearch.js/es/widgets/menu-select/menu-select.js 2:0-33
 @ ./node_modules/instantsearch.js/es/widgets/index.js
 @ ./Content/Scripts/search/search-programs-instantsearch.ts
 @ ./Content/Scripts/pages/program-search.ts

What am I doing wrong in including the widget modules and why is it asking for react as a dependency? :(

[Haroenv]

Could you make this available as a repository so we can help debug?

Can you try adding preact as alias for react too? https://github.com/developit/preact-compat#usage-with-webpack

[bobylito]

@Giovanni-Mattucci Is menu-select the only widget that triggers the error? Have you had the error when using 2.0.2?

Thanks

[Giovanni-Mattucci]

@Haroenv @bobylito So I added the alias in webpack and now everything is working fine 👍

resolve: {
            extensions: ['.ts', '.js'],
            alias: {
                'react': 'preact-compat',
                'react-dom': 'preact-compat'
            }
}

@bobylito I never had the issue with 2.0.2, and it is only those two widgets the one widget MenuSelect that the error comes up for, which I am not using by the way. (update)

Oh and @Haroenv, sorry I can't put up my code, I'm working with a private repo.

[bobylito]

@Haroenv @bobylito So I added the alias in webpack and now everything is working fine 👍

Ok, so we have a quick fix 👍

@bobylito I never had the issue with 2.0.2, and it is only those two widgets that the error comes up for, which I am not using by the way.

That is very very helpful. By the way, which is the second widget?

Oh and @Haroenv, sorry I can't put up my code, I'm working with a private repo.

That's understood thanks. We'll have to try to reproduce the issue on our side.

[bobylito]

Do you happen to use InstantSearch.js with Angular or another framework?

[Haroenv]

We should document somewhere that in some cases you'll need to alias react to preact, or else we can maybe do the transform with babel?

[Giovanni-Mattucci]

@bobylito oh sorry I was confused, only that one module, MenuSelect. I looked quickly at the error and saw two different files, MenuSelect.js and menu-select.js and thought it was two different modules.

We do use instantsearch with Angular, but an older version. Haven't started using the new Angular native instantsearch. We will look into using it once this issue is closed, it's a big one for us.

[bobylito]

If you're integrating into a framework, you shouldn't need any widgets. The idea is that you should be able to delegate all the rendering using connectors, which don't have any dependency on React for sure.

[Giovanni-Mattucci]

@bobylito I've removed the aliases since upgrading to 2.5.1 and I'm not having the problem anymore :)

I see the fix got incorporated into 2.3.2 so I guess we can consider this closed?

[Haroenv]

This should have been fixed since #2618. All references now point to preact-compat or preact in the code. Thanks for reminding us of this issue @Giovanni-Mattucci

[devprojectsapps]

@Giovanni-Mattucci Is there a chance to get in contact with you? We are using Laravel with Laravel-mix (Webpack) and want to upgrade instantsearch.js from version 2.0.2 to 2.6.* but we are getting Reference Errors in our JS Files and we have no idea why that happens after upgrade to version 2.6.*

[Haroenv]

Please post a reproduction repository @devprojectsapps?

[Giovanni-Mattucci]

@devprojectsapps yes, please post reproduction repo and details of the error if you are looking for help. We would need to see what kind of JS compiling environment you have. I am using Webpack + Typescript and CommonJS modules.