Vue 3 local component library (sfc) development not working due to Plugins not reloading - vuejs3

I need help. I'm developing a vue-3 (Quasar/Electron) app with a separate component library. What I'm trying to get working is to develop the component library locally alongside the main app with hot reload.
It's pretty simple, I already have the component library configured as a Vue plugin. If I push to NPM and add it to my project as an npm dependency, everything works fine. What doesn’t work is when I use yarn link to symlink locally and then add it the same way:
import { MyComponentLib } from 'my-component-lib';
app.use(MyComponentLib);
This worked fine on vue-2 as any changes to the local component lib would get reloaded and immediately shown during development. However with vue-3, you can only load a plugin once (even in development). After the first load you will get a warning: "[Vue warn]: Plugin has already been applied to target app.".
You basically need to restart the app everytime to see changes to your local component library. Does anyone know how to get around this?

Related

NextJS to ElectronJS

I have a web app in NextJS and TypeScript working fine. Now, I want to move it to ElectonJS so I can move from the web and create desktop app versions. I have tried different approaches but nothing worked for me. I also failed to find a good documentation or article about migrating NextJS to ElectronJS.
I am using nextron but I can also use some other if recommended.
Approach 1: I created a new nextron app using "yarn create nextron-app my-app basic-typescript" command as mentioned on nextron guide. Then I moved the whole code inside the renderer directory but it is showing an error when I compile. Error in Approach 1
Approach 2: I created a dummy nextron app and install all necessary dependencies there, then I copied the files, dependencies etc to my NextJS app and moved the pages folder to renderer along with the necessary files but it is also showing error.Error in Approach 2
My NextJS App
Can anyone help please?

Adding template to existing React Application

I have a medium experience in developing applications with React, and up to study and experience I have always used very basic layouts, creating components and styling with a .css file
Currently I want to start using the various react templates that I find online, such as:
"Connect Plus React Free Admin Template" etc.
This is the first time I try to integrate a template into an existing application.
So I tried to copy from the template what I needed and then bring it back to my application.
Then update package.json and package-lock.json and run npm install.
Unfortunately, then starting the app with npm start it broke and did not start anymore.
Do you have any tips, advice or guides on how to do this?

where to look in meteor app if vue-router suddenly stops sending props to other vue compoents

everything was working just fine and suddenly now Vue components are not receiving the props sent on router-view.
I've tried deleting the 'local' and .cache folders and running
meteor
again but still the other Vue components don't get the props (undefined).
I've tried to build some previous commits of my repo but everywhere the props are not being sent now.
in a neighboring directory, another meteor-vuejs-vuerouter proj is still working perfectly with similar routing.
I've changed browsers, tried terminal instead of iterm2, etc.
In Vue tools, I can see App.vue getting the data from subscription and computed properties are generated. but then in the child Vue component, the props show as 'undefined'.
Any ideas on where in the build process of meteor or any other place that vue-router could be causing this problem?
Many thanks in advance.
even when my package.json file had "vue-router": "^3.0.0", in both projects, in the project where the router was misbehaving i found the vue-router 2.0 version instead of 3.0 ..i don't know how it crept in..someone suggested package-lock.json is useful but for now i manually deleted the older version n copied the newer folder into node_modules and it now works!

NextJS deployed to Vercel: 404 page not found

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

SCSS/CSS doesn't load with webpack

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

Resources