Module not found: Error: Can't resolve crypto

[marlowl]

Problem
Using react-scripts v5 in combination with the latest package version of @govtechsg/open-attestation results in the following error:

Compiled with problems:

ERROR in ./node_modules/@govtechsg/open-attestation/dist/index.umd.js 2:289-306

Module not found: Error: Can't resolve 'crypto' in '/home/user/Desktop/test/my-app/node_modules/@govtechsg/open-attestation/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 }

Reproduction steps

• npx create-react-app my-app
• cd my-app
• npm i @govtechsg/open-attestation
• Modify App.js to the following:

import logo from "./logo.svg";
import "./App.css";
import { wrapDocuments } from "@govtechsg/open-attestation";

function App() {
  const document = {
    id: "SERIAL_NUMBER_123",
    $template: {
      name: "CUSTOM_TEMPLATE",
      type: "EMBEDDED_RENDERER",
      url: "https://localhost:3000/renderer",
    },
    issuers: [
      {
        name: "DEMO STORE",
        tokenRegistry: "0x9178F546D3FF57D7A6352bD61B80cCCD46199C2d",
        identityProof: {
          type: "DNS-TXT",
          location: "tradetrust.io",
        },
      },
    ],
    recipient: {
      name: "Recipient Name",
    },
    unknownKey: "unknownValue",
    attachments: [
      {
        filename: "sample.pdf",
        type: "application/pdf",
        data: "BASE64_ENCODED_FILE",
      },
    ],
  };

  const wrappedDocuments = wrapDocuments([
    document,
    { ...document, id: "different id" },
  ]);
  console.log(wrappedDocuments);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Temporary solution
Downgrading to react-scripts v4 fixes the issue (although this is not ideal)

Possible solution
Follow the given steps provided by react-scripts v5

[cavacado]

thanks for opening this issue. Yea, due to breaking changes by webpack, they expect the developer to polyfill the node modules required instead of providing them out of the box.

theres a similar PR done by @simboonlong on upgrading to react-scripts v5 here:
TradeTrust/document-creator-website#244

you could take a look and reference it, but essentially we are depending on react-app-rewired to make some extensions to the underlying webpack config, in particular this is the file with the polyfills required.

[marlowl]

@cavacado @simboonlong Since this error is coming out of the @govtechsg/open-attesation package itself, are there plans to update this package to support react-scripts 5 as well? Could imagine the same issue can pop-up for other @govtechsg/open-attesation implementers.

[cavacado]

we could look into supporting react-scripts 5 in the future but for now, I dont think we have such plans. Feel free to open an issue about it and reference this issue.

Thanks once again for the heads up.