Rollup failed to resolve import "react-media-recorder" from "/vercel/path0/src/App.jsx"

Question

I am trying to deploy my react-app by using Vercel but getting the following error message. I did yarn run build before the deployment and didn't get any errors.

error during build:

Error: [vite]: Rollup failed to resolve import "react-media-recorder" from "/vercel/path0/src/App.jsx". This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to build.rollupOptions.external at viteWarn (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep- info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. Error: Command "yarn run build" exited with 1

When I test the app everything works fine on the localhost. Here is my package.json:

{
 "name": "frontend-interview-bot",
 "private": false,
 "version": "0.0.0",
 "type": "module",
 "scripts": {
 "dev": "vite",
 "build": "vite build",
 "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
 "preview": "vite preview"
 },
 "dependencies": {
 "@ant-design/icons": "^5.2.5",
 "antd": "^5.8.4",
 "axios": "^1.5.1",
 "react": "^18.2.0",
 "react-dom": "^18.2.0"
 },
 "devDependencies": {
 "@types/react": "^18.2.15",
 "@types/react-dom": "^18.2.7",
 "@vitejs/plugin-react": "^4.0.3",
 "eslint": "^8.45.0",
 "eslint-plugin-react": "^7.32.2",
 "eslint-plugin-react-hooks": "^4.6.0",
 "eslint-plugin-react-refresh": "^0.4.3",
 "vite": "^4.4.5"
 }
}

• Saeed Hemmati: You should add react-media-recorder in dependencies list. try this command: npm i react-media-recorder

Answer 1

react-media-recorder package needs to be added in your dependencies in package.json and it will be solved.

 "dependencies": {
 "@ant-design/icons": "^5.2.5",
 "antd": "^5.8.4",
 "axios": "^1.5.1",
 "react": "^18.2.0",
 "react-dom": "^18.2.0"
 },

in this along with its version.