Uncaught ReferenceError: Buffer is not defined

[tonisives]

I have not been able to resolve dependency issues for terra.js

my code

const terra = new LCDClient({
  URL: "https://lcd.terra.dev",
  chainID: "columbus-5",
})

console error

PublicKey.ts:12 
        
    Uncaught ReferenceError: Buffer is not defined
    at Object../node_modules/@terra-money/terra.js/dist/core/PublicKey.js (PublicKey.ts:12:1)
    at Object.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Object../node_modules/@terra-money/terra.js/dist/core/staking/Validator.js (Validator.ts:4:1)
    at Object.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:61:1)
    at Object../node_modules/@terra-money/terra.js/dist/core/staking/msgs/MsgCreateValidator.js (MsgCreateValidator.ts:5:1)
    at Object.options.factory (react refresh:6:1)

After adding buffer, streams and more packages, there will be a different error.

These are my packages

    "@aws-sdk/client-dynamodb": "^3.48.0",
    "@emotion/react": "^11.7.1",
    "@emotion/styled": "^11.6.0",
    "@material-ui/core": "^4.12.3",
    "@mui/icons-material": "^5.3.1",
    "@mui/material": "^5.3.1",
    "@terra-money/terra.js": "^3.0.6",
    "@terra-money/wallet-provider": "^3.7.1",
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.4.0",
    "@types/node": "^16.11.19",
    "@types/react": "^17.0.38",
    "@types/react-dom": "^17.0.11",
    "gh-pages": "^3.2.3",
    "highcharts": "^9.3.2",
    "highcharts-react-official": "^3.1.0",
    "moment": "^2.29.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "react-use": "^17.3.2",
    "typescript": "^4.5.4",
    "util": "^0.12.4",
    "web-vitals": "^2.1.3"

[tonisives]

The problem is "react-scripts": "5.0.0",. If i downgrade it to 4.0.3 terra.js starts working.

However because react-script bundles eslint, I need to also remove eslint 8.8.0 from my dependencies and use the lower version from react-scripts 4.0.4. This results in many warnings in my app:

warning " > [email protected]" has unmet peer dependency "eslint@>=7.0.0".
warning " > [email protected]" has unmet peer dependency "eslint@>=7.28.0".

Is there a way to get terra.js working with react-scripts 5.0.0?

Here is a StackOverflow question about a similar issue.

[tonisives]

Resolution for react-scripts 5:

add

    "buffer": "^6.0.3",
    "process": "^0.11.10",
    "stream-browserify": "^3.0.0",

    "react-app-rewired": "^2.1.11" --dev

add config-overrides.js with

webpack = require("webpack")

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  config.resolve.fallback = {
    ...config.resolve.fallback,
    stream: require.resolve("stream-browserify"),
    buffer: require.resolve("buffer"),
  }
  config.resolve.extensions = [...config.resolve.extensions, ".ts", ".js"]
  config.plugins = [
    ...config.plugins,
    new webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
    }),
    new webpack.ProvidePlugin({
      process: "process/browser",
    }),
  ]
  console.log(config.resolve)
  console.log(config.plugins)

  return config
}

stackoverflow

[tonisives]

There is another problem. If I use any of the code in a jest test, the test will fail with

  ● Test suite failed to run

    Crypto module not found

      at node_modules/jscrypto/SHA256.js:1:5955
      at Object.9054 (node_modules/jscrypto/SHA256.js:1:6216)
      at r (node_modules/jscrypto/SHA256.js:1:6317)
      at Object.3354 (node_modules/jscrypto/SHA256.js:1:484)
      at r (node_modules/jscrypto/SHA256.js:1:6317)
      at Object.7211 (node_modules/jscrypto/SHA256.js:1:2268)

I don't know how to resolve this problem for jest.

I only use

 const { connect, disconnect } = useWallet()

and the test fails.

here is a sample failing project.

[0xJacobV]

There is another problem. If I use any of the code in a jest test, the test will fail with

  ● Test suite failed to run

    Crypto module not found

      at node_modules/jscrypto/SHA256.js:1:5955
      at Object.9054 (node_modules/jscrypto/SHA256.js:1:6216)
      at r (node_modules/jscrypto/SHA256.js:1:6317)
      at Object.3354 (node_modules/jscrypto/SHA256.js:1:484)
      at r (node_modules/jscrypto/SHA256.js:1:6317)
      at Object.7211 (node_modules/jscrypto/SHA256.js:1:2268)

I don't know how to resolve this problem for jest.

I only use

 const { connect, disconnect } = useWallet()

and the test fails.

here is a sample failing project.

I'm having the same issue

[Vritra4]

#100 would be helpful.

[tonisives]

#100 would be helpful.

This works. Therefore the solution is to

yarn add @peculiar/webcrypto -d

And then add to setupTests.ts

import { Crypto } from "@peculiar/webcrypto"
global.crypto = new Crypto()

But generally I wouldn't expect this kind of fixing when using a library like terra.js.

[eldorado-Coder]

Not working for me in react-scripts v5

[eldorado-Coder]

Resolution for react-scripts 5:

add

    "buffer": "^6.0.3",
    "process": "^0.11.10",
    "stream-browserify": "^3.0.0",

    "react-app-rewired": "^2.1.11" --dev

add config-overrides.js with

webpack = require("webpack")

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  config.resolve.fallback = {
    ...config.resolve.fallback,
    stream: require.resolve("stream-browserify"),
    buffer: require.resolve("buffer"),
  }
  config.resolve.extensions = [...config.resolve.extensions, ".ts", ".js"]
  config.plugins = [
    ...config.plugins,
    new webpack.ProvidePlugin({
      Buffer: ["buffer", "Buffer"],
    }),
    new webpack.ProvidePlugin({
      process: "process/browser",
    }),
  ]
  console.log(config.resolve)
  console.log(config.plugins)

  return config
}

stackoverflow

?