How to Import Apollo Client 3 for Vue Apollo? - vue.js

The release note of Vue-Apollo 3.04 stated that there is now a Apollo Client 3 support. As the Docs of Apollo Client 3 declare ApolloClient, InMemoryCache, HttpLink, are now all in one #apollo/client package - not like previous in single packages.
https://github.com/vuejs/vue-apollo/releases/tag/v3.0.4
https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/
However there is no change in the doc´s of Vue-Apollo (apollo-client -> #apollo/client ?) on how to apply the new changes. Also the Apollo Client 3 Doc´s stated that for Vue you have to import the ApolloClient from #apollo/client/core
So i tried it my own way, but my imports seems to fail. I got these Error Message from npmm run serve. Seems he wants to import some reactstuff.
ERROR Failed to compile with 8 errors 20:25:20
This dependency was not found:
* react in ./node_modules/#apollo/client/react/context/ApolloConsumer.js, ./node_modules/#apollo/client/react/context/ApolloContext.js and 6 others
To install it, you can run: npm install --save react
vue-apollo.js (from old project that worked)
import Vue from 'vue'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'
vue-apollo.js (with new apollo client 3)
import Vue from 'vue'
import { ApolloClient } from '#apollo/client/core'
import { InMemoryCache } from '#apollo/client/cache'
import { HttpLink } from '#apollo/client'
import VueApollo from 'vue-apollo'
package.json
"dependencies": {
"#apollo/client": "^3.1.3",
"core-js": "^3.6.5",
"graphql": "^15.3.0",
"js-cookie": "^2.2.1",
"subscriptions-transport-ws": "^0.9.18",
"vue": "^2.6.11",
"vue-apollo": "^3.0.4"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"vue-template-compiler": "^2.6.11",
"webpack-bundle-tracker": "^1.0.0-alpha.1"
},
Question
How to correct import the new apollo client 3 with vue apollo?

Alright after a break i tried this and it worked.
vue-apollo.js
import Vue from 'vue'
import { ApolloClient, InMemoryCache, HttpLink } from '#apollo/client/core';
import VueApollo from 'vue-apollo'
Now the compiler finds everything. Although in the Apollo Client 3 Doc i could only find one reference with the new Client 3 and Vue, it seems all react stuff comes from #apollo/client while Vue and other from #apollo/client/core.

Related

Vue CLI 5 with Vuetify SCSS variables and CSS imports

I work for an organization that try to migrate a project from Vue CLI 4 to Vue CLI 5.
The project uses Vuetify and we have SCSS files that are used in the styles/variables.scss file (required by Vuetify to customize style) and also used in Vue components files via #import (SCSS variables sometimes need to be in the <script> section).
Here some example that show how SCSS variables are used through the app:
// styles/variables.scss
#import "colors.scss";
$some-vuetify-sass-variable: $color // from (colors.scss)
// plugins/vuetify.js
import { primaryColor } from "#/style/colors.scss";
Vue.use(Vuetify);
const options = {
theme: {
dark: false,
themes: {
light: {
primary: primaryColor,
// ...
},
},
},
};
export default new Vuetify(options);
// Component.vue
<template>
<v-chip
:color="clearPrimaryColor"
text-color="primary"
/>
</template>
<script>
import { clearPrimaryColor } from "#/style/colors.scss";
export default {
name: "Component",
created() {
this.clearPrimaryColor = clearPrimaryColor;
}
}
</script>
<style lang="scss">
.some-class {
background-color: $clearPrimaryColor
}
</style>
During the Vue CLI migration, we also tried to upgrade some Vuetify dependencies (sass and vuetify-loader). Upgrading sass from 8 to 10 version triggers a compile sass error.
With this reproduction branch: https://github.com/KevinFabre/vue-cli-5-vuetify-scss-variables-in-js (sass 8.0.0), the project does compile.
And for this one: https://github.com/KevinFabre/vue-cli-5-vuetify-scss-variables-in -js/tree/error/sass-error (sass 10.0.0), it does not compile:
ERROR Failed to compile with 2 errors
error in ./src/styles/app.module.scss
Syntax Error: SassError: This file is already being loaded.
╷
2 │ #import "app.module.scss";
│ ^^^^^^^^^^^^^^^^^
╵
src/styles/variables.scss 2:9 #import
src/styles/app.module.scss 1:9 root stylesheet
Is there extra Vue CLI 5 configuration to allow CSS import in JS while using Vuetify sass override ?
We've submitted issues to vuetify-loader and Vue CLI but didn't receive any reply for now:
https://github.com/vuetifyjs/vuetify-loader/issues/234
https://github.com/vuejs/vue-cli/issues/7083
{
"devDependencies": {
"#babel/preset-env": "^7.11.0",
"#cypress/webpack-preprocessor": "^5.4.1",
"#mdi/font": "^6.5.95",
"#vue/cli-plugin-babel": "^4.4.5",
"#vue/cli-plugin-e2e-cypress": "^4.4.5",
"#vue/cli-plugin-eslint": "^4.4.5",
"#vue/cli-service": "^4.4.5",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.0.1",
"core-js": "^3.6.5",
"eslint": "^7.3.1",
"eslint-plugin-mocha": "^9.0.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-unused-imports": "^1.1.5",
"eslint-plugin-vue": "^7.0.0",
"eslint-plugin-vuetify": "^1.1.0",
"lint-staged": "^10.2.11",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"style-resources-loader": "^1.2.1",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-style-resources-loader": "^0.1.3",
"vue-cli-plugin-vuetify": "^2.0.6",
"vue-svg-loader": "^0.16.0",
"vue-template-compiler": "^2.6.12",
"vuetify-loader": "^1.7.3",
}
}
Thank you for your time.
Components must avoid importing files that are already imported in the global variables stylesheet (src/styles/variables.scss). This was the case with app.module.scss (loaded in src/styles/variables.scss and in src/components/HelloWorld.vue), causing the error about the file being loaded twice.
One solution is to move the color definitions from app.module.scss into its own file, and import that in variables.scss instead of app.module.scss. Then, components could import app.mdoule.scss without running into the original problem.
/* src/styles/app.module.scss *
:export {
whitecolor: $white-color;
darkcolor: $dark-color;
lightcolor: $light-color;
mediumcolor: $medium-color;
alertcolor: $alert-color;
lightblackcolor: $light-black-color;
blackcolor: $black-color;
}
/* src/styles/colors.scss */
$white-color: #fcf5ed;
$dark-color: #402f2b;
$light-color: #e6d5c3;
$medium-color: #977978;
$alert-color: #cb492a;
$light-black-color: #706e72;
$black-color: #414042;
/* src/styles/variables.scss */
#import "~vuetify/src/styles/settings/_colors.scss";
#import "colors.scss";
$material-light: (
background: map-get($grey, "lighten-1")
);
demo
This basically pertains to duplicate parsing of the import files, declared in your vuejs app.
There are 2 ways to solve it:
Use #use instead of #import where you are getting the Sass import error. Like, #import "app.module.scss"; becomes #use "app.module.scss";
Other alternative is to downgrade the sass-loader library to "^8.0.2"
Let me know if the above solutions work for you, meanwhile i will update my answer if i find any new solution.

Vue 3 Web Components do not build and instead throw error

I created a new vue project with the vue cli and then adjusted main.js to support web-components:
import Vue from 'vue';
import wrap from '#vue/web-component-wrapper';
import HelloWorld from "./components/HelloWorld";
const CustomElement = wrap(Vue, HelloWorld);
window.customElements.define('my-custom-element', CustomElement);
When running vue-cli-service build --target wc I get the following error:
ERROR Vue 3 support of the web component target is still under development.
I can not figure out why this error occurs and what i can do to fix it.
package.json:
...
"dependencies": {
"#vue/web-component-wrapper": "^1.2.0",
"core-js": "^3.6.5",
"vue": "^3.0.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "^4.5.4",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0"
},
...
I use #vue/cli version 4.5.9.
Hello there is a update in this. Topic see
issue on github and comment on twitter looks like with vue 3.2.0 we have this feature back i created a small stackblitz but as you can see styles are not applied
Vue-CLI does not currently support web components for Vue 3, but you can do it by hand. This worked for me.
src/MyLib.js
export { default as TheFoo } from '#/components/TheFoo.vue';
export { default as TheBar } from '#/components/TheBar.vue';
src/MyLib-WC.js
import { defineCustomElement } from 'vue';
import TheFoo from '#/components/TheFoo.vue';
import TheBar from '#/components/TheBar.vue';
const TheFooWC = defineCustomElement(TheFoo);
const TheBarWC = defineCustomElement(TheBar);
export {
TheFooWC,
TheBarWC
};
export function register () {
customElements.define('the-foo', TheFooWC);
customElements.define('the-bar', TheBarWC);
}
package.json
{
"scripts": {
"build": "npm run build-lib && npm run build-wc",
"build-lib": "vue-cli-service build --name=MyLib --modern --dest=dist/lib --target=lib src/MyLib.js",
"build-wc": "vue-cli-service build --name=MyLib --modern --dest=dist/wc --target=lib --inline-vue src/MyLib-WC.js"
}
}
Then npm run build.
As #tony19 pointed out the solution is to not use Vue3, as it cureently does not support web components.
The problem for me was the misleading error message, as "still under developement" did not signal to me, that web components were completly unsupported. I understood it, as a "not everything will work perfectly".

free-regular-svg-icons of vue-fontawesome not working

I am using Webpack + Vue + vue-fontawesome.
The code below works fine and display icons.
import #fortawesome/free-solid-svg-icons
But this one doesn't display icons.
import faCalendarCheck component in #fortawesome/free-regular-svg-icons
Similary, other components in #fortawesome/free-regular-svg-icons are not working.
Component do render comment line of HTML <\!---->.
Why #fortawesome/free-regular-svg-icons is not working?
main.js
// Font Awesome
import { library } from '#fortawesome/fontawesome-svg-core';
import {
faThLarge,
// faCalendarCheck,
faBell,
faAddressBook,
faCalculator,
faSitemap,
faEnvelope,
faWindowMaximize,
faFileAlt,
faNewspaper,
} from '#fortawesome/free-solid-svg-icons';
import {
faCalendarCheck,
} from '#fortawesome/free-regular-svg-icons';
library.add(faThLarge);
library.add(faCalendarCheck);
library.add(faBell);
library.add(faAddressBook);
library.add(faCalculator);
library.add(faSitemap);
library.add(faEnvelope);
library.add(faWindowMaximize);
library.add(faFileAlt);
library.add(faNewspaper);
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
Vue.component('font-awesome-icon', FontAwesomeIcon);
app.vue
<template>
<font-awesome-icon icon="calendar-check" />
</template>
package.json
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.2",
"#fortawesome/free-brands-svg-icons": "^5.2.0",
"#fortawesome/free-regular-svg-icons": "^5.2.0",
"#fortawesome/free-solid-svg-icons": "^5.2.0",
"#fortawesome/vue-fontawesome": "^0.1.1"
}
You need to specify a prefix for using non solid icons.
In your example this should work:
<font-awesome-icon :icon="['far', 'calendar-check']" />
More info can be found here.
One more tip - Instead of writing this:
library.add(faThLarge);
library.add(faCalendarCheck);
library.add(faBell);
etc...
you can simplify it to:
library.add(faThLarge, faCalendarCheck, faBell);

navigator is deprecated and has been removed even i don't use navigator

I don't use Navigator in my codes. But I am getting this error.
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.45.1",
"react-native-deprecated-custom-components": "^0.1.0",
"react-native-router-redux": "^0.2.2",
"react-redux": "^5.0.5",
"redux": "^3.7.0"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.0.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
}
Anyone can help me?
This happened to me when my IDE automatically added the following lines:
import * as AsyncStorage from "react-native";
which means: everything in that file, which won't work. Solved it by changing to this:
import AsyncStorage from "react-native";
Navigator is no longer supported in react native so this is no longer allowed:
import { Navigator } from 'react-native'
Remove the Navigator from 'react-native' imports and substitute it with this:
import { Navigator } from 'react-native-deprecated-custom-components';
Navigation experimental(Previously Navigator) has been removed from React Native and moved to a separate package react-native-deprecated-custom-components. It has been deprecated and not recommended. To fix your old code you can perform following steps
Install package react-native-deprecated-custom-components
npm install react-native-deprecated-custom-components --save
Import NavigationExperimental(Previously Navigator)
import NavigationExperimental from 'react-native-deprecated-custom-comreponents';
Replace Navigator with NavigationExperimental.Navigator

React Native with Native Base (Unexpected Token Error)

I have React Native and Native Base configured. When I deploy the app for Android it throws me an error stating that an unexpected token was found near where Container component is present in my code.
My package.json file is:
{
"name": "React Native POC",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"native-base": "^0.5.18",
"react": "15.4.1",
"react-native": "0.39.2",
"react-redux": "^4.4.6",
"redux": "^3.6.0"
},
"devDependencies": {
"babel-jest": "17.0.2",
"babel-preset-react-native": "1.9.0",
"jest": "17.0.3",
"react-test-renderer": "15.4.1"
},
"jest": {
"preset": "react-native"
}
}
Could it be that certain versions are not working well with the other?
Additionally (if it matters) I am using Node version 6.8.1, npm version 3.10.8 and react-native-cli 2.0.0. Also, I have yarn, sinopia and browserify installed globally.
Still a beginner with React Native and I cannot tell if any dependency clashes may be present (obvious or otherwise)
My js file is:
import React, {Component} from 'react';
import {Container, Content} from 'native-base';
export default class ReactNativePOC extends Component {
render() {
return {
<Container> // Error here
<Content>
</Content>
</Container>
}
}
}
There does not seem to be any problem with my setup (excluding native base) as I can run a react native app with default controls however I seem to be getting this error only for native base controls
The return statement should use parentheses instead of braces.
render() {
return (
<Container>
<Content>
</Content>
</Container>
);
}
Please check the basic syntax from docs of React Native
Check NativeBase KitchenSink - An example app with all the UI components of NativeBase.
Since you said you are beginner in React Native, you can check Native Starter Kit - A Starter Kit for React Native + NativeBase + Navigation Experimental + Redux + CodePush Apps