Getting error "read ECONNRESET" while creating a new stenciljs project. How to fix the same? - stenciljs

I am trying to create a new stenciljs project using command npm init stencil. As soon as I choose a set up (whether app or component) and hit 'enter', a read ECONNRESET error is prompted.
I have tried updating the npm but nothing is working.
I expect the command prompt to show me the option where I can enter the project name after choosing a setup for my project but it throws an error, instead.

An ECONNRESET in npm means that npm is unable to connect to an URL where it's looking for dependencies or resources. In most cases, that means that your npm is unable to connect to the NPM Registry. But in your case it seems different.
You're trying to create a Stencil app, with npm init stencil. Under the hood, that That means you're using npm to download the create-stencil package and run it to generate the scaffold of your Stencil app.
The first part, getting the create-stencil package works well, the problem arrives while running the package. If I am correct, create-stencil tries to clone the stencil-app-starter GitHub repository and modify it. So maybe you're behind a corporate or university proxy, blocking GitHub, or another the URLs of the create-stencil resources, maybe the connection is rather flacky, maybe GitHub was done at that moment...

Related

It is possible to publish a NPM package with FormData inside?

I have a problem with FormData, when I add a file with append I have this error in my console. This error appears only when I publish my package on npm, when I run it locally I don't have it...
My picture is inside and is File type, but on formData.append I have this error...
I also check if I have the same problem without using foreach, but It's the same problem.
smart-events is a NPM Package develop with rollup / vuejs3, this is the code which is a concern
Does someone has a solution?

Unable to set correct npm config for group registry

I have two npm packages that are private repositories hosted on gitlab.com under a group organization.
My first package lives well and get updated and downloaded by users of the same organisation.
To install a private scoped package, the doc says:
# Set URL for your scoped packages.
# For example package with name `#foo/bar` will use this URL for download
npm config set #foo:registry https://gitlab.example.com/api/v4/projects/<your_project_id>/packages/npm/
So my .npmrc looked like
#mygroup:registry=https://gitlab.com/api/v4/projects/<id-project-1>/packages/npm/
//gitlab.com/api/v4/projects/<id-project-1>/packages/npm/:_authToken=<token>
//gitlab.com/api/v4/projects/<id-project-2>/packages/npm/:_authToken=<token>
//gitlab.com/api/v4/packages/npm/:_authToken=<token>
Obviously, everything works fine for the first package but not for the second one.
What I can't understand is why a scoped package should refer to a unique project url?
Because of this, I can't install both of my packages: the url of my scoped packages will only be valid for one of them.
I looked at the api endpoint to return a list of my group's packages I found this:
https://docs.gitlab.com/ee/api/packages.html#within-a-group
So I updated my .npmrc to
#mygroup:registry=https://gitlab.com/api/v4/groups/mygroup/packages/npm/
//gitlab.com/api/v4/projects/<id-project-1>/packages/npm/:_authToken=<token>
//gitlab.com/api/v4/projects/<id-project-2>/packages/npm/:_authToken=<token>
//gitlab.com/api/v4/packages/npm/:_authToken=<token>
But it doesn't work.
On the group/group-id/packages route I only get gitlab infos but nothing in an npm friendly format.
How to install more than one private scoped npm package hosted under the same group?
The instance level endpoint seems answer to your situation instance-level-npm-endpoint
Using:
npm config set #mygroup:registry https://gitlab.example.com/api/v4/packages/npm/
npm config set -- '//gitlab.example.com/api/v4/packages/npm/:_authToken' "<your_token>"
You should be able to publish #mygroup/project1 & #mygroup/project2
I experienced some troubles using yarn (1.22.10) so I'll post more details here just to save couple of hours to anybody reading this.
For some unknown reasons I was able to install the package with npm but not with yarn and I got Request failed \"404 Not Found\"
I ended up by creating a .npmrc file at the root of the project (I'm working with docker) with the following content:
#my-org:registry=https://gitlab.com/api/v4/packages/npm/
//gitlab.com/api/v4/packages/npm/:_authToken=<GITLAB_TOKEN_API_SCOPE>
//gitlab.com/api/v4/projects/<ID_PROJECT_1>/packages/npm/:_authToken=<GITLAB_TOKEN_API_SCOPE>
//gitlab.com/api/v4/projects/<ID_PROJECT_2>/packages/npm/:_authToken=<GITLAB_TOKEN_API_SCOPE>
Line 3 and 4 are required for yarn but not for npm.
To make it work replace #my-org by your gitlab organisation name, gitlab.com by the url where your projects are, <ID_PROJECT_X> by the ids of the projects you want to install and <GITLAB_TOKEN_API_SCOPE> by a personal token with an API scope.

Running Vuetify on Vert.x (w/ES4X)

I'm wondering if it's possible to run Vuetify (out-of-the-box) with Vert.x. I've played around a bit and I don't see a straightforward way but perhaps I'm missing something.
Sources:
https://vuetifyjs.com/en/getting-started/quick-start
https://reactiverse.io/es4x/start/install
Steps:
Create an out-of-the-box Vuetify:
npm install #vue/cli -g
vue create my-app
cd my-app
vue add vuetify
Test that it works by running it in Node
npm run start
When I view http://localhost:8080 (using node) it looks good. So I
create a compiled version in a dist folder
npm run build
Now I would like to try and get it working in Vert.x So I add ES4X, which is supposed to allow ES 5+ js code
npm install -g es4x-pm
es4x init
npm install #vertx/unit --save-dev
npm install #vertx/core --save-prod
npm install #vertx/web --save-prod
npm install
Create an index.js file so vert.x server for the index.html
vertx.createHttpServer().requestHandler(function (req){
req.response().sendFile("dist/index.html");
}).listen(8080);
Run Vert.x
npm start
When I view http://localhost:8080 it does not show as expected. It looks like a blank page. When I view the source code of the page in a browser, it shows the contents of the index.html file. So I know it's loading it, just not interpreting it. When I view the console I see a log entry saying Syntax error: Expected expression, got '<'
Note - I would like to avoid going the 'CDN install' route shown on the Vuetify quick-start link. My project is fairly complex and I just wanted to test how Vuetify by itself worked with Vert.x before tying in all the other dependencies
You've added a bare request handler, think of it as using just core nodejs modules. In order to serve multiple files and resources you should use vertx-web (which you already installed). In this case your code should be:
import { Router, StaticHandler } from '#vertx/web';
// router acts like express if you're familiar with it
const app = Router.router(vertx);
// for any HTTP GET request this will be your
// first handler "dist" is your static files root dir
app.get().handler(StaticHandler.create("dist"));
// add more handlers as needed...
vertx.createHttpServer()
.requestHandler(app)
.listen(8080);
So now all your static files should be served correctly...
Not sure I'm grokking this question.
Vuetify is runs in the browser, Es4x runs on the server.
You just need way to serve the static 'dist' folder, as described above.
ps: I'm assuming you're not doing server-side rendering, in which case, I'm not sure if es4x will work (it might).

How to install flow type correctly for react native#0.46+?

I've googled many sites but cannot found a tutorial that actually works for react-native + flow type.
There was flow installation guide from react-native#0.22 document, but it's gone in react-native#0.46.
However, it comes up again in Running Tests and Contributing, I tested to run npm run flow but not working, and yet it doesn't say how to make it works. It's possibly been a missing part inside of react-native documentation.
What I need is to run flow correctly with react-native. Auto-check flow every time I reload the page with ⌘R would be the best.
I just finished covering half of our project by flow and we use RN 0.44.0.
The tricky part is: do you also want to know errors inside node_modules, someone says those errors are helpful.
Anyway, I disable the error in node_modules, and here is my .flowconfig:
[ignore]
<PROJECT_ROOT>/node_modules/.*
<PROJECT_ROOT>/flowLibs.js
.....
[include]
[libs]
./flowLibs.js
.....
[lints]
[options]
You should install flow first if you not setup correctly,
npm install --save-dev flow-bin
and also run this in you project root after install:
npm run flow init
If npm run flow init does not work, just add "flow": "flow" in npm scripts.
After init, put my .flowconfig in your project .flowconfig file.
Then create a js file flowLibs.js and if npm run flow check cause your any error like Module_Name. Required module not found
Write down code in flowLibs.js:
declare module 'Module_Name' { declare var exports: any; };
After that, you should be good to go with you project now.
BTW, don't forget add //#flow on the top of the file which you want to check type.
I found flowtype is built in with react-native#0.46+.
For react-native document, I think they should at least tell flowtype is already built in. And for the rest document ex: Testing Your Changes#flow, it won't work without flow-bin, they should mention that too.
To make flowtype of best use, I use it with Visual Studio Code.
Steps:
Install flow-bin globally, by npm i flow-bin -g.
Make sure your terminal is responsive to command flow.
Install vscode flow extension.
Set vscode workspace preference with "javascript.validate.enable": false, to disable default javascript validation, so flow validation can take place.
To access vscode preference, ALT+F,P,S for windows, ⌘+, for mac.
then you have flowtype installed with visual result with every key stroke:
Try this one:
Adding Flow to React Native
https://medium.com/react-native-training/getting-started-with-react-native-and-flow-d40f55746809
Hope this helps!

react-native init hangs/stalls with no error

New to react, working through a udemy tutorial on a Mac. Installed node ok but when I go to start a project
react-native init projectname
terminal output:
This will walk you through creating a new React Native project in /Users/myuserid/projects/projectname
Installing react-native package from npm...
and it just "hangs" there... seemingly frozen or chugging along. When I check Monitor it looks like Terminal is using 0% CPU. There is no indication (backslash flipping or otherwise) that it is processing.
Inside the projectname directory is a "package.json" file and a "node_modules" file with a bunch of subfiles.
I saw this post with a similar problem (https://github.com/facebook/react-native/issues/2806), but doesn't look like there is a remedy. Is there any way to speed this up? How can I tell if it has stalled forever? Will this happen during every project init I do?
I'm not in China... I have fast internet... and I'm using NPM 3.3.12
Thank you!
I got the same issue , and i found the 1st comment on the question is useful .
Indeed , If no error, it means that it takes time to download dependencies.
You can track downloading by adding --verbose :
react-native init projectname --verbose
You will spend a long period to reach 50% of downloading.
Nevertheless, you might face the following error :
npm WARN react-native#0.34.0 requires a peer of react#~15.3.1 but none
was installed. npm verb exit [ 0, true ]
If so , check this thread .
I had the same problem while using an existing (empty) directory as App name
It worked as soon as I changed the App name to something new