Module not found: Error: Can't resolve 'http' in FaunaDB JavaScript Driver

Issue

I'm trying to use FaunaDB in an Ionic project, but a problem has arisen that I don't know how to solve.

I simply created a new project and installed the driver:

ionic start --type=angular my-app blank

npm i faunadb

Then, I instantiate FaunaDB.Cliente:

import * as FaunaDB from 'faunadb';

const client = new FaunaDB.Client({
  secret: environment.faunadb.secret,
  keepAlive: false,
});

Works well in development! But when I build for production, using this command:

ionic build --prod

And the following error happens:

ERROR in ../node_modules/faunadb/src/Client.js
Module not found: Error: Can't resolve 'http' in 'D:\Workspace\www\fanstore\workspace\node_modules\faunadb\src'
resolve 'http' in 'D:\Workspace\www\fanstore\workspace\node_modules\faunadb\src'
  Parsed request is a module
  using description file: D:\Workspace\www\fanstore\workspace\node_modules\faunadb\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in D:/Workspace/www/fanstore/workspace/my-app/
        using description file: D:\Workspace\www\fanstore\workspace\my-app\package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: D:\Workspace\www\fanstore\workspace\my-app\package.json (relative path: ./http)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\http doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\http.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\http.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\http.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\http.js doesn't exist
            as directory
              D:\Workspace\www\fanstore\workspace\my-app\http doesn't exist
      D:\Workspace\www\fanstore\workspace\node_modules\faunadb\src\node_modules doesn't exist or is not a directory
      D:\Workspace\www\fanstore\workspace\node_modules\faunadb\node_modules doesn't exist or is not a directory
      D:\Workspace\www\fanstore\workspace\node_modules\node_modules doesn't exist or is not a directory
      D:\Workspace\www\fanstore\node_modules doesn't exist or is not a directory
      D:\Workspace\www\node_modules doesn't exist or is not a directory
      D:\Workspace\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\Workspace\www\fanstore\workspace\node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\http doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\http.ts doesn't exist
        .tsx
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\http.tsx doesn't exist
        .mjs
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\http.mjs doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\http.js doesn't exist
        as directory
          D:\Workspace\www\fanstore\workspace\node_modules\http doesn't exist
[D:\Workspace\www\fanstore\workspace\my-app\http]
[D:\Workspace\www\fanstore\workspace\my-app\http.ts]
[D:\Workspace\www\fanstore\workspace\my-app\http.tsx]
[D:\Workspace\www\fanstore\workspace\my-app\http.mjs]
[D:\Workspace\www\fanstore\workspace\my-app\http.js]
[D:\Workspace\www\fanstore\workspace\node_modules\faunadb\src\node_modules]
[D:\Workspace\www\fanstore\workspace\node_modules\faunadb\node_modules]
[D:\Workspace\www\fanstore\workspace\node_modules\node_modules]
[D:\Workspace\www\fanstore\node_modules]
[D:\Workspace\www\node_modules]
[D:\Workspace\node_modules]
[D:\node_modules]
[D:\Workspace\www\fanstore\workspace\node_modules\package.json]
[D:\Workspace\www\fanstore\workspace\node_modules\http\package.json]
[D:\Workspace\www\fanstore\workspace\node_modules\http]
[D:\Workspace\www\fanstore\workspace\node_modules\http.ts]
[D:\Workspace\www\fanstore\workspace\node_modules\http.tsx]
[D:\Workspace\www\fanstore\workspace\node_modules\http.mjs]
[D:\Workspace\www\fanstore\workspace\node_modules\http.js]
 @ ../node_modules/faunadb/src/Client.js 87:8-23
 @ ../node_modules/faunadb/index.js
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ngfactory.js
 @ ./src/main.ts
 @ multi ./src/main.ts
ERROR in ../node_modules/faunadb/src/Client.js
Module not found: Error: Can't resolve 'https' in 'D:\Workspace\www\fanstore\workspace\node_modules\faunadb\src'
resolve 'https' in 'D:\Workspace\www\fanstore\workspace\node_modules\faunadb\src'
  Parsed request is a module
  using description file: D:\Workspace\www\fanstore\workspace\node_modules\faunadb\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in D:/Workspace/www/fanstore/workspace/my-app/
        using description file: D:\Workspace\www\fanstore\workspace\my-app\package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: D:\Workspace\www\fanstore\workspace\my-app\package.json (relative path: ./https)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\https doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\https.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\https.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\https.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\https.js doesn't exist
            as directory
              D:\Workspace\www\fanstore\workspace\my-app\https doesn't exist
      D:\Workspace\www\fanstore\workspace\node_modules\faunadb\src\node_modules doesn't exist or is not a directory
      D:\Workspace\www\fanstore\workspace\node_modules\faunadb\node_modules doesn't exist or is not a directory
      D:\Workspace\www\fanstore\workspace\node_modules\node_modules doesn't exist or is not a directory
      D:\Workspace\www\fanstore\node_modules doesn't exist or is not a directory
      D:\Workspace\www\node_modules doesn't exist or is not a directory
      D:\Workspace\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\Workspace\www\fanstore\workspace\node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\https doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\https.ts doesn't exist
        .tsx
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\https.tsx doesn't exist
        .mjs
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\https.mjs doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\https.js doesn't exist
        as directory
          D:\Workspace\www\fanstore\workspace\node_modules\https doesn't exist
[D:\Workspace\www\fanstore\workspace\my-app\https]
[D:\Workspace\www\fanstore\workspace\my-app\https.ts]
[D:\Workspace\www\fanstore\workspace\my-app\https.tsx]
[D:\Workspace\www\fanstore\workspace\my-app\https.mjs]
[D:\Workspace\www\fanstore\workspace\my-app\https.js]
[D:\Workspace\www\fanstore\workspace\node_modules\faunadb\src\node_modules]
[D:\Workspace\www\fanstore\workspace\node_modules\faunadb\node_modules]
[D:\Workspace\www\fanstore\workspace\node_modules\node_modules]
[D:\Workspace\www\fanstore\node_modules]
[D:\Workspace\www\node_modules]
[D:\Workspace\node_modules]
[D:\node_modules]
[D:\Workspace\www\fanstore\workspace\node_modules\package.json]
[D:\Workspace\www\fanstore\workspace\node_modules\https\package.json]
[D:\Workspace\www\fanstore\workspace\node_modules\https]
[D:\Workspace\www\fanstore\workspace\node_modules\https.ts]
[D:\Workspace\www\fanstore\workspace\node_modules\https.tsx]
[D:\Workspace\www\fanstore\workspace\node_modules\https.mjs]
[D:\Workspace\www\fanstore\workspace\node_modules\https.js]
 @ ../node_modules/faunadb/src/Client.js 86:8-24
 @ ../node_modules/faunadb/index.js
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ngfactory.js
 @ ./src/main.ts
 @ multi ./src/main.ts
ERROR in ../node_modules/faunadb/src/errors.js
Module not found: Error: Can't resolve 'util' in 'D:\Workspace\www\fanstore\workspace\node_modules\faunadb\src'
resolve 'util' in 'D:\Workspace\www\fanstore\workspace\node_modules\faunadb\src'
  Parsed request is a module
  using description file: D:\Workspace\www\fanstore\workspace\node_modules\faunadb\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in D:/Workspace/www/fanstore/workspace/my-app/
        using description file: D:\Workspace\www\fanstore\workspace\my-app\package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: D:\Workspace\www\fanstore\workspace\my-app\package.json (relative path: ./util)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\util doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\util.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\util.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\util.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\util.js doesn't exist
            as directory
              D:\Workspace\www\fanstore\workspace\my-app\util doesn't exist
      D:\Workspace\www\fanstore\workspace\node_modules\faunadb\src\node_modules doesn't exist or is not a directory
      D:\Workspace\www\fanstore\workspace\node_modules\faunadb\node_modules doesn't exist or is not a directory
      D:\Workspace\www\fanstore\workspace\node_modules\node_modules doesn't exist or is not a directory
      D:\Workspace\www\fanstore\node_modules doesn't exist or is not a directory
      D:\Workspace\www\node_modules doesn't exist or is not a directory
      D:\Workspace\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\Workspace\www\fanstore\workspace\node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\util doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\util.ts doesn't exist
        .tsx
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\util.tsx doesn't exist
        .mjs
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\util.mjs doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\util.js doesn't exist
        as directory
          D:\Workspace\www\fanstore\workspace\node_modules\util doesn't exist
[D:\Workspace\www\fanstore\workspace\my-app\util]
[D:\Workspace\www\fanstore\workspace\my-app\util.ts]
[D:\Workspace\www\fanstore\workspace\my-app\util.tsx]
[D:\Workspace\www\fanstore\workspace\my-app\util.mjs]
[D:\Workspace\www\fanstore\workspace\my-app\util.js]
[D:\Workspace\www\fanstore\workspace\node_modules\faunadb\src\node_modules]
[D:\Workspace\www\fanstore\workspace\node_modules\faunadb\node_modules]
[D:\Workspace\www\fanstore\workspace\node_modules\node_modules]
[D:\Workspace\www\fanstore\node_modules]
[D:\Workspace\www\node_modules]
[D:\Workspace\node_modules]
[D:\node_modules]
[D:\Workspace\www\fanstore\workspace\node_modules\package.json]
[D:\Workspace\www\fanstore\workspace\node_modules\util\package.json]
[D:\Workspace\www\fanstore\workspace\node_modules\util]
[D:\Workspace\www\fanstore\workspace\node_modules\util.ts]
[D:\Workspace\www\fanstore\workspace\node_modules\util.tsx]
[D:\Workspace\www\fanstore\workspace\node_modules\util.mjs]
[D:\Workspace\www\fanstore\workspace\node_modules\util.js]
 @ ../node_modules/faunadb/src/errors.js 3:11-26
 @ ../node_modules/faunadb/index.js
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ngfactory.js
 @ ./src/main.ts
 @ multi ./src/main.ts
ERROR in ../node_modules/faunadb/src/values.js
Module not found: Error: Can't resolve 'util' in 'D:\Workspace\www\fanstore\workspace\node_modules\faunadb\src'
resolve 'util' in 'D:\Workspace\www\fanstore\workspace\node_modules\faunadb\src'
  Parsed request is a module
  using description file: D:\Workspace\www\fanstore\workspace\node_modules\faunadb\package.json (relative path: ./src)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
      looking for modules in D:/Workspace/www/fanstore/workspace/my-app/
        using description file: D:\Workspace\www\fanstore\workspace\my-app\package.json (relative path: .)
          Field 'browser' doesn't contain a valid alias configuration
          using description file: D:\Workspace\www\fanstore\workspace\my-app\package.json (relative path: ./util)
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\util doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\util.ts doesn't exist
            .tsx
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\util.tsx doesn't exist
            .mjs
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\util.mjs doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              D:\Workspace\www\fanstore\workspace\my-app\util.js doesn't exist
            as directory
              D:\Workspace\www\fanstore\workspace\my-app\util doesn't exist
      D:\Workspace\www\fanstore\workspace\node_modules\faunadb\src\node_modules doesn't exist or is not a directory
      D:\Workspace\www\fanstore\workspace\node_modules\faunadb\node_modules doesn't exist or is not a directory
      D:\Workspace\www\fanstore\workspace\node_modules\node_modules doesn't exist or is not a directory
      D:\Workspace\www\fanstore\node_modules doesn't exist or is not a directory
      D:\Workspace\www\node_modules doesn't exist or is not a directory
      D:\Workspace\node_modules doesn't exist or is not a directory
      D:\node_modules doesn't exist or is not a directory
      looking for modules in D:\Workspace\www\fanstore\workspace\node_modules
        No description file found
        Field 'browser' doesn't contain a valid alias configuration
        No description file found
        no extension
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\util doesn't exist
        .ts
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\util.ts doesn't exist
        .tsx
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\util.tsx doesn't exist
        .mjs
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\util.mjs doesn't exist
        .js
          Field 'browser' doesn't contain a valid alias configuration
          D:\Workspace\www\fanstore\workspace\node_modules\util.js doesn't exist
        as directory
          D:\Workspace\www\fanstore\workspace\node_modules\util doesn't exist
[D:\Workspace\www\fanstore\workspace\my-app\util]
[D:\Workspace\www\fanstore\workspace\my-app\util.ts]
[D:\Workspace\www\fanstore\workspace\my-app\util.tsx]
[D:\Workspace\www\fanstore\workspace\my-app\util.mjs]
[D:\Workspace\www\fanstore\workspace\my-app\util.js]
[D:\Workspace\www\fanstore\workspace\node_modules\faunadb\src\node_modules]
[D:\Workspace\www\fanstore\workspace\node_modules\faunadb\node_modules]
[D:\Workspace\www\fanstore\workspace\node_modules\node_modules]
[D:\Workspace\www\fanstore\node_modules]
[D:\Workspace\www\node_modules]
[D:\Workspace\node_modules]
[D:\node_modules]
[D:\Workspace\www\fanstore\workspace\node_modules\package.json]
[D:\Workspace\www\fanstore\workspace\node_modules\util\package.json]
[D:\Workspace\www\fanstore\workspace\node_modules\util]
[D:\Workspace\www\fanstore\workspace\node_modules\util.ts]
[D:\Workspace\www\fanstore\workspace\node_modules\util.tsx]
[D:\Workspace\www\fanstore\workspace\node_modules\util.mjs]
[D:\Workspace\www\fanstore\workspace\node_modules\util.js]
 @ ../node_modules/faunadb/src/values.js 7:11-26
 @ ../node_modules/faunadb/index.js
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ngfactory.js
 @ ./src/main.ts
 @ multi ./src/main.ts
[ERROR] An error occurred while running subprocess ng.

        ng.cmd run app:build:production exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.

Solution

I know nothing about ionic but it looks like you are going to use fauna from client-side, not from the server? In docs, they suggest to include client-side version directly via CDN https://docs.fauna.com/fauna/current/drivers/javascript#browsers maybe it just doesn't work as expected via your bundler. I see it complains "Field 'browser' doesn't contain a valid alias configuration" it means package.json was not configured as bundler expects. Actually there is no such field at all: https://github.com/fauna/faunadb-js/blob/master/package.json So, if ionic allows it, you can download browser build from CDN, put it to the static folder in ionic project (I believe it should be possible) and include this script directly in your main HTML page or find another way how ionic will let you do it.

P.S. and also maybe it's a good idea to raise issue in fauna client repo about package.json not configured properly.

Answered By - Yuri Gor