Webpack5 Solution

[tom88norman]

I’m just trying to initialize a project. So I run the usual yarn create react-app my-app --template typescript

Then cd into the project’s main folder

I then want to add Moralis so I do yarn add moralis react-moralis

In index.tsx I import MoralisProvider from react-moralis and wrap my app in it, as I’ve done several times before while following tutorials etc.

The project compiles but with the following warnings:

But I can continue, so I do. I then want to add Web3UIKit to the project so I run yarn add web3uikit

Once I do that, I get a bajillion errors and my localhost browser window looks like this:

Am I missing something? If I remove the MoralisProvider tags, all the errors go away but obviously I want to use Moralis and Web3UiKit.
As you can see from the page behind all the errors, I’ve made no other changes to the project. It’s a blank react project and I’ve outlined all the steps I’ve taken and I feel like I shouldn’t be seeing these errors. Any suggestions would be greatly appreciated!

Here’s the code. The same thing happens whether I fill in the server details or not. And whether I create the project using Typescript or not:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { MoralisProvider } from "react-moralis";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <MoralisProvider serverUrl="xxxxx" appId="xxxxx">
      <App />
    </MoralisProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

[johnversus]

Try changing the react script version to 4.0.3 and run yarn install again.

[tom88norman]

Thanks for the reply. That did…something. I now get a different set of errors

In the terminal:

In the console:

And the localhost page doesn’t update when I make changes and save App.tsx. I’m having to re-load the page every time.

Still, feels like progress. Any thoughts on solving the string_decoder problem?

[alex]

Try installing string_decoder.

Otherwise try setting up another project. I have done one doing: CRA with TypeScript, installing web3uikit, react-moralis, moralis, and switching to react-scripts 4.0.3. Only warning I get is Can't resolve 'magic-sdk'... but everything seems to be working fine with MoralisProvider and using a component from web3uikit.

[eth]

I looked at the create-react-app changelog and anything above 4.0.3 is using webpack5 which doesn’t polyfill with core-js anymore so you would have to rewire it and polyfill yourselves.

1. Make a file called craco.config.js in your root folder
2. Install the packages yarn add craco crypto-browserify https-browserify os-browserify stream-browserify stream-http
3. Add the following to your environment variable or prefix the script directly

SKIP_PREFLIGHT_CHECK=true
GENERATE_SOURCEMAP=false

4. Add to your scripts in package.json

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
},

5. Add the code below to craco.config.js

const webpack = require("webpack");

module.exports = {
  webpack: {
    plugins: {
      add: [
        new webpack.ProvidePlugin({
          Buffer: ["buffer", "Buffer"],
        }),
      ],
    },
    configure: {
      resolve: {
        fallback: {
          crypto: require.resolve("crypto-browserify"),
          stream: require.resolve("stream-browserify"),
          https: require.resolve("https-browserify"),
          os: require.resolve("os-browserify/browser"),
          http: require.resolve("stream-http"),
          buffer: require.resolve("buffer"),
        },
      },
    },
  },
};

6. Run using yarn start

[eth]

Try removing your node_modules and re-install all the dependencies using preferably yarn install

[tom88norman]

Thanks for the reply. I really appreciate you taking the time to write that out. I’m trying to follow the steps but I’m confused by step 3: “Add the following to your environment variable or prefix the script directly…”
I’m still pretty new to all this and I don’t understand the instruction
What is the environment variable? (I’ve tried to google it but only found more confusing answers)

Tbh I’m pretty confused by this whole thing. Is this happening to everyone who tries to create a new react project with Moralis right now? Seems like a version incompatibility. Will it be fixed? Any amount of explanation you can find the energy to provide for frustrated learner would be much appreciated!

[alex]

Environment variable refers to a variable that is loaded into your app’s environment. For local this is commonly done using a .env file in your project’s root directory, so you can add those ones he mentioned.

[ajeetgill]

Sorta - we’re at that phase where a BIG PLAYER (webpack) went from v4 to v5 with some major breaking changes (as in not so backward compatible).
So nowadays - many libraries are conflicting coz some are on v4 while some are on v5…

p.s. I’m also noob so if I’m wrong - kindly someone please correct me.
Also @alex - can you show how to setup the .env & use them (or refer to a link which you think explains it well). As, @tom88norman mentioned - a noob googling this only gets more confusing answers.

[alex]

You can read this.

Create an .env file in project root directory (where package.json is) and then restart your app server if it’s running:

REACT_APP_ENV_NAME=value

In your code to reference:

process.env.REACT_APP_ENV_NAME