@zxcvbn-ts/matcher-pwned crypto error

[md-emran-hossain]

I'm getting this error on my terminal

Module not found: Error: Can't resolve 'crypto' in 'myFilePath/node_modules/@zxcvbn-ts/matcher-pwned/dist'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
    - install 'crypto-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "crypto": false }

webpack compiled with 1 error

Here is my implementation

import logo from "./logo.svg";
import "./App.css";
import { useState, useEffect, useDeferredValue } from "react";
import { debounce, zxcvbnOptions, zxcvbnAsync } from "@zxcvbn-ts/core";
import * as zxcvbnCommonPackage from "@zxcvbn-ts/language-common";
import * as zxcvbnEnPackage from "@zxcvbn-ts/language-en";
import { matcherPwnedFactory } from "@zxcvbn-ts/matcher-pwned";

// optional
const matcherPwned = matcherPwnedFactory(fetch, zxcvbnOptions);
zxcvbnOptions.addMatcher("pwned", matcherPwned);

function App() {
    const [password, setPassword] = useState("");
    const [result, setResult] = useState({});
    const deferredPassword = useDeferredValue(password);

    const options = {
      dictionary: {
        ...zxcvbnCommonPackage.dictionary,
        ...zxcvbnEnPackage.dictionary
      },
      graphs: zxcvbnCommonPackage.adjacencyGraphs,
      useLevenshteinDistance: true,
      translations: zxcvbnEnPackage.translations
    };
    zxcvbnOptions.setOptions(options);

    useEffect(() => {
      debounce(
        zxcvbnAsync(deferredPassword).then(response => setResult(response)),
        500
      );
    }, [deferredPassword]);

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <div>
            <label>
              Password
              <br />
              <input
                value={password}
                    type="text"
                onChange={e => {
                  setPassword(e.target.value);
                }}
            />
            </label>
            {result && <div>The password score is {result.score}/4</div>}
          </div>
        </header>
      </div>
    );
}

export default App;

node 18.16.0 react 18.2.0 react-scripts 5.0.1 I don't want to use react-script-rewind package and overwrite webpack.config.js or change jsconfig.json or tsconfig.json. Also, I can't downgrade react-script. Because it's not possible to change my project structure for this package. I have applied

"browser": {
  "crypto": false
}

this on package.json but it not solving my problem. So, what can I do to raid of this error?

[MrWook]

Hey, thanks for the report. I will try to add this somehow to the library. Maybe this will give webpack the hint to stop using the node library

[md-emran-hossain]

Thank you @MrWook for resolving the problem and I want to inform you this package hasn't updated yet in npm. So, how do I get this update?

[MrWook]

I didn't have the time to push it to npm and test everything. I will inform you in this issue once i pushed it to npm. The github issues is automatically resolved after an PR is merged

[md-emran-hossain]

got it. thanks.

[MrWook]

@md-emran-hossain it's published with version 3.0.3

[md-emran-hossain]

Thanks @MrWook for solving this problem so fast & your amazing support.