Module not found: Error: Cannot resolve module 'fs'

[rowino]

I am using the babel generator boilerplate for a library I am building. I added this library and imported it into my project. Now when I run gulp build I get the following error. Any assistance would be highly appreciated.

stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^
Error: ./~/json-schema-ref-parser/lib/resolvers/file.js
Module not found: Error: Cannot resolve module 'fs' in /home/raphael/work/projects/packages/json-schema-form-generator/node_modules/json-schema-ref-parser/lib/resolvers
resolve module fs in /home/raphael/work/projects/packages/json-schema-form-generator/node_modules/json-schema-ref-parser/lib/resolvers
  looking for modules in /home/raphael/work/projects/packages/json-schema-form-generator/node_modules
    /home/raphael/work/projects/packages/json-schema-form-generator/node_modules/fs doesn't exist (module as directory)
    resolve 'file' fs in /home/raphael/work/projects/packages/json-schema-form-generator/node_modules
      resolve file
        /home/raphael/work/projects/packages/json-schema-form-generator/node_modules/fs doesn't exist
        /home/raphael/work/projects/packages/json-schema-form-generator/node_modules/fs.webpack.js doesn't exist
        /home/raphael/work/projects/packages/json-schema-form-generator/node_modules/fs.web.js doesn't exist
        /home/raphael/work/projects/packages/json-schema-form-generator/node_modules/fs.js doesn't exist
        /home/raphael/work/projects/packages/json-schema-form-generator/node_modules/fs.json doesn't exist
[/home/raphael/work/projects/packages/json-schema-form-generator/node_modules/fs]
[/home/raphael/work/projects/packages/json-schema-form-generator/node_modules/fs]
[/home/raphael/work/projects/packages/json-schema-form-generator/node_modules/fs.webpack.js]
[/home/raphael/work/projects/packages/json-schema-form-generator/node_modules/fs.web.js]
[/home/raphael/work/projects/packages/json-schema-form-generator/node_modules/fs.js]
[/home/raphael/work/projects/packages/json-schema-form-generator/node_modules/fs.json]
 @ ./~/json-schema-ref-parser/lib/resolvers/file.js 2:14-27

[JamesMessinger]

It looks like you're using webpack, and something in your config is causing it to load the Node.js version of JSON Schema Ref Parser rather than the browser version.

[majuric]

I had the same problem. Solved it by adding the alias in webpack so it knows where to find the correct asset.

resolve : { alias: { 'json-schema-parser': __dirname + '/node_modules/json-schema-ref-parser/dist/ref-parser.js' } }

and you use it as you would normally but use the alias key

var parser = require('json-schema-parser')

[JamesMessinger]

Closing this issue, since it's a WebPack config issue. Thanks to @mari0juric for posting a solution, which will help others who are facing this problem. 👍

[iamakulov]

FYI: the latest package on npm doesn’t have the browser field for some reason: https://unpkg.com/[email protected]/package.json. This breaks my webpack build.

Probably bumping the version and re-releasing the package could fix the problem? Or is the field removed during the publish routine (npm run release)?

[iamakulov]

Ah, yeah, it’s not published because the latest release was before #30 was merged.

Is there a chance that these changes will be published?

[JamesMessinger]

I just released v3.2.0, which includes the browser field in the package.json file

[iamakulov]

Thank you!