Webpack cannot find module "fs"

[DylanGom]

When i try to run test on my hybrid application with ionic. My test fails cause of jsonpath.

This is on chrome

Chrome 63.0.3239 (Mac OS X 10.12.6) ERROR
  Uncaught Error: Cannot find module "fs"
  at webpack:///node_modules/jsonpath/lib/grammar.js:2:0 <- karma-test-shim.js:169477
Chrome 63.0.3239 (Mac OS X 10.12.6) ERROR
  Uncaught Error: Cannot find module "fs"
  at webpack:///node_modules/jsonpath/lib/grammar.js:2:0 <- karma-test-shim.js:169477
Chrome 63.0.3239 (Mac OS X 10.12.6) ERROR
  Uncaught Error: Cannot find module "fs"
  at webpack:///node_modules/jsonpath/lib/grammar.js:2:0 <- karma-test-shim.js:169477
Chrome 63.0.3239 (Mac OS X 10.12.6) ERROR
  Uncaught Error: Cannot find module "fs"
  at webpack:///node_modules/jsonpath/lib/grammar.js:2:0 <- karma-test-shim.js:169477
Chrome 63.0.3239 (Mac OS X 10.12.6): Executed 0 of 0 ERROR (1.513 secs / 0 secs)

This is with Phantom

PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  Error: Cannot find module "fs"
  at webpack:///node_modules/jsonpath/lib/grammar.js:2:0 <- karma-test-shim.js:169477
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  Error: Cannot find module "fs"
  at webpack:///node_modules/jsonpath/lib/grammar.js:2:0 <- karma-test-shim.js:169477
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  Error: Cannot find module "fs"
  at webpack:///node_modules/jsonpath/lib/grammar.js:2:0 <- karma-test-shim.js:169477
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
  Error: Cannot find module "fs"
  at webpack:///node_modules/jsonpath/lib/grammar.js:2:0 <- karma-test-shim.js:169477
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 0 of 0 ERROR (0.882 secs / 0 secs)

A bit higher it gives this error as well

ERROR in ./node_modules/jsonpath/generated/parser.js
Module not found: Error: Can't resolve 'fs' in '/Users/dylangomes/Repos/checklist-ionic/node_modules/jsonpath/generated'
 @ ./node_modules/jsonpath/generated/parser.js 715:17-30
 @ ./node_modules/jsonpath/lib/parser.js
 @ ./node_modules/jsonpath/lib/index.js
 @ ./node_modules/jsonpath/index.js
 @ ./src/shared/checklist-renderer/checklist-renderer.ts
 @ ./src/shared/shared.module.ts
 @ ./src/pages/image-popover/image-popover.module.ts
 @ ./src/app/app.module.ts
 @ ./src/services/databaseService/database.service.spec.ts
 @ ./src \.spec\.ts
 @ ./test-config/karma-test-shim.js

ERROR in ./node_modules/jsonpath/lib/grammar.js
Module not found: Error: Can't resolve 'fs' in '/Users/dylangomes/Repos/checklist-ionic/node_modules/jsonpath/lib'
 @ ./node_modules/jsonpath/lib/grammar.js 2:9-22
 @ ./node_modules/jsonpath/lib/parser.js
 @ ./node_modules/jsonpath/lib/index.js
 @ ./node_modules/jsonpath/index.js
 @ ./src/shared/checklist-renderer/checklist-renderer.ts
 @ ./src/shared/shared.module.ts
 @ ./src/pages/image-popover/image-popover.module.ts
 @ ./src/app/app.module.ts
 @ ./src/services/databaseService/database.service.spec.ts
 @ ./src \.spec\.ts
 @ ./test-config/karma-test-shim.js
webpack: Failed to compile.

[dantman]

Looks like fs.readFileSync is being used to optionally read grammar data. https://github.com/dchester/jsonpath/blob/master/lib/grammar.js

Which of course breaks any attempt to use this outside of node. Even though it doesn't look like this is a required piece of functionality.

[Jephuff]

As a work around for this I changed import jp from 'jsonpath'; to import jp from 'jsonpath/jsonpath.min'; for anything browser bound.

[ffaadd]

Webpack returns a numeric id when require.resolve is called. nodes require.resolve returns a string (the filepath). This breaks line 5 in aesprim.js when Webpack is used.

4 var file = require.resolve('esprima');
5 var source = fs.readFileSync(file, 'utf-8');

file is numeric when webpack is used.