Hello everyone, I am Liu Ming, a ten-year entrepreneurial veteran and open source technology enthusiast.
Everyone knows that you must be cautious when upgrading software dependencies to the latest version in a production environment. Problems are prone to occur, and it is not easy to troubleshoot.
But as an open source enthusiast, I always like to study the latest version in a non-production environment.
On May 16, 2023, the Nuxt development team released Nuxt 3.5.0 version. I upgraded a project that was under development before, but a white screen appeared.
Record the cause of the problem and the solution process. If there are children's shoes that encounter the same situation, you can refer to it.
background of the problem
I am currently developing a background management system based on Nuxt3, tentatively named Nuxt-Pro. Nuxt Pro has been continuously evolving and has not been used in a production environment. So, as soon as Nuxt 3.5.0 was released, I upgraded it with the following command
npx nuxi upgrade
After the upgrade is complete, execute the following command to preview
npm run dev
There are no packaging errors during the preview command execution, but when the browser is opened localhost:3000, the result is unfortunately a white screen of the app.
Cause of the problem
Before the upgrade, the dependencies of Nuxt Pro were Nuxt 3.4 and Vue3.2.
After the upgrade, open the developer tool of Chrome, switch to Consolethe tab, and it really reports an error. The error is that there is no hasInjectionContext这API in vue.
hasInjectionContextIt is a new API in Vue 3.3.
I node_modulesfound vue in the folder and checked package.jsonthe file. It is still version 3.2 .
Cause of error: The Vue version has not been upgraded.
solution to the problem
method one
To upgrade again, execute the following command:
npx nuxi upgrade --force
After adding --forcethe parameters, the Vue version is also upgraded, and the problem is perfectly solved.
Method two
Reinstall all dependencies. First delete node_modulesthe folder, and then execute the following command:
npm install
After reinstalling all dependencies, Vue automatically installed version 3.3, and the problem was solved.
If children's shoes encounter similar problems, you can refer to the above solutions; if you encounter other problems that cannot be solved, you can send me a private message. I wish you all no bugs!