Instantsearch.js: Importing `instantsearch.js/dist-es5-module` in a non-react app

[iam4x]

Do you want to request a feature or report a bug?

It's a bug, when you try to build an application for the browser and it's not using React in it's own dependencies you will get this kind of errors:

ERROR in ./node_modules/instantsearch.js/dist-es5-module/src/widgets/range-slider/range-slider.js
Module not found: Error: Can't resolve 'react' in '/Users/iam4x/github/experiement-tree-shaking/node_modules/instantsearch.js/dist-es5-module/src/widgets/range-slider'
 @ ./node_modules/instantsearch.js/dist-es5-module/src/widgets/range-slider/range-slider.js 8:13-29
 @ ./node_modules/instantsearch.js/dist-es5-module/src/widgets/index.js
 @ ./node_modules/instantsearch.js/dist-es5-module/src/lib/main.js
 @ ./node_modules/instantsearch.js/dist-es5-module/index.js
 @ ./index.js

Bug: What is the proposed solution?

We should completely replace any occurrence of react in our code with the dependency we are using, which is preact now.

[Haroenv]

Is that because the webpack Alias we sat doesn't get transformed into preact?

Maybe we should just develop with preact at all times to not have these errors

[iam4x]

Yes exactly @Haroenv but this is not doable because we are relying on libraries that use React itself like rheostat.

If you import widgets you will need React as dependency of your app.

I have no idea on how to fix that for now, maybe document and say that React is needed when using widgets from the npm package and not importing the umd build.

[Haroenv]

How does the slider work once bundled, but not when it's used with preact in the first place?

[thangngoc89]

In a codebase I'm working on with preact-compat to reuse React ecosystem, I use https://github.com/tleunen/babel-plugin-module-resolver as a single source of truth for defining aliases. It transforms the source code so there should be no problem when importing it