I moved all bower dependencies into package.json. The app is using gulp. Gulp can make a bundle file with all js code, but what about js code from node_modules which actually is used on the UI, like angular etc.
So the question actually is:
can I manage "front-end" libraries (which are now in node_modules) by using gulp. If it so, then how I can do this.
Related
I'm developing an SPA which I'm serving up using Rails and the ruby webpacker implementation. I have my client folder split up into a yarn monorepo for my web, native, and common code so I can reuse as much as possible using react-native-web.
So far, for the native part I have to use the nohoist directive for any library I want to use. When I run the android dev server, it can't bundle anything in the hoisted node_modules folder, so anything I want to use I have to tell it to install in the local node_modules folder using nohoist.
I'm wondering if this is how these projects are supposed to be set up, if this is normal? Should I be using something like Lerna to manage symlinking and package hoisting? Have I missed a step or a library somewhere when setting this up?
I use yarn workspaces and lerna in a mono-repo and symlinking wasn't working for our react-native project.
I added the following to the child package's package.json (the react native package in the mono-repo) which prevents hoisting of anything in the react native package:
"workspaces": {
"nohoist": [
"*",
]
},
I'm assuming this would be similar to react-native-web.
We tried lots of other methods which did not work and it did seem like hoisting in general was not compatible with react native based projects.
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?
I would like to share my Vue js application project which is in my repository with a friend. So I used vue-cli, npm/yarn and webpack to develope.
I would like to know if he needs to install also cli to run the app on his computer, or just npm install and npm run? thanks
No, the vue-cli is not strictly necessary. However, if you're used to using vue build to build & run your app, your friend might want that too. He/she could just use some other way to run the webpack build operation if installing vue-cli isn't an option.
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 want to ask on specific problem
We have SDK library (on local gitlab), which contains some JS files and it contains all packages as React, Redux, Typescript... defined in package.json as "dependency" and "peerDependency"
This library is included into new project as dependency and new project is using SDK libraries and their versions defined in SDK package.json file.
React, Redux all included (used as imported module) into files is exported right
But problem is, when typescript or some #types/* package is added
MPM not install that packages and tslint-loader of course throw error, that typescript is not installed.
Any advice, how to properly add peerDependencies into package.json file and specially for SDK library?
Many thx for any advice
I'm facing the same problem. I'm developing a framework module for angular projects and define the required angular packages as peerDependencies.
During development typescript can't resolve the packages (eg. '#angular/core').
My current solution for this problem is to add the peerDependencies also as devDependency so it gets installed. But I consider this more as a workaround.
Is there a better solution for this?