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>
Related
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')
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 trying to implement automated process of converting html into react components. I am following below link to automatically convert html into react components.
https://www.npmjs.com/package/html-to-react-components
but i am getting failure of command html2react. I also installed the package by using below command.
"npm i -g html-to-react-components".
But still it is saying "'html2react' is not recognized as an internal or external command,operable program or batch file".
The problem was that I installed the package globally. As i installed globally so i have to place my html file in C:/Users/YourComputerName/AppData/Roaming/npm.
and then from CLI I have to open the above folder and directory in which my html2react package is installed.
And then from that directory I have to implement the html2react command.
For clear understanding i am also attaching snapshot as well. CLI command description
Have a good learning.
I didn't know how to name this question but here is the thing. I installed React with NPM: npx create-react-app my-app and I start app with npm start. After that localhost:3000 opens. The thing is html file in folder public isn't connected anyhow to the script.
I want to serve the development with package called "serve". The only thing there is nothing to serve, the HTML file in public isn't updated at all while I can't serve App.js or anything like that.
Is it required to use CDN links for this task? Or how else it is possible to connect React to that generated html file?
You need to setup your environment with Webpack. you can follow this tutorial:
https://www.valentinog.com/blog/react-webpack-babel/
Or you can clone a react boilerplate project from github directly.
this is probably a silly question but am new to Meteor and struggling a bit. I want to build a stellar app that tweets when you get stellar. There is a nice Javascript API stellar-lib that works on node, but im unsure how to access the modules in Meteor...
I'm also building an app with Meteor and stellar-lib and have found two options:
1) You can manually copy over the built stellar-lib.js or stellar-lib-min.js from the build/ directory from either the github repo or the node_modules folder you installed it to when you ran the npm install command.
If you do this, you will have to copy the .js file to client/compatibility, otherwise stellar-lib will not work (note: this means you can only use Stellar on the client).
2) If you need it on the server, you can also have browserify wrap stellar-lib for you, then copy the output to lib/ in your Meteor app's root directory. I did this in my repo here with gulp.
Here's a short explanation to how 2) works:
.gulp is where I'll install my NPM modules where they will be ignored by the Meteor build environment (because the folder is hidden).
In deps.js, I require the modules I would want to use in my Meteor app as I would if I was using them in a traditional node.js app. package.json defines the modules I'll install with NPM and the gulpfile.js describes a build task that will resolve my require statements and output a single deps.js file that includes my dependencies to my Meteor app's lib/ folder.