TypeError in crypto-js node modules (React and Webpack)

[z2051]

I’m trying to setup my MoralisProvider in my React project. I followed the boilerplate React setup and have my app id and server url configured

const App: FC = () => (
<MoralisProvider 
   appId={config.moralis.appId} 
   serverUrl={config.moralis.serverUrl}>
       <App />
 </MoralisProvider>
);

I am using webpack as well (not en expert with webpack). I got the polyfill errors and fixed those but am now getting this errors in the browser console.

Uncaught TypeError: Cannot read properties of undefined (reading 'WordArray')
    at enc-base64.js:20
    at enc-base64.js:131
    at enc-base64.js:4
    at Object../node_modules/crypto-js/enc-base64.js (enc-base64.js:14)
    at __webpack_require__ (bootstrap:19)
    at aes.js:4
    at Object../node_modules/crypto-js/aes.js (aes.js:14)
    at __webpack_require__ (bootstrap:19)
    at Object../node_modules/moralis/lib/browser/CryptoController.js 
    (CryptoController.js:9)
    at __webpack_require__ (bootstrap:19)

This happens when Moralis is initialized, if I comment the provider the error goes away. I think it’s something with webpack but not sure exactly what the solution is.
Here is my package.json

  "dependencies": {
    "@babel/core": "^7.15.5",
    "@babel/preset-env": "^7.15.6",
    "@babel/preset-react": "^7.14.5",
    "@material-ui/core": "4.12.2",
    "@material-ui/styles": "^4.11.4",
    "@sentry/react": "6.10.0",
    "@sentry/tracing": "6.10.0",
    "@walletconnect/web3-provider": "^1.6.5",
    "babel-loader": "^8.2.2",
    "color": "4.0.0",
    "lodash": "4.17.21",
    "moralis": "^0.0.45",
    "node-polyfill-webpack-plugin": "^1.1.4",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-moralis": "^0.2.3",
    "react-router-dom": "5.2.0"
  },
  "devDependencies": {
    "@types/color": "3.0.2",
    "@types/lodash": "4.14.171",
    "@types/react": "17.0.14",
    "@types/react-dom": "17.0.9",
    "@types/react-router-dom": "5.1.8",
    "@typescript-eslint/eslint-plugin": "4.28.4",
    "@typescript-eslint/parser": "4.28.4",
    "copy-webpack-plugin": "9.0.1",
    "css-loader": "6.2.0",
    "dotenv": "10.0.0",
    "eslint": "7.31.0",
    "eslint-plugin-react": "7.24.0",
    "eslint-plugin-react-hooks": "4.2.0",
    "file-loader": "6.2.0",
    "html-webpack-plugin": "5.3.2",
    "husky": "7.0.1",
    "lint-staged": "11.0.1",
    "prettier": "2.3.2",
    "style-loader": "3.2.1",
    "ts-loader": "9.2.3",
    "tsconfig-paths-webpack-plugin": "3.5.1",
    "typescript": "4.3.5",
    "url-loader": "4.1.1",
    "webpack": "^5.50.0",
    "webpack-cli": "4.7.2",
    "webpack-dev-server": "3.11.2"
  }

dev environment

[Yomoo]

Hi @z2051

Could you share your repo?

[Yomoo]

Does it work correctly if you hadrcode?:

appId="xxx"
serverUrl="xxx">

[z2051]

1m

I tried hardcoding the appId and serverUrl and that didn’t work. I can’t share the repo since I am not the owner and it’s a private repo but if needed can maybe make it public for a little bit for you to look at

[z2051]

Here is my webpack.config.js

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');

const package = require('./package.json');
const srcPath = path.resolve(__dirname, 'src');
const distPath = path.resolve(__dirname, 'dist');

module.exports = (env = {}) => {
  const envFile = env.ENVFILE ? env.ENVFILE : '.env';
  require('dotenv').config({
    path: path.resolve(process.cwd(), envFile),
  });
  return {
    entry: {
      app: `${srcPath}/index.tsx`,
    },
    output: {
      path: distPath,
      filename: '[name]-[fullhash:8].js',
      publicPath: '/',
    },
    resolve: {
      extensions: ['.js', '.ts', '.tsx'],
      symlinks: false,
      cacheWithContext: false,
      plugins: [
        new TsconfigPathsPlugin({
          configFile: './tsconfig.paths.json',
        }),
      ],
    },
    module: {
      rules: [
        { test: /\.tsx?$/, use: 'ts-loader', include: srcPath },
        { test: /\.(md)/, use: ['raw-loader', { loader: 'markdown-loader' }], include: srcPath },
        {
          test: /\.(woff|woff2|eot|ttf|svg|png|jpg)/,
          use: [{ loader: 'url-loader', options: { limit: 100000, name: 'assets/[name].[ext]' } }],
          include: srcPath,
        },
        { test: /\.css$/, use: ['style-loader', 'css-loader'], include: srcPath },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
        },
      ],
    },
    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
          react: {
            test: /[\\/]node_modules[\\/](react|react-router-dom)[\\/]/,
            priority: 1,
            name: 'react',
          },
          lodash: {
            test: /[\\/]node_modules[\\/]lodash/,
            priority: 1,
            name: 'lodash',
          },
          material: {
            test: /[\\/]node_modules[\\/]@material-ui/,
            priority: 1,
            name: 'material-ui',
          },
          redux: {
            test: /[\\/]node_modules[\\/]redux/,
            priority: 1,
            name: 'redux',
          },
          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
          },
        },
      },
    },
    plugins: [
      new HtmlWebpackPlugin({
        url: process.env.APP_URL || '',
        title: package.title,
        company: package.company,
        description: package.description,
        keywords: package.keywords,
        filename: 'index.html',
        template: 'src/templates/app.ejs',
        hash: true,
        minify: {
          collapseWhitespace: true,
          removeComments: true,
          minifyJS: true,
        },
      }),
      new CopyWebpackPlugin({
        patterns: [{ from: '*.{png,jpg}', to: 'assets', context: path.resolve(__dirname, 'src/assets') }],
      }),
      new webpack.DefinePlugin({
        APP_VERSION: JSON.stringify(package.version),
        APP_NAME: JSON.stringify(package.name),
        APP_TITLE: JSON.stringify(package.title),
        APP_COMPANY: JSON.stringify(package.company),
        APP_DESCRIPTION: JSON.stringify(package.description),
        APP_ENV: JSON.stringify(process.env.APP_ENV),
        APP_URL: JSON.stringify(process.env.APP_URL || '/'),
        APP_LOG_LEVEL: JSON.stringify(process.env.APP_LOG_LEVEL),
        SENTRY_DSN: JSON.stringify(process.env.SENTRY_DSN),
        REACT_APP_MORALIS_APPLICATION_ID: JSON.stringify(process.env.REACT_APP_MORALIS_APPLICATION_ID),
        REACT_APP_MORALIS_SERVER_URL: JSON.stringify(process.env.REACT_APP_MORALIS_SERVER_URL),
      }),
      new NodePolyfillPlugin(),
    ],
    devServer: {
      host: 'localhost',
      port: process.env.PORT || process.env.APP_PORT || 8080,
      historyApiFallback: true,
      headers: {
        'Access-Control-Allow-Origin': '*',
      },
    },
    cache: {
      type: 'filesystem',
      cacheDirectory: path.resolve(__dirname, '.cache'),
    },
    devtool: 'source-map',
  };
};

[Yomoo]

I can’t test it this way unfortunatelly. I know that Moralis SDK works with webpack correctly.

For me it look like you use a function from Moralis SDK which gets not correct data. WordArray is an attribute of object in your code, right?

[z2051]

WordArray is part of the enc_base64.js file in crypto-js under node/modules

[z2051]

I’m only using the MoralisProvider imported from react-moralis, the dev server still starts but I’m given a blank page with that error in the console

[cryptokid]

What happens if you add crypto-js explicitly in your config for webpack? Maybe it is not properly included now. (I’m not really knowledgeable in using webpack)

[z2051]

 resolve: {
   //..
   fallback: {
        crypto: require.resolve('crypto-browserify'),
        'crypto-js': require.resolve('crypto-js'),
      },

Unfortunately I’m not an expert at webpack myself. I added these to the fallback but no luck

[malik]

You could try reinstalling your node modules, perhaps some things can override and resolve the issue.

[z2051]

Unfortuantely that didn’t work either

[malik]

That’s strange. I’m using Moralis Provider on my react app and it doesn’t show the error.

If you can recreate this issue with only your boilerplate code and share the repo with us, it will be helpful.

[z2051]

Hi Malik

I’m revisiting this issue again, if possible can you guys provide your github usernames and we can give you access to the repo and I can point you to the correct files.