Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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? 😦

Issue Analytics

State:
Created 6 years ago
Comments:13 (8 by maintainers)

Top GitHub Comments

4reactions

Giovanni-Mattuccicommented, Feb 14, 2018

@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.

1reaction

Haroenvcommented, Feb 14, 2018

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