Instantsearch.js: instantsearch.widgets can't be find

[anthonyBertrant]

Describe the bug 🐛
The instantsearch.widgets is not find when opening my browser, but I got zero error when compiling my assets. The error is:

ReferenceError: "instantsearch.widgets" are not available from the ES build.
To import the widgets:
import { searchBox } from 'instantsearch.js/es/widgets'

To Reproduce 🔍
Steps to reproduce the behavior:

1. Follow the installation tutorial given at: https://www.algolia.com/doc/guides/building-search-ui/installation/js/
2. Add all the needed js includes (const algoliasearch = require('algoliasearch/lite') and
   const instantsearch = require('instantsearch.js').default
3. Execute npm run watch
4. Open the serch url
5. Error in console

Expected behavior 💭
Showing all widgets and searchBox bar, with all my items

Screenshots 🖥

Environment:

• OS: Mac 10.14.6
• Browser: Firefox
• Version 69.0.1

Additional context

I tried with import { searchBox } from 'instantsearch.js/es/widgets' or not, and the problem is still there.

my app.js

require('./bootstrap');

const algoliasearch = require('algoliasearch/lite');
const instantsearch = require('instantsearch.js').default;
import { searchBox } from 'instantsearch.js/es/widgets';

const searchClient = algoliasearch('54CZ551XUU', '89411fb5d2a80b5ee53127d9f67e148c');

const search = instantsearch({
    indexName: 'products',
    searchClient,
});

search.addWidgets([
    instantsearch.widgets.searchBox({
        container: '#searchbox',
    }),

    instantsearch.widgets.hits({
        container: '#hits',
    })
]);

search.start();

Webpack mix

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

package json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "2.3.1",
        "sass": "^1.22.12",
        "sass-loader": "7.*",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "algoliasearch": "^3.35.0",
        "instantsearch.js": "^3.6.0"
    }
}

Thanks for your help ;)

[Haroenv]

const algoliasearch = require('algoliasearch/lite');
const instantsearch = require('instantsearch.js').default;
import { searchBox, hits } from 'instantsearch.js/es/widgets';

const searchClient = algoliasearch('54CZ551XUU', '89411fb5d2a80b5ee53127d9f67e148c');

const search = instantsearch({
    indexName: 'products',
    searchClient,
});

search.addWidgets([
    searchBox({
        container: '#searchbox',
    }),

    hits({
        container: '#hits',
    })
]);

search.start();

this should work, the instantsearch.widgets form is for UMD (directly in the browser, without webpack)

[anthonyBertrant]

const algoliasearch = require('algoliasearch/lite');
const instantsearch = require('instantsearch.js').default;
import { searchBox, hits } from 'instantsearch.js/es/widgets';

const searchClient = algoliasearch('54CZ551XUU', '89411fb5d2a80b5ee53127d9f67e148c');

const search = instantsearch({
    indexName: 'products',
    searchClient,
});

search.addWidgets([
    searchBox({
        container: '#searchbox',
    }),

    hits({
        container: '#hits',
    })
]);

search.start();

this should work, the instantsearch.widgets form is for UMD (directly in the browser, without webpack)

Indeed, thanks Haroenv ! But it's very strange, because I've tried the two possibilities given by algolia docs, and now, for no reason, it works. Maybe some cache not reloaded properly I guess. Again, thanks for your help ;)

[Haroenv]

not sure you saw the difference, but what you wrote was:

    instantsearch.widgets.searchBox({

and what it should have been was:

    searchBox({