React vite app shows the error :No loader is configured for ".html" files: ../server/node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html

Question

**React vite web app showing the error ** ✘ [ERROR] No loader is configured for ".html" files: ../server/node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html

../server/node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js:86:21:
  86 │       return require('./' + command)(self, argvx, callback);
     ╵                      ~~~~~~~~~~~~~~

✘ [ERROR] Could not resolve "mock-aws-s3"

../server/node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js:43:28:
  43 │     const AWSMock = require('mock-aws-s3');
     ╵                             ~~~~~~~~~~~~~

You can mark the path "mock-aws-s3" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.

✘ [ERROR] Could not resolve "aws-sdk"

../server/node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js:76:22:
  76 │   const AWS = require('aws-sdk');
     ╵                       ~~~~~~~~~

You can mark the path "aws-sdk" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.

✘ [ERROR] Could not resolve "nock"

../server/node_modules/@mapbox/node-pre-gyp/lib/util/s3_setup.js:112:23:
  112 │   const nock = require('nock');
      ╵                        ~~~~~~

You can mark the path "nock" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle. You can also surround this "require" call with a try/catch block to handle this failure at run-time instead of bundle-time.

These are the errors occured when i run the react vite app

   GET http://localhost:5173/ net::ERR_CONNECTION_REFUSED

*** Installed all related dependencies and packages , still the error persists.**

Answer 1

I had the same error, after installing and importing bcrypt into my Remix app, using Vite. The dependencies that are causing errors for you are listed as devDependencies for @mapbox/node-pre-gyp, but they are (by bad design, probably) included in the call stack for the package.

In this thread, there are multiple people having the same issue, with no response from the authors. Lots of different workarounds there too, I'm leaning towards using the native node:crypto for hashing and salting my passwords, since that is what I was doing with bcrypt.

Also some discussion about replacing bcrypt with node here: Link

Here's a snippet for doing just that:

const {
    scryptSync,
    randomBytes
} = await import('crypto');

if (salted) {
    const hash = scryptSync(password, salted, 64).toString('hex');
    return new HashAndSalt(hash, salted);
} else {
    const salt = randomBytes(32).toString("hex");
    const hash = await scryptSync(password, salt, 64).toString('hex');
    return new HashAndSalt(hash, salt);
}