search

algolia / angular-instantsearch

⚡️Lightning-fast search for Angular apps, by Algolia
https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/angular/
MIT License
259 stars 73 forks source link

Error when flattening the source-map of angular-instantsearch with ngcc (angular 9) #720

Open doliG opened 4 years ago

doliG commented 4 years ago

Describe the bug 🐛

We are currently trying to update our angular to the angular 9.0.5 version.

However, it looks like angular 9 is not able to compile the lib angular-instantsearch. Here are the logs:

❯ npx ngcc
Warning: Entry point 'angular-instantsearch' contains deep imports into './node_m
odules/algoliasearch/lite', './node_modules/instantsearch.js/es', './node_modules/instantsearch.js/es/connectors', './ngx-web/node_modules/a
lgoliasearch/index', './node_modules/querystring-es3/encode'. This is probably no
t a problem, but may cause the compilation of entry points to be out of order.
Compiling angular-instantsearch : fesm5 as esm5
Compiling angular-instantsearch : esm2015 as esm2015
Compiling angular-instantsearch : fesm2015 as esm2015
Compiling angular-instantsearch : esm5 as esm5
Compiling angular-instantsearch : main as umd
Error: Error when flattening the source-map "./node_modules/angular-instantsearch
/bundles/angular-instantsearch.umd.js.map" for "./node_modules/angular-instantsea
rch/bundles/angular-instantsearch.umd.js": TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received null

To Reproduce 🔍

Steps to reproduce the behavior:

npx @angular/cli@9.0.5 new project
cd project
npm i --save angular-instantsearch@latest
npx ngcc

Expected behavior 💭

The build pass.

Environment:

Haroenv commented 4 years ago

Could you make a reproduction on GitHub please? The error stack trace you posted looks rather short, so I am not sure what would be causing this

doliG commented 4 years ago

Sure, here is the repo: https://github.com/doliG/ais-bug

To reproduce, simply clone it and run npm install. This will trigger the postinstall script which results to the bug.

If you need more information about ngcc, please check https://angular.io/guide/ivy#ivy-and-universalapp-shell

doliG commented 4 years ago

Hello @Haroenv , did you manage to reproduce ?

Haroenv commented 4 years ago

Sorry @doliG, I haven't yet found time for looking at this issue, I'll put it first on my todo for tomorrow :)

doliG commented 4 years ago

Hello @Haroenv , any updates ?

Haroenv commented 4 years ago

sorry, no updates yet, I didn't find any causes yet

Haroenv commented 4 years ago

@doliG I only get a warning, not the error you listed, can you confirm?

doliG commented 4 years ago

Well, this is weird, can you tell me what did you do exactly ? This way I can try to reproduce on my machine

Edit: I tried two things, both resulting in the same error as in OP:

$ git clone https://github.com/doliG/ais-bug && cd ais-bug && npm i
// ...
Error: Error when flattening the source-map "./node_modules/angular-instantsearch/bundles/angular-instantsearch.umd.js.map" for "./node_modules/angular-instantsearch/bundles/angular-instantsearch.umd.js": TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received null
added 1529 packages from 1151 contributors and audited 15726 packages in 100.425s
$ npx @angular/cli@9.0.5 new project && cd project && npm i --save angular-instantsearch@latest && npx ngcc
// ...
Error: Error when flattening the source-map "./node_modules/angular-instantsearch/bundles/angular-instantsearch.umd.js.map" for "./node_modules/angular-instantsearch/bundles/angular-instantsearch.umd.js": TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received null
Haroenv commented 4 years ago

I did git clone, yarn, yarn run ngcc which only gives a warning about direct imports, sorry!

doliG commented 4 years ago

Well you should have the error just after yarn, because ngcc is run in postinstall script (basically after each npm i or yarn commands). So there is no need to do yarn run ngcc after yarn.

Please follow the steps mentioned above.

Haroenv commented 4 years ago

In the postinstall I also have no errors, I just ran ngcc again at a later point

lodi-g commented 4 years ago

I don't think you're correctly following the steps mentioned: git clone https://github.com/doliG/ais-bug && cd ais-bug && npm i

My complete log is here: https://hastebin.com/elotuboguz.coffeescript

On line 134:

Error: Error when flattening the source-map "/tmp/ais-bug/node_modules/angular-instantsearch/bundles/angular-instantsearch.umd.js.map" for "/tmp/ais-bug/node_modules/angular-instantsearch/bundles/angular-instantsearch.umd.js": TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received null

I think you've missed the error because npm/yarn still output things after error'ing. Re-running ngcc will not throw an error though, and that's why you didn't see it.

doliG commented 4 years ago

Thanks @lodi-g . I've also asked two of my work mates to try and they got the same error. If they are able to reproduce, you should too :)

jamesamuel commented 4 years ago

Receiving the same error.

angular 9.1.9 algoliasearch: 3.35.1 angular-instantsearch: 3.0.0-beta.5 instantsearch.js: 4.6.0

lodi-g commented 3 years ago

@Haroenv Hi, did you take a look? :)

Haroenv commented 3 years ago

According to the Angular bug tracker (https://github.com/angular/angular/issues/35757#issuecomment-594162535) this is related to cache, and that would explain why I didn't have the issue in a fresh repository. Have you tried clearing the cache & dist folder?

lodi-g commented 3 years ago

Again, I don't think you have followed the instructions correctly:

git clone https://github.com/doliG/ais-bug 
cd ais-bug
npm i

As the repository is just cloned, there is no cache nor dist folder. You can even try with npm ci which ensures there is a clean slate.

See the following video: https://asciinema.org/a/eTT4pPhqIvP7WDS9Sno7SsExj You may see the error on the line just before the npm WARN lines (at 01:32)

Please, take a few minutes to execute the three commands, you WILL have the error.

Haroenv commented 3 years ago

You're right, the issue can be reproduced on npm i, but a manual ngcc after that is actually succeeding without issues.

Since it's working outside of postinstall, I think this is much more likely a bug in ngcc than in Angular InstantSearch.

Npm doesn't allow to run arbitrary scripts, but yarn does. When I do that I get:

yarn ngcc
yarn run v1.18.0
$ /Users/haroen/git/test/ais-bug/node_modules/.bin/ngcc
Warning: Entry point 'angular-instantsearch' contains deep imports into '/Users/haroen/git/test/ais-bug/node_modules/algoliasearch/lite', '/Users/haroen/git/test/ais-bug/node_modules/querystring-es3/encode'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
✨  Done in 3.23s.
doliG commented 3 years ago

Well, running ngcc twice is useless, the second pass won't compile everything because it's already done (and cached). So of course you don't have any bug ! Remove node_modules and postbuild script, and retry yarn ngcc, you'll see the same error.

To me, it looks like you have no willingness to tackle this bug. In this situation, there is nothing we can do. But if you change your mind, and finally decide to take a real look on it, we'll be there to provide you as much support as we can.

Haroenv commented 3 years ago

The warning comes from this line in the angular compiler:

https://github.com/angular/angular/blob/decd95e7f0ec934c82f5b280205768fed055ec3c/packages/compiler-cli/ngcc/src/rendering/source_maps.ts#L65-L66

However, the second part of the error:

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received null

does not make sense to me.

@doliG, what happens if you edit the node_modules/angular-instantsearch/bundles/angular-instantsearch.umd.js to remove the last line (linking the source map). You can use e.g. patch-package to apply that on install too

I'm having a hard time reproducing this though, even on post install/npm I I only get this output:

npm i
npm WARN rm not removing /Users/haroen/git/test/ais-bug/node_modules/.bin/rimraf as it wasn't installed by /Users/haroen/git/test/ais-bug/node_modules/rimraf
npm WARN rm not removing /Users/haroen/git/test/ais-bug/node_modules/.bin/terser as it wasn't installed by /Users/haroen/git/test/ais-bug/node_modules/terser
npm WARN rm not removing /Users/haroen/git/test/ais-bug/node_modules/.bin/semver as it wasn't installed by /Users/haroen/git/test/ais-bug/node_modules/semver
npm WARN rm not removing /Users/haroen/git/test/ais-bug/node_modules/.bin/json5 as it wasn't installed by /Users/haroen/git/test/ais-bug/node_modules/json5
npm WARN rm not removing /Users/haroen/git/test/ais-bug/node_modules/.bin/mime as it wasn't installed by /Users/haroen/git/test/ais-bug/node_modules/mime

> fsevents@1.2.12 install /Users/haroen/git/test/ais-bug/node_modules/watchpack/node_modules/fsevents
> node-gyp rebuild

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> fsevents@1.2.12 install /Users/haroen/git/test/ais-bug/node_modules/webpack-dev-server/node_modules/fsevents
> node-gyp rebuild

  SOLINK_MODULE(target) Release/.node
  CXX(target) Release/obj.target/fse/fsevents.o
  SOLINK_MODULE(target) Release/fse.node

> core-js@3.6.4 postinstall /Users/haroen/git/test/ais-bug/node_modules/core-js
> node -e "try{require('./postinstall')}catch(e){}"

> @angular/cli@9.0.7 postinstall /Users/haroen/git/test/ais-bug/node_modules/@angular/cli
> node ./bin/postinstall/script.js

> project@0.0.0 postinstall /Users/haroen/git/test/ais-bug
> ngcc

Warning: Entry point 'angular-instantsearch' contains deep imports into '/Users/haroen/git/test/ais-bug/node_modules/algoliasearch/lite', '/Users/haroen/git/test/ais-bug/node_modules/querystring-es3/encode'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Compiling @angular/animations : fesm2015 as esm2015
Compiling @angular/animations : fesm5 as esm5
Compiling @angular/animations : esm2015 as esm2015
Compiling @angular/compiler/testing : fesm2015 as esm2015
Compiling @angular/animations : esm5 as esm5
Compiling @angular/animations : main as umd
Compiling @angular/core : fesm2015 as esm2015
Compiling @angular/core : fesm5 as esm5
Compiling @angular/core : esm2015 as esm2015
Compiling @angular/core : main as umd
Compiling @angular/core : esm5 as esm5
Compiling @angular/common : fesm2015 as esm2015
Compiling @angular/animations/browser : fesm2015 as esm2015
Compiling @angular/platform-browser : fesm2015 as esm2015
Compiling @angular/common/http : fesm2015 as esm2015
Compiling @angular/core/testing : fesm2015 as esm2015
Compiling @angular/platform-browser-dynamic : fesm2015 as esm2015
Compiling @angular/platform-browser/testing : fesm2015 as esm2015
Compiling @angular/common/testing : fesm2015 as esm2015
Compiling @angular/router : fesm2015 as esm2015
Compiling @angular/animations/browser : fesm5 as esm5
Compiling @angular/animations/browser : esm2015 as esm2015
Compiling @angular/animations/browser : esm5 as esm5
Compiling @angular/animations/browser : main as umd
Compiling @angular/animations/browser/testing : fesm5 as esm5
Compiling @angular/animations/browser/testing : fesm2015 as esm2015
Compiling @angular/animations/browser/testing : esm2015 as esm2015
Compiling @angular/animations/browser/testing : main as umd
Compiling @angular/animations/browser/testing : esm5 as esm5
Compiling @angular/common : fesm5 as esm5
Compiling @angular/common : esm2015 as esm2015
Compiling @angular/common : esm5 as esm5
Compiling @angular/common : main as umd
Compiling @angular/common/http : fesm5 as esm5
Compiling @angular/common/http : esm2015 as esm2015
Compiling @angular/common/http : esm5 as esm5
Compiling @angular/common/http : main as umd
Compiling @angular/common/http/testing : fesm5 as esm5
Compiling @angular/common/http/testing : fesm2015 as esm2015
Compiling @angular/common/http/testing : esm2015 as esm2015
Compiling @angular/common/http/testing : esm5 as esm5
Compiling @angular/common/http/testing : main as umd
Compiling @angular/forms : fesm5 as esm5
Compiling @angular/forms : esm2015 as esm2015
Compiling @angular/forms : fesm2015 as esm2015
Compiling @angular/forms : esm5 as esm5
Compiling @angular/platform-browser : fesm5 as esm5
Compiling @angular/forms : main as umd
Compiling @angular/platform-browser : esm2015 as esm2015
Compiling @angular/platform-browser : esm5 as esm5
Compiling @angular/platform-browser : main as umd
Compiling @angular/platform-browser/animations : fesm5 as esm5
Compiling @angular/platform-browser/animations : esm2015 as esm2015
Compiling @angular/platform-browser/animations : fesm2015 as esm2015
Compiling @angular/platform-browser/animations : esm5 as esm5
Compiling @angular/platform-browser/animations : main as umd
Compiling @angular/core/testing : fesm5 as esm5
Compiling @angular/core/testing : esm2015 as esm2015
Compiling @angular/core/testing : esm5 as esm5
Compiling @angular/core/testing : main as umd
Compiling @angular/platform-browser-dynamic : fesm5 as esm5
Compiling @angular/platform-browser-dynamic : esm2015 as esm2015
Compiling @angular/platform-browser-dynamic : main as umd
Compiling @angular/platform-browser-dynamic : esm5 as esm5
Compiling @angular/platform-browser/testing : fesm5 as esm5
Compiling @angular/platform-browser/testing : esm5 as esm5
Compiling @angular/platform-browser/testing : esm2015 as esm2015
Compiling @angular/platform-browser/testing : main as umd
Compiling @angular/compiler/testing : fesm5 as esm5
Compiling @angular/compiler/testing : esm2015 as esm2015
Compiling @angular/compiler/testing : main as umd
Compiling @angular/compiler/testing : esm5 as esm5
Compiling @angular/platform-browser-dynamic/testing : fesm5 as esm5
Compiling @angular/platform-browser-dynamic/testing : esm2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : fesm2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : esm5 as esm5
Compiling @angular/platform-browser-dynamic/testing : main as umd
Compiling @angular/common/testing : fesm5 as esm5
Compiling @angular/common/testing : esm2015 as esm2015
Compiling @angular/common/testing : esm5 as esm5
Compiling @angular/common/testing : main as umd
Compiling @angular/router : fesm5 as esm5
Compiling @angular/router : esm5 as esm5
Compiling @angular/router : esm2015 as esm2015
Compiling @angular/router : main as umd
Compiling @angular/router/testing : fesm5 as esm5
Compiling @angular/router/testing : fesm2015 as esm2015
Compiling @angular/router/testing : esm2015 as esm2015
Compiling @angular/router/testing : esm5 as esm5
Compiling @angular/router/testing : main as umd
npm WARN angular-instantsearch@3.0.0-beta.5 requires a peer of @angular/common@>=5.0.0 <9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-instantsearch@3.0.0-beta.5 requires a peer of @angular/core@>=5.0.0 <9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-instantsearch@3.0.0-beta.5 requires a peer of @angular/platform-browser@>=5.0.0 <9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-instantsearch@3.0.0-beta.5 requires a peer of @angular/platform-browser-dynamic@>=5.0.0 <9.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN angular-instantsearch@3.0.0-beta.5 requires a peer of instantsearch.js@^3.5.4 but none is installed. You must install peer dependencies yourself.

added 378 packages from 117 contributors, removed 174 packages, updated 1132 packages and audited 1512 packages in 319.071s

37 packages are looking for funding
  run `npm fund` for details

found 276 vulnerabilities (269 low, 7 high)
  run `npm audit fix` to fix them, or `npm audit` for details

which does not have the error, as well as the app running perfectly fine

Haroenv commented 3 years ago

are you using angular-instantsearch v3 or v2?

MiguelAngelGarciaGomez commented 2 years ago

I have tried with Angular 13 and it seems to work. I've tried:

npx @angular/cli@13.0.0 new project
cd project
npm i --save angular-instantsearch@latest
npx ngcc

Ant result is:

Warning: Entry point 'angular-instantsearch' contains deep imports into '/private/tmp/project/node_modules/instantsearch.js/es/connectors', '/private/tmp/project/node_modules/instantsearch.js/es/widgets/index/index', '/private/tmp/project/node_modules/querystring-es3/encode', '/private/tmp/project/node_modules/instantsearch.js/es/types', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/breadcrumb/connectBreadcrumb', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/clear-refinements/connectClearRefinements', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/configure-related-items/connectConfigureRelatedItems', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/configure/connectConfigure', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/current-refinements/connectCurrentRefinements', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/hierarchical-menu/connectHierarchicalMenu', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/hits-per-page/connectHitsPerPage', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/hits/connectHits', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/infinite-hits/connectInfiniteHits', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/menu/connectMenu', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/numeric-menu/connectNumericMenu', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/pagination/connectPagination', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/query-rules/connectQueryRules', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/range/connectRange', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/rating-menu/connectRatingMenu', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/refinement-list/connectRefinementList', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/search-box/connectSearchBox', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/sort-by/connectSortBy', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/stats/connectStats', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/toggle-refinement/connectToggleRefinement', '/private/tmp/project/node_modules/instantsearch.js/es/connectors/voice-search/connectVoiceSearch'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

Can this warning cause some problems? I have an Angular 13 application, with this dependency, and it's throwing a JIT compiler unavailableerror that I'm not sure whether is related to this warning.

Haroenv commented 2 years ago

@MiguelAngelGarciaGomez, these warnings can only cause a slightly less efficient bundle if not all code of that module is used. In this case that doesn't make a difference, as the whole source code of the module is used.

JIT Compiler Unavailable is most definitely an error caused by something else in your environment

MiguelAngelGarciaGomez commented 2 years ago

Thanks a lot for your quick reply @Haroenv :)

I've also mentioned the JIT Compiler error because when I generate the build with Webpack this warning is also thronw:

Processing legacy "View Engine" libraries:
- angular-instantsearch [es2015/esm2015] (git+https://github.com/algolia/angular-instantsearch.git)
Encourage the library authors to publish an Ivy distribution.

And again, I'm not sure whether this also can be related to the JIT problem. Sorry if it's not the cause.

Haroenv commented 2 years ago

I don't think that's related either, sorry

MiguelAngelGarciaGomez commented 2 years ago

Thanks again @Haroenv. And about the suggestion of publishing and Ivy, should I open a request feature for this?

Haroenv commented 2 years ago

You can open a feature request. For the moment we have evaluated not to do that yet because it would mean cutting compatibility with Angular <12, which represents a significant portion of our users.

RyannGalea commented 2 years ago

You can open a feature request. For the moment we have evaluated not to do that yet because it would mean cutting compatibility with Angular <12, which represents a significant portion of our users.

Do you think this will be looked into again?

[watch:angular] Processing legacy "View Engine" libraries:
[watch:angular] - angular-instantsearch [es2015/esm2015] (https://github.com/algolia/angular-instantsearch.git)
[watch:angular] Encourage the library authors to publish an Ivy distribution.