I am currently working on making a component much like the contribution graph from Github and struggling a bit to share it as an npm package.
The component vue-contribution-graph packaged with npm doesn't display the tooltip properly. The CSS for the b-tooltipcomponent is working on the original project but it seems not to be included properly in the packaged component. Indeed, after running npm i vue-contribution-graph, the tooltip background doesn't appear.
I have created a GitHub issue just to make it clearer: https://github.com/estelled/vue-contribution-graph/issues/4
The behavior remains the same after installing all the dependencies manually.
I followed this tutorial for npm packaging.
Files changed to package the component:
package.json
added a vue.config.jsfile, to include CSS in the package
How do I fix it?
My guess is that it's not working when installing via npm, because the path to the CSS files are wrong. They are, however, correct when running the vue-contribution-graph package as standalone.
Having looked at your demo.html, it looks like it's requiring a missing file: ./vue-contribution-graph.css. Have you tried setting extract: false for your CSS to automatically be included in the bundle?
Related
I am trying to get the header height in react-native using the useHeaderHeight from "#react-navigation/elements". I already have "#react-navigation/native" package installed and its there in package.json with ^6.0.0 version. Now when I tried to import "#react-navigation/native", without installing that package, it worked for me. When I checked in package.json it is not present there. But when I checked in node_modules, under #react-navigation, I can see the elements folder and thats how it worked.
But my question here is, how its present in node modules without being present in the package.json.
In my project, I shouldn't be installing new package in package.json due to some permission issues.
So can I leave it like that as it is working? Also I want to know whether I will face any problem in future if I don't install that package specifically. Because in Sonar issues it is showing as critical error. But it's working fine in the project.
I tried deleting node_modules and installing again. Still the elements folder is present under #react-navigation. Also, I checked the documentation for the library and didn't find any relevent information.
I've installed, through npm (npm install react-native-elements --save and npm i --save react-native-vector-icons) two packages in my react-native (Expo) project. But the VS Code does not suggest elements from this package and keep suggesting elements from react-native instead of react-native-elements with the same name.
Would you mind explaining to me how can I force VS code to find, suggest and import this packages.
Things I've tried:
1 - restart VS code
2 - restart computer
3 - start over again a new project and reinstall all the packages.
The following image refers to the VS Code displaying the packages correctly installed and the menu does not suggesting the same package.
I'm trying to make VS code recognize, suggest and import the installed packages through npm.
I use an extension called 'npm Intellisense' and it works great for me! It's an addon by Christian Kohler.
For some reason, I uninstalled VS code, proceed the entire configuration again and now it is working. I don't know if It is a problem with previous configuration or some VS code bug. I've done the same steps and this time it is working. Thank you Dwayne for your tip.
I'm currently working on my Homework with VUE.Js which i found something cool in web which it was using After Effect animation in projects. so here's my question, How should i import it in project and use it?
Documentation said i should install via npm and use it by a simple code in vue.js file, but it won't work, so i guess i should use app.js file to import it, but i don't know how should i make it work. Can anyone explain how i can use it in my project? i don't need a full code to bother anyone, just how should i import from app.js and how should i use json file to make it appear in project.
Here's the Github link : https://github.com/chenqingspring/vue-lottie
Problem was in Development Mode.
Since i was using npm run watch , I thought it's normal like other npm packages but it wasn't, then i restarted with npm run prod and it's worked. doesn't matter if i use npm run watch or npm run dev. it only work when i'm using npm run prod.
I'm using a self made component library to share components between my projects. The problem is that even after using the Authoring libraries guide by webpack it keeps including those dependencies in my main build and I am out of ideas on what setting that this is caused by...
Build analysis (when bundling my app)
Here you can see the node_modules and wizer-components/node_modules. Including react-dom twice (and others)
Build analysis (of a component)
As you can see no node_modules are bundled here...
Setting files
Because I can't find where the issue lies I have created gists of my config files:
webpack.config.js (of component library)
webpack.config.production.js (of app)
Setup
Just as info, I'm using a monorepo setup with lerna to npm link the dependency of (wizer-components) without the need to push it to npm as a module. Could this be an issue in where webpack thinks that it needs to re-add the react (and others)?
After a total of 4 days of trying to make this work (was doing this before I asked the question), I managed to solve it (FINALLY)!
The issue was with lerna / NPM link and dependency resolving, see handy links at the bottom of this answer.
I fixed it by doing the following steps:
Moving the dependencies (react, react-dom) to peerDependencies in the wizer-components (my component library) package.json file
Removing all my node_modules folders (app and component library)
Running $ lerna bootstrap to re-download my node_modules
Removing my build process of my component library (I build these when I build my app)
Changing my webpack.config.production.js in these key areas
(did a picture because it wouldn't format it right on here -_-
Helpful links (also look at the comments):
How to avoid React loading twice with Webpack when developing
npm link doesn't play nice with peer dependencies
How to avoid loaded two copies of React error when developing an external component?
I'm following the "Contact Manager" introduction in Aurelia HUB, using the aspnetcore typescript skeleton. Thus, my solution havn't been set up using au new from the Aurelia CLI.
For the last bit of the tutorial, nprogress must be installed, and I'm struggling with that part. I've npm install nprogress --save and nprogress has been added to package.json. I've also installed the typing from Definitely Typed. So far so good.
Now the tutorial wants me to add nprogress to the vendor-bundle.js bundle, which is part of the CLI installation. So I don't have that bundle.
How do I go on from here? I've tried adding nprogress to the bundles.js file, but the reference is still missing when I run the app. There's also a config.js file that has som mappings, which I believe are used by aurelia require. I've tried adding nprogress here as well, but no dice.
All these configuration files are somewhat confusing. How do I get a package running? Thanks.
jspm install nprogress did the trick.