Error at deploy a react project on vercel - reactjs

I am receiving an error when i try to deploy using vercel, i created the app with vite
this is what i get:
vite v3.0.2 building for production...
transforming...
✓ 42 modules transformed.
[vite]: Rollup failed to resolve import "swiper/react" from "src/components/Slider.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`
error during build:
Error: [vite]: Rollup failed to resolve import "swiper/react" from "src/components/Slider.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 onRollupWarning (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-1513d487.js:43558:19)
at onwarn (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-1513d487.js:43349:13)
at Object.onwarn (file:///vercel/path0/node_modules/rollup/dist/es/shared/rollup.js:23177:13)
at ModuleLoader.handleResolveId (file:///vercel/path0/node_modules/rollup/dist/es/shared/rollup.js:22334:26)
at file:///vercel/path0/node_modules/rollup/dist/es/shared/rollup.js:22295:26
at processTicksAndRejections (node:internal/process/task_queues:96:5)
Error: Command "npm run build" exited with 1```
Any suggestion on how to solve it?

Related

plugin-transform-spread error while building react app in jenkins

I get this error when trying to build the react js project in docker. Jenkins is showing build as failed, and this is the error that I am getting-
[Docker] INFO: [2/4] Fetching packages... [Docker] INFO: [91merror An unexpected error occurred: "https://registry.yarnpkg.com/#babel/plugin-transform-spread/-/plugin-transform-spread-7.16.7.tgz: Request failed \"404 Not Found\"".
I haven't installed any package as plugin-transform-spread. What is babel plugin-transform-spread ?
Fixed it. Simply installed the module that jenkins showed as error.
In this case:
yarn add #babel/plugin-transform-spread --dev

How to get verbose log from react-scripts build script?

I upgraded to the react-scripts v5 and my build fails with an unuseful message:
Creating an optimized production build...
Failed to compile.
Module not found: Error: Can't resolve '...' in '/project/src'
As you can see it only tells me that there was a problem in the src directory, which is literally the entire project.
How can I increase verbosity of this script?
Do you have the index.js file inside project/src? Does it have import from ... (or /project/index.js)?

Error deploying vite + react application to Heroku

I'm trying to deploy my app to Heroku.
When I run npm build on my machine, it works.
But when Heroku runs npm build, it cannot transform a module in my app.
The build log gives the following:
Build
Running build
> taleme#1.0.0 build
> vite build
vite v2.7.10 building for production...
transforming...
✓ 32 modules transformed.
Could not resolve './taleme/LocalMultiplayer' from src/Game.tsx
error during build:
Error: Could not resolve './taleme/LocalMultiplayer' from src/Game.tsx
at error (/tmp/build_fa45ef37/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:158:30)
at ModuleLoader.handleResolveId (/tmp/build_fa45ef37/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:22384:24)
at /tmp/build_fa45ef37/node_modules/vite/node_modules/rollup/dist/shared/rollup.js:22363:26
at processTicksAndRejections (node:internal/process/task_queues:96:5)
[!] Error: unfinished hook action(s) on exit:
(vite:css) transform "/tmp/build_fa45ef37/src/index.css"
(vite:load-fallback) load "/tmp/build_fa45ef37/src/taleme/LobbyView.tsx"
When I try to temporarily remove this import, a different module imported somewhere else pops in with this error.
I've got no clue as to why vite cannot perform the transform on Heroku.
Any help would be greatly appreciated!
Turns out it was a bug in windicss,
fixed in v3.4.3.

yarn ios throws missing metro-config package error When running yarn ios the following error is shown

When running yarn ios the following error is shown
Missing package "metro-config" in the project. This usually means react-native is not installed. Please verify that dependencies in package.json include "react-native" and run yarn or npm install.
Error: Missing package "metro-config" in the project. This usually means react-native is not installed. Please verify that dependencies in package.json include "react-native" and run yarn or npm install.
at importMetroConfigFromProject (/usr/local/lib/node_modules/expo-cli/node_modules/#expo/metro-config/src/ExpoMetroConfig.ts:244:11)
at getDefaultConfig (/usr/local/lib/node_modules/expo-cli/node_modules/#expo/metro-config/src/ExpoMetroConfig.ts:70:23)
at Object.loadAsync (/usr/local/lib/node_modules/expo-cli/node_modules/#expo/metro-config/src/ExpoMetroConfig.ts:230:23)
at runMetroDevServerAsync (/usr/local/lib/node_modules/expo-cli/node_modules/#expo/dev-server/src/MetroDevServer.ts:67:45)
at startDevServerAsync (/usr/local/lib/node_modules/expo-cli/node_modules/xdl/src/start/startDevServerAsync.ts:62:55)
at startAsync (/usr/local/lib/node_modules/expo-cli/node_modules/xdl/src/start/startAsync.ts:74:41)
And after i was able to get the package i ran yarn ios again and i got this error:
metro-config tried to access metro-transform-worker, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
Required package: metro-transform-worker
Required by: metro-config#npm:0.66.2 (via /Users/tolas/uber-eats-clone/.yarn/cache/metro-config-npm-0.66.2-e011950457-9ea7732677.zip/node_modules/metro-config/src/defaults/)
Require stack:
/Users/tolas/uber-eats-clone/.yarn/cache/metro-config-npm-0.66.2-e011950457-9ea7732677.zip/node_modules/metro-config/src/defaults/index.js
/Users/tolas/uber-eats-clone/.yarn/cache/metro-config-npm-0.66.2-e011950457-9ea7732677.zip/node_modules/metro-config/src/index.js
/usr/local/lib/node_modules/expo-cli/node_modules/#expo/metro-config/build/ExpoMetroConfig.js
/usr/local/lib/node_modules/expo-cli/build/exp.js
/usr/local/lib/node_modules/expo-cli/bin/expo.js
Error: metro-config tried to access metro-transform-worker, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.
Required package: metro-transform-worker
Required by: metro-config#npm:0.66.2 (via /Users/tolas/uber-eats-clone/.yarn/cache/metro-config-npm-0.66.2-e011950457-9ea7732677.zip/node_modules/metro-config/src/defaults/)
Require stack:
/Users/tolas/uber-eats-clone/.yarn/cache/metro-config-npm-0.66.2-e011950457-9ea7732677.zip/node_modules/metro-config/src/defaults/index.js
/Users/tolas/uber-eats-clone/.yarn/cache/metro-config-npm-0.66.2-e011950457-9ea7732677.zip/node_modules/metro-config/src/index.js
/usr/local/lib/node_modules/expo-cli/node_modules/#expo/metro-config/build/ExpoMetroConfig.js
/usr/local/lib/node_modules/expo-cli/build/exp.js
/usr/local/lib/node_modules/expo-cli/bin/expo.js
at Function.external_module_.Module._resolveFilename (/Users/tolas/uber-eats-clone/.pnp.cjs:22011:55)
at Function.resolve (internal/modules/cjs/helpers.js:98:19)
at AsyncFunction.getDefaultValues (/Users/tolas/uber-eats-clone/.yarn/cache/metro-config-npm-0.66.2-e011950457-9ea7732677.zip/node_modules/metro-config/src/defaults/index.js:140:28)
at getDefaultConfig (/usr/local/lib/node_modules/expo-cli/node_modules/#expo/metro-config/src/ExpoMetroConfig.ts:163:36)
at Object.loadAsync (/usr/local/lib/node_modules/expo-cli/node_modules/#expo/metro-config/src/ExpoMetroConfig.ts:230:23)
at runMetroDevServerAsync (/usr/local/lib/node_modules/expo-cli/node_modules/#expo/dev-server/src/MetroDevServer.ts:67:45)
at startDevServerAsync (/usr/local/lib/node_modules/expo-cli/node_modules/xdl/src/start/startDevServerAsync.ts:62:55)
at startAsync (/usr/local/lib/node_modules/expo-cli/node_modules/xdl/src/start/startAsync.ts:74:41)

Failed to minify the bundle. Error: static/js/main.1f26fd13.chunk.js from Terser

Created a new react app and tried building a production version using the "npm run build" command and it is giving the following error :
"Failed to minify the bundle. Error: static/js/main.1f26fd13.chunk.js from Terser
TypeError: Cannot read property 'minify' of undefined
at compiler.run. " .
Try
npm install terser#3.14.1 --save-dev
Github Discussion Link

Resources