I am using a third party component (vue-image-lightbox) which currently has a bug. I cloned the repo and made the change and want to deploy it with my app to see if it fixes the issue. To do this I installed yalc.
In the component project (vue-image-lightbox) I ran
npm run build
yalc publish
My understanding is that this places my vue-image-lightbox into the yalc store.
Next, I went to my dependent project and ran
npm uninstall vue-image-lightbox (remove the existing component)
yalc add vue-image-lightbox. This creates
a) .yalc directory with the deployed component
b) adds entry to package.json : "vue-image-lightbox": "file:.yalc/vue-image-lightbox",
run npm install to pick up any dependencies
After this I ran my app and went to the component that uses vue-image-lightbox. In the console I not get the warning
"[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option."
All of the registration code works without issue with the git installed component. I don't understand why I see this when I try to use yalc.
The component is registered locally with
import LightBox from 'vue-image-lightbox'
components: { LightBox }
I would love to know what is different about the yalc installed component that is causing this issue. Is there a better way to test out patches on third party components other than yalc?
Thanks!
Related
I was running ionic serve in local computer and got following error
compilation error
It was working fine earlier, also I didn't make any changes to code whatsoever. I don't understand what is causing this error.
I tried following
Freshly clone project from git repo
Re-install npm dependencies
Un-install and re-install ionic globally
None of the above methods worked.
Looking at the error log, which say:
You may need an appropriate loader to handle this file type.
You need to add vue-loader to your webpack configuration. You can find an example of such an integration here:
https://github.com/vuejs-templates/webpack-simple
Someone said here "You may need an appropiate loader to handle this file type" webpack and vue that he solved the problem by downgrading vue-loader using:
npm install vue-loader#14 --save-dev.
Apparently v15 has some issues.
I suggest you to look in this posts:
Error: "You may need an additional loader to handle the result of these loaders."
"You may need an appropiate loader to handle this file type" webpack and vue
Vue Render HTML - You may need an additional loader to handle the result of these loaders
Vue - You may need an additional loader to handle the result of these loaders
Solved this bug,
One of the components contained lang typescript where as ionic system is using javascript.
SignIn Component:
<script lang="ts">
//logic
</script>
I just removed lang and ionic compiled files properly.
Earlier versions didn't track this error.I recently upgraded ionic version to 6.17.1.
Is it possible to an Expo app example to load a module located in the parent folder AND to see changes in the example app when i rebuild the package (with tsc -w to rebuild on any saved files)?
I precise that the module is not publish on npm yet.
I've already succeed to do that using monorepo architecture with yarn workspaces and expo-yarn-workspaces package.
But what about the case when you don't want to publish your package like a monorepo?
For example, in this repo https://github.com/cuvent/react-native-vision-camera
There is an example RN app in bare workflow and in its package.json there is no mention of the developed package (meaning that it's not installed like a normal dependency).
But in the app src/App.tsx, the package is used like that :
import { Camera, frameRateIncluded, sortFormatsByResolution, filterFormatsByAspectRatio } from 'react-native-vision-camera';
Though, the react-native-vision-camera is used like it's already and normally installed with yarn or npm.
How does it work ?
Thanks.
Finally, I've found something that works for me.
You can find my config for metro if you want here:
https://github.com/grean/react-native-metro-config-app-example
With it, you can access the parent component from the expo app, modify it and immediately see the hot-reload changes.
Create a file metro.config file in your expo root app directory with that code inside:
let config = require('#grean/react-native-metro-config-app-example/index.js');
module.exports = config
For a whole example, you can check this repo out:
https://github.com/grean/react-native-scale-text
I installed vuetify using the command vue add vuetify, but an error as below occurred because I didn't create the project using vue create <project>, instead, I used vue init <template> <project>.
Then, my project cannot run anymore. When I issued npm start, tons of errors occurred. The screenshot below is one of them:
Could someone teach me how to recover from these errors? Can I remove this plugin?
Or did it just destroy my project and I have to create a new one and start from scratch again?
Thanks
You can try
npm uninstall vue-cli-plugin-vuetify
removes veutify as a dependency
Cross verify in `package.json' file
I think this is a config issue related to keeping store in an npm-linked folder.
I made a vue-cli 3 project and got the “counter” example running (from https://github.com/vuejs/vuex/tree/dev/examples/counter)
Works: When I move the store.js to an installed node_modules package (and update its import url) it continues to work.
Breaks: When I move the store.js to an npm linked node_modules package it compiles and dev tools finds the store, but I get a blank screen and console error: Property or method “$store” is not defined on the instance but referenced during render
It also works properly with a linked package if I build the minimized js (npm run build). Is there a config setting I'm missing?
The problem turned out to be that the linked packages had its own node_modules folder. I think that may have resulted in webpack creating 2 instances of Vue and attaching the linked package to the 2nd instance.
Deleting the depended upon package's node modules and letting webpack / vue-cli run at the root level resolved my problem.
I realize this question is ridiculously old, but I ran into this exact issue. As deleting node_modules isn't a valid solution, here's what actually worked.
In the library you're importing into your main app, edit your package.json file.
You want to move Vue to be a peer dependency.
"dependencies": {
"vue": "^3.0.0" // move this
},
Move "vue" here.
"peerDependents": {
"vue": "^3.0.0"
},
This will cause your library to use the instance of Vue utilized by your main vue app. As the accepted answer states, this issue is indeed caused by each package loading its own Vue instance. The issue happens because reactivity is bound to the Vue instance. As each library gets its own instance, this creates a situation where reactivity isn't properly tracked between the instances.
I found the solution to this in the Vuejs git repo at https://github.com/vuejs/vue-cli/issues/4271
I have vuejs installed and would like to use vue admin (https://github.com/vue-bulma/vue-admin) with it, however the documentation does not mention how to use it.
For example, if I wanted to use a component from vue-admin then what are the steps?
You'll need to git clone the vue-admin project repository:
git clone https://github.com/vue-bulma/vue-admin.git my-vue-admin
Then:
cd my-vue-admin
Next, install all the dependencies:
npm install
Once all the dependencies are installed, run:
npm run dev
Wait for the compilation to finish then go to http://localhost:8080 in your browser and it should be working.
Using individual components only
If you would like to use some components only, for example: a modal component. Then find its npm package name and install it in your project.
You can either look for the name in package.json or look at the source code of the page using that component in vue-admin. For example, a modal is used here.
Vue-admin is using vue-bulma-modal component. Here is its page which can provide you with more information.
vue-admin is more of a project template, so you'd make a copy of the whole project and make changes as needed. If you want to use individual components, just install them as needed and refer to vue-admin as example