Error in angular prod build

[Frederik Rothenberger]

I tried using this library with angular 9.1.11.
The serve:dev works fine, but the prod build fails because the module 'vm' is not present.

ERROR in ./node_modules/jsonpath-plus/dist/index-es.js Module not found: Error: Can't resolve 'vm' in '/Users/froth/Documents/Repositories/medusa/login-ui/node_modules/jsonpath-plus/dist' resolve 'vm' in '/Users/froth/Documents/Repositories/medusa/login-ui/node_modules/jsonpath-plus/dist' Parsed request is a module using description file: /Users/froth/Documents/Repositories/medusa/login-ui/node_modules/jsonpath-plus/package.json (relative path: ./dist) Field 'browser' doesn't contain a valid alias configuration

Is there a way to fix this (e.g. suppress this dependency)?

[Brett Zamir]

I think we'll need a separate builds, one for Node and one for others, to avoid these kind of static analysis problems--I think React Native may have such an issue as well, IIRC.

[Brett Zamir]

I have made a new build of JSONPath which I hope may fix this issue.

Could you see if it works in temporarily setting this in your package.json deps:

"jsonpath-plus": "https://github.com/JSONPath-Plus/JSONPath#builds-node-browser"

...and then running again a local npm install.

If you can test this, I can see about pushing it as a new release.

If that doesn't work (or if you set aliasFields but without browser as below), you may need to set this in your Webpack config: https://webpack.js.org/configuration/resolve/#resolvealiasfields

module.exports = {
  //...
  resolve: {
    aliasFields: ['browser']
  }
};

If that doesn't work, or if you are using mainFields already, you may need to set per https://webpack.js.org/configuration/resolve/#resolvemainfields , ensuring that browser is before any of the other items (or otherwise, the Node build with vm might get preferred, causing your errors):

module.exports = {
  //...
  resolve: {
    mainFields: ['browser', 'module', 'main']
  }
};

If it still doesn't work, I'd probably need to have a minimal reproduction repo prepared with a simple Webpack config that reproduces the problem (I'm not deeply familiar with Webpack, but having a minimal test repo should help).

If it works, please also let us know what, if any, changes you had to make.

Thanks!

[Frederik Rothenberger]

Hi, thanks a lot for this update!

I'm currently on vacation. But I'm happy to test this out, once I'm back.

[Abhishek Arun]

When is this getting fixed? Do we have a date?

[Brett Zamir]

@frothenberger : Are you going to take a look?

@abhishekarun : if you can confirm the PR (#130) is working on Angular, I'm happy to merge.

[Anuj Jain]

@brettz9 I have tested angular app with your changes and still facing the issue.

[Brett Zamir]

@jainanuj0812 : Thank you... Could you give the exact error message (you can leave out the first part of your own paths, but keep the node_modules path)?

[Eduardo Covarrubias]

I was able to build by adding the following to my angular project's package.json

  "browser": {
    "vm": false
  }

[Brett Zamir]

@varubi : If you are speaking about adding that directive against PR #130 (or if you can test your code against that PR), it should really help us going into the future if you might be able to indicate the exact error message you get (including listing the path into node_modules) when you don't include that directive. The PR shouldn't need that directive because the browser build points to a file without trying to load a native vm.

[bgBond]

Any update? I am getting this error also in dev mode (Angular 10)-

[ERROR] ERROR in ./node_modules/jsonpath-plus/dist/index-es.js
[ERROR] Module not found: Error: Can't resolve 'vm' in '..\node_modules\jsonpath-plus\dist'

[toamitc]

Same error in Angular 10 for me as well, any solution for this?
ERROR in ./node_modules/jsonpath-plus/dist/index-es.js
Module not found: Error: Can't resolve 'vm' in '/node_modules/jsonpath-plus/dist'

[Brett Zamir]

@bgBond and @toamitc : Please read the comments above starting at #129 (comment) and continuing on to the end.

[Dimitris Papadi]

To reproduce the problem please follow these steps:

npm install -g @angular/cli
ng new angular-tour-of-heroes
cd .\angular-tour-of-heroes
npm install JSONPath --save-dev`

Then add the following two lines at the top of app.component.ts
import jp from 'JSONPath';
jp.query({}, '');

And then run...
npm start

I hope this helps.

[Brett Zamir]

@papadi please note that our package is jsonpath-plus, not JSONPath! Also, the API is different (see our README). :-)

However, your instructions on how to quickly set up an angular app and reproduce kindly helped me confirm my latest fixes just now are working. Released as v5.0.0. Thanks very much!