use-ink/useink

Module not found: Error: Can't resolve 'crypto'

DoubleOTheven opened this issue · 1 comments

Bug Report

Using Create React App:

Failed to compile.

Module not found: Error: Can't resolve 'crypto' in '/Users/samruberti/src/distributink/frontend/node_modules/useink/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 }
ERROR in ./node_modules/useink/dist/chunk-R23VKB7P.mjs 30732:0-32
Module not found: Error: Can't resolve 'crypto' in '/Users/samruberti/src/distributink/frontend/node_modules/useink/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 }

To fix this issue for Webpack inside of Create React App you will need to use CRACO, which gives you access to the webpack.config.js file.

  1. yarn add -D craco crypto-browserify stream-browserify

craco.config.js

module.exports={
  webpack: {
    configure: {
      resolve: {
        fallback: {
          // Webpack 5, used in react-script v5, dropped support for built in node polyfills.
          // CRACO is being used to add these polyfills back into the webpack config until they are not needed.
          crypto: require.resolve("crypto-browserify"),
          stream: require.resolve("stream-browserify"),
        }
      }
    },
  },
};

package.json

{
    "scripts": {
      "build": "craco build",
      "test": "react-scripts test",
      "test": "craco test"
    }
  }