Skip to content

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

Description

@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

Activity

  1. kkyusuftk commented on Aug 6, 2025

    @kkyusuftk
    Collaborator

    @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.

  2. jaisaravanan-syn commented on Aug 7, 2025

    @jaisaravanan-syn
    Author

    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]",
                },
              },
            ],
          },
        ],
      },
    };
    
  3. jaisaravanan-syn commented on Aug 11, 2025

    @jaisaravanan-syn
    Author

    @kkyusuftk, Any update on this.

  4. kkyusuftk commented on Aug 11, 2025

    @kkyusuftk
    Collaborator

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

  5. jaisaravanan-syn commented on Aug 12, 2025

    @jaisaravanan-syn
    Author

    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.

  6. kkyusuftk commented on Aug 12, 2025

    @kkyusuftk
    Collaborator

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

  7. kkyusuftk commented on Aug 12, 2025

    @kkyusuftk
    Collaborator

    @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

  8. kkyusuftk commented on Aug 20, 2025

    @kkyusuftk
    Collaborator

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

  9. jaisaravanan-syn commented on Aug 21, 2025

    @jaisaravanan-syn
    Author

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

  10. jaisaravanan-syn commented on Aug 22, 2025

    @jaisaravanan-syn
    Author

    I am facing same issue after ejecting as well @kkyusuftk

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions