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
Comments
Post a Comment