Instant Search for Angular 2 CLI based project

Hi,

I’m trying to use the instant search in an Angular 2 project, I’m getting stuck when trying to import it into a module.
I’ve tried doing this

import { instantsearch } from “instantsearch.js”;

but I get an error along the lines of “cannot find module instantsearch.js”

Yes instant search is in my package.json and installed into the node_modules.

Thanks

1 Like

Did you try changing it to

import instantsearch from 'instantsearch.js';

let me know if that helps

Thanks for replying.

No that didn’t help. I get :
Cannot find module ‘instantsearch.js’.

It seems to be the 2nd part of the statement that fails.

Looking in the node modules folder I see the instantsearch.js.
And inside that I see dist-es5-module/src/index.js which has a comment
// we need to export using commonjs for ease of usage in all
// JavaScript environments

Does that mean it is not exported? I’m confused.

Also, just to be complete I tried.
let instantsearch = require(‘instantsearch.js’);
Which leads to errors in the console like this:

ERROR in /Users/larsb/Documents/mycode/catalog/src/app/products/products.module.ts (19,31): Cannot find module ‘instantsearch.js’.)

ERROR in /Users/larsb/Documents/mycode/catalog/src/app/products/product-list/product-list.component.ts (15,21): Cannot find name ‘require’.)

ERROR in ./~/instantsearch.js/dist-es5-module/src/lib/InstantSearch.js
Module not found: Error: Can’t resolve ‘lodash/forEach’ in ‘/Users/larsb/Documents/mycode/catalog/node_modules/instantsearch.js/dist-es5-module/src/lib’
@ ./~/instantsearch.js/dist-es5-module/src/lib/InstantSearch.js 19:15-40
@ ./~/instantsearch.js/dist-es5-module/src/lib/main.js
@ ./~/instantsearch.js/dist-es5-module/index.js
@ ./src/app/products/product-list/product-list.component.ts
@ ./src/app/products/products.module.ts
@ ./src async
@ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
@ ./~/@angular/core/src/linker.js
@ ./~/@angular/core/src/core.js
@ ./~/@angular/core/index.js
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in ./~/instantsearch.js/dist-es5-module/src/widgets/search-box/search-box.js
Module not found: Error: Can’t resolve ‘lodash/forEach’ in ‘/Users/larsb/Documents/mycode/catalog/node_modules/instantsearch.js/dist-es5-module/src/widgets/search-box’
@ ./~/instantsearch.js/dist-es5-module/src/widgets/search-box/search-box.js 11:15-40
@ ./~/instantsearch.js/dist-es5-module/src/lib/main.js
@ ./~/instantsearch.js/dist-es5-module/index.js
@ ./src/app/products/product-list/product-list.component.ts
@ ./src/app/products/products.module.ts
@ ./src async
@ ./~/@angular/core/src/linker/system_js_ng_module_factory_loader.js
@ ./~/@angular/core/src/linker.js
@ ./~/@angular/core/src/core.js
@ ./~/@angular/core/index.js
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

That is super weird, I can’t replicate it weirdly. What webpack config do you have?

It’s also interesting to try turning off watch mode, cleaning node_modules, running npm install again, and then see what errors you get.

I hope that already helps

Webpack should be able to import commonjs modules without a problem.

1 Like

hmmm that did move me forward. However I’m now getting the below.
(btw I spun up a new project and I’ll post it to github, so others will have a model to doing this once I get it figured out)

ERROR in ./~/instantsearch.js/dist-es5-module/src/lib/InstantSearch.js
Module not found: Error: Can’t resolve ‘lodash/forEach’ in ‘/Users/larsb/Documents/mycode/AngularAlgolia/node_modules/instantsearch.js/dist-es5-module/src/lib’
@ ./~/instantsearch.js/dist-es5-module/src/lib/InstantSearch.js 19:15-40
@ ./~/instantsearch.js/dist-es5-module/src/lib/main.js
@ ./~/instantsearch.js/dist-es5-module/index.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in ./~/instantsearch.js/dist-es5-module/src/widgets/search-box/search-box.js
Module not found: Error: Can’t resolve ‘lodash/forEach’ in ‘/Users/larsb/Documents/mycode/AngularAlgolia/node_modules/instantsearch.js/dist-es5-module/src/widgets/search-box’
@ ./~/instantsearch.js/dist-es5-module/src/widgets/search-box/search-box.js 11:15-40
@ ./~/instantsearch.js/dist-es5-module/src/lib/main.js
@ ./~/instantsearch.js/dist-es5-module/index.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

ERROR in ./~/instantsearch.js/dist-es5-module/src/lib/InstantSearch.js
Module not found: Error: Can’t resolve ‘lodash/mergeWith’ in ‘/Users/larsb/Documents/mycode/AngularAlgolia/node_modules/instantsearch.js/dist-es5-module/src/lib’
@ ./~/instantsearch.js/dist-es5-module/src/lib/InstantSearch.js 23:17-44
@ ./~/instantsearch.js/dist-es5-module/src/lib/main.js
@ ./~/instantsearch.js/dist-es5-module/index.js
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

Ok I set up a simple example repository

https://github.com/KillionCorp/AngularAlgolia

At this point I think the problem is in src/app/app.component.ts with the import, but I could be way off.

thanks again

2 Likes

Hi @larsb, this:

var instantsearch = require('instantsearch.js');

I just tried it on your project and it worked.

I believe is the right way to import instantsearch in your code. It seems you cannot yet use the import syntax with instantsearch.js.

Can you open an issue on our GitHub repository? Since this is clearly a bug. Thanks!

EDIT: It seems in some situations it works so it might be related to how your project understands import statements for ES5 based code.

1 Like

thanks for responding. I just filed an issue in github.

You said “in some situations it works” can you explain under which circumstances it works?

thanks again

In some situations: I just tried it with an online playground that is using browserify + babel and the import statement worked. What I guess is that the angular stack when using the import statement behave differently than the babel one.

1 Like

Is there a timeline on when importing instantsearch.js with webpack will be available?