Vite.js error: `Could not resolve "rc-util/es/hooks/useMobile"`

I have created a react.js app using vite.js. When I try to run the app in development mode it returns the following error:

X [ERROR] Could not resolve "rc-util/es/hooks/useMobile"

    node_modules/rc-input-number/es/StepHandler.js:6:22:
      6 │ import useMobile from "rc-util/es/hooks/useMobile";
        ╵                       ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "rc-util/es/hooks/useMobile" as external to exclude it from the bundle,
  which will remove this error.

E:\Web Development\Projects\talk-motion-react\node_modules\esbuild\lib\main.js:1566
  let error = new Error(`${text}${summary}`);
              ^

Error: Build failed with 1 error:
node_modules/rc-input-number/es/StepHandler.js:6:22: ERROR: Could not resolve "rc-util/es/hooks/useMobile"
    at failureErrorWithLog (E:\Web Development\Projects\talk-motion-react\node_modules\esbuild\lib\main.js:1566:15)
    at E:\Web Development\Projects\talk-motion-react\node_modules\esbuild\lib\main.js:1024:28
    at runOnEndCallbacks (E:\Web Development\Projects\talk-motion-react\node_modules\esbuild\lib\main.js:1438:61)
    at buildResponseToResult (E:\Web Development\Projects\talk-motion-react\node_modules\esbuild\lib\main.js:1022:7)
    at E:\Web Development\Projects\talk-motion-react\node_modules\esbuild\lib\main.js:1134:14
    at responseCallbacks.<computed> (E:\Web Development\Projects\talk-motion-react\node_modules\esbuild\lib\main.js:671:9)
    at handleIncomingPacket (E:\Web Development\Projects\talk-motion-react\node_modules\esbuild\lib\main.js:726:9)
    at Socket.readFromStdout (E:\Web Development\Projects\talk-motion-react\node_modules\esbuild\lib\main.js:647:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
    at readableAddChunk (node:internal/streams/readable:297:9)
    at Readable.push (node:internal/streams/readable:234:10)
    at Pipe.onStreamRead (node:internal/stream_base_commons:190:23) {
  errors: [
    {
      detail: undefined,
      id: '',
      location: {
        column: 22,
        file: 'node_modules/rc-input-number/es/StepHandler.js',
        length: 28,
        line: 6,
        lineText: 'import useMobile from "rc-util/es/hooks/useMobile";',
        namespace: '',
        suggestion: ''
      },
      notes: [
        {
          location: null,
          text: 'You can mark the path "rc-util/es/hooks/useMobile" as external to exclude it from the bundle, which will remove this error.'
        }
      ],
      pluginName: '',
      text: 'Could not resolve "rc-util/es/hooks/useMobile"'
    }
  ],
  warnings: []
}

Node.js v18.12.1

Here is the package.json file:

{
  "name": "app-name",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@ant-design/icons": "^4.8.0",
    "@mediapipe/camera_utils": "^0.3.1640029074",
    "@reduxjs/toolkit": "^1.9.0",
    "@stripe/react-stripe-js": "^1.16.4",
    "@stripe/stripe-js": "^1.46.0",
    "antd": "^5.0.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.7.1",
    "react-redux": "^8.0.5",
    "react-router-dom": "^6.4.3",
    "react-webcam": "^7.0.1"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.19.6",
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
    "eslint": "^8.29.0",
    "eslint-plugin-react": "^7.31.11",
    "vite": "3.2.3"
  }
}

and here is the vite.config.js file:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return id
              .toString()
              .split("node_modules/")[1]
              .split("/")[0]
              .toString();
          }
        },
      },
    },
  },
});

The app was working fine until I added the stripe packages i.e. @stripe/react-stripe-js and @stripe/stripe-js.

I tried to add the module in external in vite.config.js file as recommended in the error, but it doesn't seem to work.

I can provide more code if required.

Via Active questions tagged javascript - Stack Overflow https://ift.tt/bGF9N6T