I'm researching options for a new project at work. We're thinking of using nuxt (or just regular vue 3) and creating a library where we will be keeping our shared components.
I'm trying to do the initial setup, but am having problems. I followed this tutorial to create the library and added typescript to it. I created a sample component with a counter and exported it.
The problem is that when I import the component from my library in a consuming project (whether it's the nuxt project or a vanilla vite vue project), the component looks like it's not reactive. Its internal counter is supposed to increase when it's clicked, but it's not updating. There are no errors or warning in the console.
Another issue is that its CSS is not being applied. It has some basic styling defined in the component, but it's not visible. I've created a minimal reproduction repo with setup instructions here: https://github.com/drekembe/vite-reproduction-2342
I've tried searching for similar issues or debugging it myself, but I haven't gotten anywhere.
Any help is greatly appreciated.
I encounter this problem today with my package and finally, I found the real culprit is the node_module inside the package that we tested locally. If you install the local package by npm link or install directly with the folder path like "components": "../components", your node_module will look like:
node_modules
|
--components
|
--node_modules <-- the culprit here
Your package will be shipped with its own node_module and inside that module has a vue package that is independent of the vue package that you are using in your app. So your components would not work as expected.
To test it, just delete the node_modules/components/node_modules and the vite cache node_modules/.vite then run yarn dev again. You will see your component works fine now.
Solution:
In your package folder components run npm pack to pack your package. It will create a tarball for your package. The output is the components-0.0.0.tgz file inside the components folder. This is the most important part because npm pack will create a pack of your package that is similar to what you will publish to the npm registry.
Now in your test project my-vite-app add your package to the package.json: "components": "file:../components/components-0.0.0.tgz"
Run yarn to install the package and yarn dev to run the app and see if your components work.
Every time you make a change on your package, don't forget to pack the package again and re-install it. You might want to increase your package version to invalidate the yarn cache
In your components folder run :
yarn build
then run :
yarn link
in my-vite-app folder run :
yarn link "components"
in the maint.ts import the style :
import { createApp } from 'vue'
import App from './App.vue'
import 'components/dist/style.css'
createApp(App).mount('#app')
Related
I have a git root project where I am using inside my root project a git subproject.
So for example I have the project MyApp and a subproject UIComponents.
Currently I have cloned the UIComponents repo into my project folder and added UIComponents to .gitignore of the root project.
Now I want to build a npm package for UIComponents and I want to be able to switch between npm production build and development.
The problem is in development the import is this:
import Button from './UIComponents'
and with the npm package the import is this:
import Button from '#my_name/UIComponents'
I dont want to adjust the imports everytime.
The first thought that comes to mind is to develop the UIComponents inside node_modules folder but this seems not to be a nice solution.
For solving this, try to use npm link.
So instead of cloning it in a subdirectory that need to be added to gitignore, just check out the repository outside of you project and then link it.
Example:
cd ~/projects/UIComponents
npm link
cd ~/projects/MyApp
npm link #my_name/UIComponents
In this way you can use the same import syntax but you can develop locally in both projects at the same time without the need of publishing every change.
I am in the process of creating a React app (using Linux-Ubuntu, npm 3.5.2, node v8.10.0, with npx). I used the following-
npx create-react-app my-app
But to start the app:
npx start
I got a bit of errors (shown below)
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"eslint": "^6.6.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:
/home/dirsomename/Projects/node_modules/eslint (version: 5.16.0)
Manually installing incompatible versions is known to cause hard-to-debug issues.
If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact order:
1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
2. Delete node_modules in your project folder.
3. Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
4. Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem.
Well, it did not fix the problem even after following the steps above.
So, my goal now is to retrace my steps and to uninstall the complete React app from scratch.
How do I go about doing that?
Im using element UI and I'm installing it just like this
npm i element-ui -S
however i dont want the whole package instead i just want a specific component which is the DatePicker how can I install it using npm. I tried looking in documentation but it is nowhere to be found thanks.
Using npm (or even Yarn), you can only install an entire package and all of it's dependencies. Installing specific parts of a package isn't a thing; more docs can be found here. Once again, even the docs for element-ui makes it quite clear that installing the package can only be done through
npm i element-ui -S
or if you're using yarn, yarn install 'ing after adding the package to your package.json.
Now, if you're wondering if it's possible to only include the component you want in the output bundle of your Vue app, then the answer is yes. You'll need to ensure that you're importing only the full path of the component (as opposed to the entire package):
import ElementUI from 'element-ui'; // will import the whole library
OR
import { DatePicker } from 'element-ui/lib/Datepicker' // will import only the Datepicker
You'll need to ensure that the path you're importing the component from matches that of the installed package location within your node_modules directory. As well, you'll then need to make sure that your Webpack config is setup correctly to bundle only the JS files you're importing (which should be handled by default).
I think there is no way to only install one single component from a ui library.
Because there has a lot of dependency between each component in the source code.
But if you are worry about it's to heavy to import the whole library into your project.
Maybe the best way is import the library on demand like below:
import Vue from 'vue'
import { DatePicker } from 'element-ui'
Vue.use(DatePicker)
When using it with webpack and babel-plugin-component.
Your bundle output will only include code from the library which is actually useful.
You can see the detail document here Element QuickStart.(Ps: the On demand section)
Or you can discard to use ElementUI.
And choose another DatePicker Component for Vue from this site Awesome Vue
In a folder outside of my react native app I have placed a project I cloned from github in order to include it in my project.
I have run npm link on that project and npm linked it to my project, however when trying to run the project I get this screen
The github repository for the project is here
All the file need to be under the root directory of the package. The packager doesnt work well if the files are outside.
A workaround described here
node_modules/react-native/packager/packager.sh --projectRoots <ROOT-1>,<ROOT2>,<ROOT-3>
I am learning NativeScript. For example, I would like to include this Guid generator package in my NativeScript app. My question is, how? I look at the directory structure generated by the command-line tool and I see the following relevant pieces:
node_modules
app
tns_modules
package.json
package.json
Do I add node-uuid to the ./package.json or the ./app/package.json? How do I reference it in my app then? For example, if I want to use uuid from the app.js file, what does that look like? I'm a little confused because of the package structure of NativeScript and how things actually get loaded at runtime.
Thanks
Run npm install from the root of your {N} app.
npm install --save node-uuid
The dependency will be added to the outer package.json.
And then in your app.js file, just use it like usual.
var uuid = require('node-uuid');
When you run tns run <platform> or tns build <platform>, the modules inside node_modules/ will be copied to folder under platforms/, take Android for example, it will be at platforms/android/assets/app/tns_modules/node-uuid. The building process is completed under platforms/ directory.