searchBox "instantsearch.widgets" are not available from the ES build.

[mikebhart]

Hi there I'm adding instantsearch.js to my webpack project. It doesn't like searchBox for some reason. I have tried many combinations. I get the following

index.js:18 Uncaught ReferenceError: "instantsearch.widgets" are not available from the ES build.

To import the widgets:

import { searchBox } from 'instantsearch.js/es/widgets'
    at Function.get (index.js:18)

Code is:-

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

const searchClient = algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76');

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

search.addWidgets([
	searchBox({
		container: '#searchbox',
	}),
	hits({
		container: '#hits',
		templates: {
			item: `
<article>
  <h1>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</h1>
  <p>{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}</p>
</article>
`,
		},
	}),
	instantsearch.widgets.menuSelect({
		container: '#brand-list',
		attribute: 'brand',
	}),
	instantsearch.widgets.pagination({
		container: '#pagination',
	}),
]);

search.start();
```

[Haroenv]

How are you importing now? The error message is correct, you should import from /es/widgets

[mikebhart]

I'm importing as shown in my code. Can you give me the correct code that works for importing webpack for aloglia and instantsearch js? I do believe something is not quite right with the searchBox widget in the repo because even if you don't reference searchBox you will get an errror,
Many Thanks

[Haroenv]

import algoliasearch  from 'algoliasearch/lite';
import instantsearch  from 'instantsearch.js/es';
import { searchBox, hits, pagination, menuSelect } from 'instantsearch.js/es/widgets';

const searchClient = algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76');

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

search.addWidgets([
	searchBox({
		container: '#searchbox',
	}),
	hits({
		container: '#hits',
		templates: {
			item: `
<article>
  <h1>{{#helpers.highlight}}{ "attribute": "name" }{{/helpers.highlight}}</h1>
  <p>{{#helpers.highlight}}{ "attribute": "description" }{{/helpers.highlight}}</p>
</article>
`,
		},
	}),
	menuSelect({
		container: '#brand-list',
		attribute: 'brand',
	}),
	pagination({
		container: '#pagination',
	}),
]);

search.start();

Maybe the error message was wrong, but there were other references to Instantsearch.widgets in your code. Does it work like this?

[mikebhart]

Works great, thankyou so much.