[SOLVED] Im facing issues installing moralis in my app regarding webpacks

Moralis General
#1

When I install moralis In a new project I got this thing
Compiled with problems:X

ERROR in ./node_modules/react-moralis/lib/index.esm.js 4:0-30

Module not found: Error: Can’t resolve ‘http’ in ‘/home/baibars313/Downloads/golden_sea/golden_sea/node_modules/react-moralis/lib’

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: { “http”: require.resolve(“stream-http”) }’
- install ‘stream-http’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “http”: false }

ERROR in ./node_modules/react-moralis/lib/index.esm.js 5:0-31

Module not found: Error: Can’t resolve ‘https’ in ‘/home/baibars313/Downloads/golden_sea/golden_sea/node_modules/react-moralis/lib’

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: { “https”: require.resolve(“https-browserify”) }’
- install ‘https-browserify’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “https”: false }

ERROR in ./node_modules/react-moralis/lib/index.esm.js 6:0-29

Module not found: Error: Can’t resolve ‘url’ in ‘/home/baibars313/Downloads/golden_sea/golden_sea/node_modules/react-moralis/lib’

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: { “url”: require.resolve(“url/”) }’
- install ‘url’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “url”: false }

ERROR in ./node_modules/react-moralis/lib/index.esm.js 7:0-32

Module not found: Error: Can’t resolve ‘stream’ in ‘/home/baibars313/Downloads/golden_sea/golden_sea/node_modules/react-moralis/lib’

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: { “stream”: require.resolve(“stream-browserify”) }’
- install ‘stream-browserify’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “stream”: false }

ERROR in ./node_modules/react-moralis/lib/index.esm.js 8:0-32

Module not found: Error: Can’t resolve ‘assert’ in ‘/home/baibars313/Downloads/golden_sea/golden_sea/node_modules/react-moralis/lib’

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: { “assert”: require.resolve(“assert/”) }’
- install ‘assert’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “assert”: false }

ERROR in ./node_modules/react-moralis/lib/index.esm.js 9:0-30

Module not found: Error: Can’t resolve ‘zlib’ in ‘/home/baibars313/Downloads/golden_sea/golden_sea/node_modules/react-moralis/lib’

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: { “zlib”: require.resolve(“browserify-zlib”) }’
- install ‘browserify-zlib’
If you don’t want to include a polyfill, you can use an empty module like this:
resolve.fallback: { “zlib”: false }

#2

Im stuck with it it so plaese try to help asap

#3

You can try to use webpack 4, also make sure that you install Moralis sdk lower than version 2.0

#4

ok I’ll try but in other apps it is working fine with webpack5 as well

#5

can you suggest exact moralis version because moralis version 2.0.3 but react-moralis is 1.2 or something

#6

Don’t try a version of Moralis greater than 2, it has to be lower than 2. For react-moralis you can use 1.4.0

#7

ok I did but still same error Im using 1.3

#8

here is package.json

  "name": "gold_sea",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.10.0",
    "@emotion/styled": "^11.10.0",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.10.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "@walletconnect/web3-provider": "^1.8.0",
    "ethers": "^5.7.0",
    "install": "^0.13.0",
    "moralis": "^1.3.5",
    "npm": "^8.18.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "react-moralis": "^1.4.1",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.5",
    "three": "^0.143.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
#9

Try 1.4.0 here, without that ^

Also try to remove everything before installing again

#10

ok Ive removed and gonaa try this solution if it works than thanks in advance

#11

still not working with webpack 4 or 5

#12

What happens, what doesn’t work?

#13

down grading of webpack with react moralis can do something with boiler plate paste my code there like this what you say

#14

I can put my components in ethereum boiler plate but Material ui always sucks

#15

anybody here


Module not found: Error: Can't resolve 'stream' in '/home/baibars313/Downloads/golden_sea/golden_sea/node_modules/cipher-base'

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: { "stream": require.resolve("stream-browserify") }'
	- install 'stream-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "stream": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 37:11-26

Module not found: Error: Can't resolve 'http' in '/home/baibars313/Downloads/golden_sea/golden_sea/node_modules/xhr2-cookies/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: { "http": require.resolve("stream-http") }'
	- install 'stream-http'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "http": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 39:12-28

Module not found: Error: Can't resolve 'https' in '/home/baibars313/Downloads/golden_sea/golden_sea/node_modules/xhr2-cookies/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: { "https": require.resolve("https-browserify") }'
	- install 'https-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "https": false }


ERROR in ./node_modules/xhr2-cookies/dist/xml-http-request.js 41:9-22

Module not found: Error: Can't resolve 'os' in '/home/baibars313/Downloads/golden_sea/golden_sea/node_modules/xhr2-cookies/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: { "os": require.resolve("os-browserify/browser") }'
	- install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
	resolve.fallback: { "os": false }
#16

Did you fix this somehow?

#17

yeah tis was helpfull but we also need to delete node_modules and old lock file


this article was helpfull I think you should put some article on it
As per Web3 documentation:

If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.

Solution:

Install react-app-rewired and the missing modules

If you are using yarn:

yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

If you are using npm:

npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process

Create config-overrides.js in the root of your project folder with the content:

const webpack = require('webpack');

module.exports = function override(config) {
    const fallback = config.resolve.fallback || {};
    Object.assign(fallback, {
        "crypto": require.resolve("crypto-browserify"),
        "stream": require.resolve("stream-browserify"),
        "assert": require.resolve("assert"),
        "http": require.resolve("stream-http"),
        "https": require.resolve("https-browserify"),
        "os": require.resolve("os-browserify"),
        "url": require.resolve("url")
    })
    config.resolve.fallback = fallback;
    config.plugins = (config.plugins || []).concat([
        new webpack.ProvidePlugin({
            process: 'process/browser',
            Buffer: ['buffer', 'Buffer']
        })
    ])
    return config;
}

Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired before:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
},

after:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},
1 Like
#18

one Thing else you can also try downgrading react scripts if above mentioned solutions is not working

npm uinstall react-scripts

then
npm i [email protected]
thats the solution

1 Like