An error occured vue-apollo.js:55:4

[donLucho]

Version

3.0.3

Node and OS info

node v10.11.0 / yarn 1.94 / Linux Mint 18.3 Sylvia

Steps to reproduce

$ vue ui
or
$ vue ui -D
or
$ vue ui --headless -D

What is expected?

In normal cases, the port and address would be generated and I could consequently access the portal that would permit me to add, create or edit vue projects in lieu of "vue create" for version 3 projects or "vue init" for version 2 projects.

What is actually happening?

################

vue ui will not launch in either Chrome or Firefox (latest releases). The vague errors are visible in the developer tools and not in the terminal/Bash application.

For example, in Firefox Devtools I see the following:

Firefox can’t establish a connection to the server at ws://localhost:8000/graphql. ( client.js:426 )

In Chromium devtools, I see this:

Network error: Cannot use GraphQLSchema "[object Object]" from another module or realm. ( vue-apollo.js:56 )
Ensure that there is only one instance of "graphql" in the node_modules (etc., etc.)

But it is only after I HOVER over the line description (client.js:426) in Firefox that I am able to make a lick of sense at all out of the situation. If I am not mistaken, I think the WEBSOCKET ADDRESS ws://localhost:8000/graphql is pointing to on one of your contributor's workstation (Soda).

The generated hover-text reveals "webpack:///Users/soda/Projects/vue-cli/node_modules/subscriptions-transport-ws/dist/client.js:426" and not an address that is relative to MY OWN local instance of webpack.

In chrome, the error proposes a solution (as it relates to ApolloError.js:46) to the effect of:

a) Ensure that there is only one instance of "graphql" in the node_modules directory. If different versions of "graphql" are the dependencies of other relied on modules, use "resolutions" to ensure only one version is installed.

Then, suggests that I should visit [ https://yarnpkg.com/en/docs/selective-version-resolutions ]

...and it offers, b) a canned explanation to the effect of: "Duplicate "graphql" modules cannot be used at the same time since different versions may have different capabilities and behavior. The data from one version used in the function from another could produce confusing and spurious results."

In sum, the issue is with the reference to the Websocket address and how it presently points to "webpack:///Users/soda/Projects/vue-cli/node_modules/subscriptions-transport-ws/dist/client.js:426".

I strongly believe that I should not have to make exceptions in my browser (whether Firefox or Chromium) to permit web-socket addresses from (excuse the expression) "spurious" sources in the about:config settings.

Push a new minor version as soon as possible. I would love to work with vue ui on Linux. I thank you in advance for your prompt attention to this matter.

Cordially,

Luis Artavia \
Heredia, Costa Rica \
Front-end Web Developer Extraordinaire \

################

[grimzy]

A temporary solution would be to add resolutions in package.json:

"resolutions": {
    "graphql": "^0.13.2"
}

Then reinstall your packages.

References:

• https://yarnpkg.com/en/docs/selective-version-resolutions
• No Support for query operators in prisma 2 prisma/prisma#1928
• Ensure that there is only one instance of "graphql" in the node_modules directory graphql-boilerplates/typescript-graphql-server#136

[donLucho]

Mr. Grimzy (I like the icon of the ferocious lion, btw... hahaha!).

Dude, thanks. Your solution, indeed, works for use in Chrome, however, I am still precluded from using vue ui version 3 in Firefox.

In the latter instance with Firefox, I still get error messages.

I would have closed this issue but apparently Mr. Sodatea (Hello!) has self-assigned the ticket, thus, I will only comment further to build on top of what you had suggested.

Methodology
I checked out the three links per your suggestion. In fact, I had previously visited that link at the yarnpkg domain but was unclear on how to apply it. Plus, I previously had ran each yarn upgrade-interactive --latest and yarn global upgrade-interactive --latest but without first applying the resolutions field in package.json in the yarn GLOBAL instance on my linux box.

Therefore, I did the following:

• I popped open a terminal session at "~/.config/yarn/global/" and merely ran yarn upgrade-interactive --latest. Then, I saw some results and I opted to upgrade.
• Next, I ran rm -rf node_modules/ and immediately ran yarn install as mentioned in this step
• I experimented again with each vue ui (which opens in default browser Firefox on my box), then, with vue ui --headless which permits me to open localhost:8000 in Chromium.

I can confirm for you that the prescribed solution works in Chrome so I thank you for your quick response and your effort. Peace be with you, bro-man! --Luis

[donLucho]

Hey, Soda!

Xièxiè =)

[sisyphsu]

Meet the same issue.

"resolutions": {"graphql": "^0.13.2"} doesn't work at all.

[haoqunjiang]

@sisyphsu
Just released v3.0.4. Have you tried that?

[yohangdev]

Confirmed, solved in v3.0.4 🎉

[ssitcloud]

yeah, is solved v.3.0.4

[rockymontana]

I still get this error in version 3.0.5

[Nolaan]

I still get this error in 4.4.6

[donLucho]

Version

4.4.6

Node and OS info

node v14.5.0 / yarn 1.22.4 / Linux Mint 18.3 Sylvia

My advice to Nolaan

I created a new test project and could not replicate your error. Therefore, if you have not globally updated your 1) @vue/cli , 2) @vue/cli-init , 3) @vue/cli-service-global instances, then, do so now whether through npm or yarn, etc. (chimichangas ?!?!?)

Does your cli work?

I will concede this: a couple of days ago I had an issue with my CLI subsequent to performing a GLOBAL update through yarn and was informed of a "vue packages version mismatch". Therefore, I followed the advice found here.

As a result of that operation, I am no longer a) informed of any error; and b) I do not see any of this business in my global package located at ~/.config/yarn/global/package.json

  , "resolutions": {
    "graphql": "^14.0.2"
  }

Instead I only see this

{
  "dependencies": {
    "@vue/cli": "^4.4.6",
    "@vue/cli-init": "^4.4.6",
    "@vue/cli-service-global": "^4.4.6"
  }
}

I want to help you, too

If none of the previous advice is of any help, just file a new issue. Thank you.

[GalvinGao]

Can confirm this issue has now coming back in @vue/cli 4.4.1