What means this Vue devtools version hint? - vue.js

My Vue devtools show this version hint:
I don't understand from where the version number 3.2.28 is coming though or to what exactly it refers to - my vue version is 3.2.25.

Can't see much more than what you provided in the image, but I think a reasonable guess is that you are using something like this:
"dependencies": {
"vue": "^3.2.25"
},
If that's the case, the install script will get the latest patch version, which would be 3.2.28 at the time of install, and 3.2.29 at the time of screenshot. This will also update the npm (or yarn) package which will make it re-install 3.2.28 even when 3.2.29
if you want to lock it, remove the ^ character, if you want to understand better why and how this is happening look into the Using semantic versioning to specify update types your package can accept documentation

Related

nested dependencies resolution for yarn not showing up in yarn.lockfile

I am using resolutions to resolve a vulnerability coming from a nested dependency (#dep/xyz). The nested dependency is using axios 0.21.1 whichhas a vulnerability. I am supposed to upgrade to any compatible version above it.
When I added it to resolutions like below I don't see the update in yarn.lock file for the nested dependency. Please advise.
Below is my package.json file
package.json
{
"name" : "xyz",
dependencies: {
"#dep/xyz" : "2.3.4",
"axios": "^0.21.2"
},
"resolutions": {
"**/**/axios": "^0.21.2"
}
}
yarn.lock which gets created after yarn install of above
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
axios#^0.21.1, axios#^0.21.2:
version "0.21.4"
resolved "https:..."
integrity sha1-123...=
dependencies:
follow-redirects "^1.14.0"
"#dep/xyz#2.3.4":
version "2.3.4"
resolved "https:..."
integrity sha1-123...=
dependencies:
"#x/d1" "0.2.2"
"#y/d2" "0.9.2"
axios "^0.21.1"
You likely need to upgrade yarn. resolutions does not work with dependencies that have / in their name for yarn versions below 2. See https://github.com/yarnpkg/yarn/issues/4874
For starters, you don't need to do any resolution pinning. #dep/xyz#2.3.4 is pulling in axios with semver specification of "^0.21.1". In this context it will accept any version that is both >=0.21.1 and <0.22.0. You need only to use yarn to update the version of axios being resolved. I would advise AGAINST resolution pinning when you don't need to, because that can cause long-term incompatibility. If in the future axios has version >=0.22.0 that you or your dependencies are trying to consume, your resolution setting will force those down to be something within the range >=0.21.2 && <0.22.0.
More directly to your question - I don't see anything that looks wrong. The lockfile is doing exactly what I would expect. Your resolution of "axios#^0.21.2" is being respected, as it's pulling in 0.21.4 which abides by that (even though like I said a resolution is not necessary to achieve that). You haven't done any kind of resolution pinning associated with #dep/xyz (nor should you) so nothing is changed there.

How can I display my index.html using parcel?

I would like to display a project I am working on with parcel by typing parcel index.html
parcel charges then display this error message :
29 | "#parcel/transformer-sass": "^2.0.0-beta.2",
30 | "#parcel/transformer-vue": "^2.0.0-beta.2",
| ^^^^^^^^^^^^^^^^^^^^^^^^^ Found this conflicting local requirement.
31 | "#vue/component-compiler-utils": "^3.2.0",
32 | "sass": "^1.26.10",
Thanks for your help!
There are a variety of things that can cause this error, and it's impossible to say exactly what you need to do what without a more specific repro.
However, a little background information about where this error comes from could give you some pointers about where to look / what to try.
Parcel has a feature that will automatically install the dependencies that it needs using npm, yarn or pnpm. For example, suppose you add a .sass file to your project, but have not yet installed #parcel/transformer-sass - parcel tries to detect this and install it automatically. When it works, it's pretty magical, but when it goes wrong, you'll see errors like this.
Two things you can do to possibly fix or work around this error:
Make sure the versions of all parcel-related packages you have installed are aligned. (I see, for example, that you have lots of 2.0.0-beta.2 packages - now that 2.0.0 is released, upgrade to that (or whatever the current version of parcel is in the future).
As a last resort, try disabling auto-install by setting --no-autoinstall cli flag (see docs). You might still get other errors if there are plugins that are required that are not yet installed, but they might be more specific.

ES6 import and npm packages

Anyone got a link to documentation explaining exactly how ES6 import is supposed to work with npm packages (as opposed to javascript module files) ?
Also (and possibly related) a link to documentation on the use/significance of "module" as a top-level key in an npm package.json file ?
Eg. consider the following from juggle/resize-observer ;
package.json
{
...
"module": "lib/exports/resize-observer.js",
...
}
consumer javascript file
import { ResizeObserver } from '#juggle/resize-observer';
On the above import Chrome sends a request to the server for '#juggle/resize-observer' which is a directory..... so what happens next ? (I don't have a working instance of this and my server doesn't return anything yet as I don't know what it's supposed to / in what format ). Is this syntax only for use with some sort of build tool where it ultimately gets replaced with the actual file ?
I have looked at the npm site/googled and cannot find any relevant documentation.
UPDATE Still waiting for a link to relevant documentation (no relevant Google results at this time) but for anyone asking the same question: apparently you need your server to do "module resolution" . Alternatively you can use Snowpack or a bundler eg. Webpack.
Apparently npm/node packages are not packaged with browsers in mind or based on any W3C/Web Modules standard specification.
See here for module resolution info.
So at present to use an npm package in a browser you must do one of the following
use a bundler like webpack
use snowpack
use a CDN which resolves the module request
implement npm module resolution in your own server
Find the package entry point and use that in your ES6 import statement.
However, if the package's json "main" property changes in a subsequent update you
will need to update your code to reflect this.

react-native-router-flux undifine is not a function (evaluationg 'addListner')

I upgraded my router-flux version 0.27 to 0.30.
I am facing error of evaluating addListner I also submit it in the issue
4.0.0-beta.30 is broken as the last commit says
update dependencies, bump version - don't use, errors are possible!
4.0.0-beta.28 is broken too. Use 4.0.0-beta.27 instead.
In package.json, make sure you have exactly this:
"react-native-router-flux": "4.0.0-beta.27"
Don't include ^ otherwise your package manager will still install the .28 version (unless you have a yarn.lock at .27).

angular bootstrap older versions removed from npmjs?

We had been using version 0.11.0 of angular-bootstrap from npmjs. It appears that version is no longer available on npmjs. From the commands below does this mean that someone actually unpublished the older packages?
prompt:~$ npm view angular-bootstrap time
{ modified: '2015-01-12T06:48:54.881Z',
created: '2014-01-29T21:54:32.213Z',
'0.0.1': '2014-01-29T21:54:37.589Z',
'0.0.2': '2014-01-29T22:03:08.814Z',
'0.0.3': '2014-01-29T22:51:49.998Z',
'0.0.4': '2014-02-11T15:14:17.078Z',
'0.11.0': '2014-06-24T07:06:56.435Z',
'0.13.0-SNAPSHOT': '2014-12-02T13:05:43.151Z',
'0.12.0': '2015-01-12T06:46:41.986Z' }
prompt:~$ npm view angular-bootstrap versions
0.12.0
I agree, the package seems to have been unpublished. You can still access it from the github history, as follows:
$ npm install "angular-ui/bootstrap#0.11.0"
(note that you may not need quoting, but some shells will interpret the # as a comment-begin character.) You can also use this syntax in dependencies inside package.json
If you have a project in production that depends on this, you should probably make a fork of the angular-ui/bootstrap repository and point towards that.
(I had some difficulty making this work on Windows, but it looks like you're on a Unixy system, so you should be fine.)
Ticket discussing this and the future is at https://github.com/angular-ui/bootstrap/issues/1636