Module not found: Error: Can't resolve 'crypto' in 'node_modules\clevertap-web-sdk'

[jaisaravanan-syn]

I have installed the clevertap-web-sdk with react 18, when I try initilize the Clevertap with account ID, I am getting below error:

Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
(node:7236) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:7236) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled with warnings.

Module not found: Error: Can't resolve 'crypto' in '\node_modules\clevertap-web-sdk'
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 }

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in ./node_modules/clevertap-web-sdk/clevertap.js 372:23-40
Module not found: Error: Can't resolve 'crypto' in '\node_modules\clevertap-web-sdk'

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 }

webpack compiled with 1 warning
Files successfully emitted, waiting for typecheck results...
Issues checking in progress...
Compiling...
Compiled with warnings.

Dependencies package https://www.npmjs.com/package/crypto-js is discountinued, could you anyone help me on this

[kkyusuftk]

@jaisaravanan-syn please check these notes
https://github.com/CleverTap/clevertap-web-sdk/releases/tag/v1.13.0

in the future we will remove this package.

[jaisaravanan-syn]

I have tried it already by updating webpack.config.js, still facing same issue

module.exports = {
  entry: "./src/index.js",
  resolve: {
    fallback: {
      crypto: false,
    },
  },
  module: {
    rules: [
      // ...
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "images/[hash]-[name].[ext]",
            },
          },
        ],
      },
    ],
  },
};

[jaisaravanan-syn]

@kkyusuftk, Any update on this.

[kkyusuftk]

@jaisaravanan-syn can you share the zip of your project ? Will help in debugging and provide solution much faster.

[jaisaravanan-syn]

https://syngenta-my.sharepoint.com/:u:/p/jai_saravanan_b/EY9GtfBzTkdBjNkIB-rVtEMBI0wMrmJyxaEMpy_2gRESNg

As discussed, please find attached the demo React application(React 18) that showcases the integrated with the CleverTap Web SDK. This sample is intended to help you reproduce the issue.

[kkyusuftk]

Thanks @jaisaravanan-syn will get back to you on this! Sorry for the inconvenience!

[kkyusuftk]

@jaisaravanan-syn debugged it. Looks like you have not ejected this web application hence it is not actually referencing the root webpack file
if you are using a create-react-app (which is deprecated) this will not work. You will have to do an eject which will spit out the actual webpack file and then you can edit the webpack file in config/webpack

[kkyusuftk]

@jaisaravanan-syn let me know if you need any help
Will close this issue in another week

[jaisaravanan-syn]

is there only way or do we have any other way. Are you supporting with React 19 with Vite?

[jaisaravanan-syn]

I am facing same issue after ejecting as well @kkyusuftk