I switched to vite a while back to increase performance when developing and I have been happy for the most part but I do have some issues that I never had before with webPack.
Every month or so I face an issue where a bug pops up in the vite build that is not present when running vite. When I find the error it is normally obvious what needs to be fixed, but I would like the frontend to throw the same error and break when developing so that it is easier to track down.
When the error is found in the production build its much harder to track down.
These are not build errors, but the frontend breaks only in the production build.
Is there some way I can force Vue3 to behave the same with Vite in both the development runtime and the final build?
Related
I'm debugging a tricky issue that only occurs with a Next.js project when in production/deployed to Vercel. Minification is interfering in my ability to debug the issue since issues are reported as:
Uncaught Error: Minified React error #425; visit
https://reactjs.org/docs/error-decoder.html?invariant=425 for the
full message or use the non-minified dev environment for full
errors and additional helpful warnings.
How can I access the full errors and "additional helpful warnings" in production?
Is it possible for builds to be done in development mode instead? Setting the build command as NODE_ENV=development next build doesn't seem to work, nor does setting the NODE_ENV env variable to development in Vercel
Alternatively, is it possible to disable minification on production builds?
Setting Webpack to optimization: { minimize: false } causes the build to output a log indicating Production code optimization has been disabled in your project, however the above "Minified React error" message still appear.
I have a NextJS app without an integrated api that I want to deploy to Vercel. It works fine when I run it locally yarn run dev and I can also build it yarn run build without any errors. When I deploy it Vercel, however, I receive a 404 Error.
Here is my folder structure:
app/
- components
- pages
- editor
- [id].tsx
...tsx
- public
- utils
- db
api.ts
I am using NextJs 10.0.3.
Here is a link to the deployed app.
I don't have a nextjs config file. My assumption is that the error is caused by the dynamic route but I can't find my mistake. Also, no page is working when the app is deployed as opposed to only the dynamic page.
Do you have pointers on where to look next?
EDIT 1:
Here is a link to the GitHub repo.
EDIT 2:
I found an issue but don't know how to fix it.
This is how my build output looks like on Vercel:
This is how it's supposed to look like on Vercel:
Not sure why the whole _next folder is missing.
I just had this exact same issue.
I have my Next app in a sub directory. I think that might be the cause of some problems.
What worked for me was.
Make sure to pick the right sub directory. Mine had a little Next Js icon on it.
The framework preset needs to be set to Next.js.
Go to Project Settings
Change Framework preset from Other to Next.js
Redeploy the project.
Edited
Try to deploy using
now --prod --force
The --force flag will clear your build cache (in production) and force production push.
If still no working then make sure to add now.json
Also make sure to choose Next.js as Framework preset (and not other). You can find that in Project settings and under Build & Development Settings.
More here: https://vercel.com/docs/concepts/deployments/build-step
My issue was that I first attempted to deploy Vercel through a team. When I created a new Vercel project under my individual Vercel account and deployed the same code, it worked! I hope this saves someone else time because I just lost 3 hours trying to find this. I'm using Next.js as well.
If you are trying to deploy through a team, you might need to configure the team ID in your vercel.json first e.g.
{
"currentTeam": "team_ofwUZockJlL53hINUGCc1ONW"
}
ref: https://vercel.com/docs/configuration#global/config-json/current-team
Hello Stackoverflow community,
I am building an angular app with Firebase/AngularFire2 and decided to deploy it on the web for testing purposes using Firebase's Hosting. This is not my first time using Firebase and its hosting function. However, this time around I encounter a strange issue. The development version (as displayed on the localhost using "ng serve") does not look like the Firebase-deployed-for-production version. In fact, the deployed-for-production version lacks a lot of styling. For example, all the mat-select dropdown look like they don't carry any content (even though they do), the dialogs' backgrounds are dark instead of being white and so on and so forth.
However it is worth mentioning that deploying a "development" version works fine. So using "ng build" instead of "ng build --prod" before deploying to Firebase doesn't create this problem. This leads me to thing somewhere in the process of building the "production" version of the app, something is not right and that the problem is not with Firebase's deploy function as the development-deployed version looks and works as expected.
Has anyone encountered something similar before?
Thank you
DEVELOPMENT VERSION (what it should look like) :
PRODUCTION VERSION (what it actually looks like) :
Here is the file structure of my project :
Try disabling the 'extractCss' key in your angular.json file
I must update legacy code of a Rails app but i don't know why the Front is not display correctly and page loading is very slow,
I can't contact the past developers
I got the code from heroku and it works well in production but not in development environment
When i launched the app for the first time i had this error
Webpacker::Manifest::MissingEntryError
And i fix it with
yarn install
I never used webpacker before in my Rails projects, i tried many things to fix it but it doesnt work and i don't know what is the way to lauch a Rails app correctly
UPDATE
I re installed webpacker on my environment and now the server compile with webpack but i got error about a JS library
ERROR in ./app/javascript/packs/landing.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-preset-env' from (repository path)
I can't comment yet so I have to create an answer to help you. Your CSS doesn't seem to be compiled in development environment or the CSS files are not imported somehow.
There can be several issues for that. Do you have any errors in your terminal ? Is your webpack.yml well configured for development ?
development:
<<: *default
compile: true
I have a simple web-project with React, webpac-dev-server, eslint, prettier, jest which is not acceptably working with Flow.
Any changes make Flow to calculate new decision during 4-5 minutes!
I made configurations for WebStorm and VSCode - situation with Flow in VSCode is better but not enough for developing code
I want to ensure that it's only my project's problem or it's a global situation
You can try my simple project in WebStorm and VSCode here
try to star client then server and then test-watch task and try to edit App.css