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.
Related
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?
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
I am trying to debug an ASP.NET Core + Vue.js project from within VS Code to utilise the debugger tools available.
I can run the project in VS Code with F5, but breakpoints show as hollow with the note "No symbols have been loaded for this document". When running in VS Code, the Debug Console does output that symbols have been loaded for the project dll: Loaded 'C:\Projects\SoftwareAteliers-1.1.0\bin\Debug\netcoreapp2.2\AspNetCoreVueStarter.dll'. Symbols loaded.
The rest of the launch process works as intended, launching a browser and loading the Vue.js application.
The Github repo for the project can be found here (note that I'm not using the latest release of the repo due to needing ASP.NET Core 2.2).
I had to modify .vscode/launch.json as the repo wasn't referencing the correct .csproj file.
Before:
"program": "${workspaceFolder}/bin/Debug/netcoreapp2.1/asp-net-core-vue-starter.dll",
After: "program": "${workspaceFolder}/bin/Debug/netcoreapp2.2/AspNetCoreVueStarter.dll",
and similar with .vscode/tasks.json:
Before: "${workspaceFolder}/asp-net-core-vue-starter.csproj"
After: "${workspaceFolder}/AspNetCoreVueStarter.csproj"
Otherwise, my local project is the same as the Github-hosted version.
Is there something I'm missing? My preference would be to debug this within Firefox (I've installed the VS Code Debugger for Firefox extension) but even Chrome or Edge would be acceptable at this stage.
I've used this template repository which enables source level debugging for a Quasar app using either VSCode or VS2019. Since Quasar is based on Vue, the steps should be similar.
https://github.com/mhingston/QuasarAspNetCoreTemplate
Note in particular:
For VSCode debugging:
https://github.com/mhingston/QuasarAspNetCoreTemplate/blob/master/.vscode/launch.json
There are configurations for Production / Development / chrome for VSCode.
For VS2019 debugging:
https://github.com/mhingston/QuasarAspNetCoreTemplate/blob/master/Properties/launchSettings.json
Enable Webpack source level maps:
https://github.com/mhingston/QuasarAspNetCoreTemplate/blob/master/ClientApp/quasar.conf.js
build: {
// this is a configuration passed on
// to the underlying Webpack
devtool: 'source-map',
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
Following the guidelines here: http://docs.ionic.io/docs/push-from-scratch I am having trouble with step 2 - installing ionic add ionic-platform-web-client.
My index file within my app adds <script src="lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js"></script> as it should, however the file doesn't exist at this location, even after running 'ionic lib update'.
(For ease of explanation in this section I am using the non minified version of the bundle: ionic.io.bundle.js (the results are the same with both full and minified versions of the files)).
Manually adding ionic.io.bundle.js from https://github.com/driftyco/ionic-platform-web-client/tree/master/dist will give me this error:
"Uncaught TypeError: Cannot call method 'get' of undefined
ionic.io.bundle.js (3429,0)"
from this code:
key: "get",
value: function get(name) {
return this._settings.get(name);
}
I found a 'hacky' way to get the dev pushes working by simply returning this instead of the full return this._settings.get(name) statement, although this only really suits the purpose of debugging and additionally does not allow removal of developer mode by settings 'ionic config set dev_push false' or manually setting "dev_push":false in .io-config.json.
I am unsure as to whether manually adding ionic.io.bundle.js is simply adding to my problems or whether this is the right approach to take and that the errors produced are the real problem?
I am running:
ionic 1.1.0
ionic CLI 1.7.7,
cordova 5.3.3,
bower 1.6.2,
npm 2.11.3,
visual studio 2015 community with cordova/ionic setup,
I've also updated my android platform - for which I am currently building to (deploying to nexus 7).
TheCannot call method 'get' of undefined in ionic.io.bundle.js happens because of missing settings in the bundle.
This could be fixed by running:
ionic config build
Although I still haven't been able to install the ionic web platform via 'ionic add ionic-platform-web-client' in the cli I have managed to get the ionic push notifications working.
Firstly I made sure in my app directory within the cli to use 'ionic lib update'. As the setup of my project was different (thanks to visual studio). You will likely already have these files using a custom setup, but I found it's good to have the directories in place.
Secondly I manually downloaded the web client https://github.com/driftyco/ionic-platform-web-client4 not just the ionic.io.bundle.min.js which seemed to fix my "Uncaught TypeError: Cannot call method 'get' of undefined" problem mentioned previously, after I moved the entirety of this in my lib directory. (Make sure the name of the downloaded folder matches: "ionic-platform-web-client" exactly, and doesn't contain any words like master).
Thirdly, as I couldn't add version 1.3.0 of the push plugin (which continually gave me the beloved 'uh oh' error) I used 1.2.3 instead. I installed this via: 'cordova plugin add https://github.com/phonegap/phonegap-plugin-push.git#1.2.31'. Although I have just noticed 1.4.0 is available which may also work?
This should hopefully fix any issues you have, even if it's not a perfect solution. As a side note: I know it is mentioned somewhere on one of the ionic pages that you need to have a traditional project setup and then move the relevant files but it would be nice to have some description of how to go about this - as you may not know what the relevant files are. For anyone who comes here scratching their heads, If you're using visual studio to create your ionic projects from scratch or any other custom setup, you will likely run into the same issues, as the relevant directories created using 'ionic start myApp' will likely have been omitted.