I am using #nestjs/graphql as follow:
//app.module.ts
GraphQLModule.forRoot({
driver: ApolloDriver,
typeDefs: [my custom typedefs],
resolvers: [my custom resolvers],
introspection: true,
installSubscriptionHandlers: true,
dataSources: () => {
return {
...
} as DataSources<RESTDataSource>;
}
})
package.json:
"dependencies": {
"#apollo/gateway": "^2.0.0",
"#azure/storage-blob": "^12.5.0",
"#nestjs/apollo": "^10.0.19",
"#nestjs/axios": "^0.1.0",
"#nestjs/common": "^9.0.0",
"#nestjs/config": "^2.0.0",
"#nestjs/core": "^9.0.0",
"#nestjs/graphql": "^10.0.21",
"#nestjs/platform-express": "^9.0.1",
"#nestjs/serve-static": "^2.1.4",
"apollo-datasource-rest": "^3.4.0",
"apollo-server": "^3.10.0",
"applicationinsights": "^2.3.1",
"axios": "^0.21.1",
"axios-mock-adapter": "^1.20.0",
"axios-request-throttle": "^1.0.0",
"azure-devops-node-api": "^11.1.1",
"execution-time": "^1.4.1",
"graphql": "^16.5.0",
"graphql-parse-resolve-info": "^4.12.0",
"graphql-request": "^3.4.0",
"limiter": "^2.1.0",
"nest-neo4j": "^0.1.5",
"pluralize": "^8.0.0",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"rxjs": "^7.1.0",
"tedious": "^11.4.0",
"ts-morph": "^15.1.0",
"win-node-env": "^0.4.0",
"winston": "^3.7.2",
"winston-azure-application-insights": "^4.0.0"
}
I have angular ui for which nestjs is backend server. After updating #nestjs/graphql from 7.x.x to 10.x.x playground is not working and getting console error as below.
core.js:6498 ERROR Error: Uncaught (in promise): Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
Error: BrowserModule has already been loaded. If you need access to common directives such as NgIf and NgFor from a lazy loaded module, import CommonModule instead.
at new BrowserModule (platform-browser.js:1527:1)
at Object.BrowserModule_Factory [as factory] (platform-browser.js:1549:58)
at R3Injector.hydrate (core.js:11457:1)
at R3Injector.get (core.js:11276:1)
at core.js:11314:1
at Set.forEach (<anonymous>)
at R3Injector._resolveInjectorDefTypes (core.js:11314:1)
at new NgModuleRef$1 (core.js:25345:1)
at NgModuleFactory$1.create (core.js:25399:1)
at MapSubscriber.project (router.js:3680:1)
at resolvePromise (zone.js:1211:1)
at resolvePromise (zone.js:1165:1)
at zone.js:1278:1
at _ZoneDelegate.invokeTask (zone.js:406:1)
at Object.onInvokeTask (core.js:28679:1)
at _ZoneDelegate.invokeTask (zone.js:405:1)
at Zone.runTask (zone.js:178:1)
at drainMicroTaskQueue (zone.js:585:1)
Tried multiple versions of #nestjs/graphql, no luck.
This was due to incompatible dependency version for #nestjs/serve-static. Fixed after bumping major version.
Related
My Source code is:
import Vue from "vue";
console.log('Vue', Vue)
With this packages versions:
"#vue/cli": "4.5.15",
"#vue/cli-plugin-babel": "^5.0.1",
"#vue/cli-service": "4.5.15",
"#vue/compiler-sfc": "^3.2.31",
"#vue/component-compiler-utils": "^3.1.2",
But it shows me an error when i mount app.js file to html.
Uncaught TypeError: Cannot convert undefined or null to object
at hasOwn (<anonymous>)
at t.exports (well-known-symbol.js:16:26)
at Object.c04e (to-primitive.js:10:20)
at a (bootstrap:79:22)
at Object.a04b (to-property-key.js:1:19)
at a (bootstrap:79:22)
at Object.06cf (object-get-own-property-descriptor.js:6:21)
at a (bootstrap:79:22)
at Object.23e7 (export.js:2:32)
at a (bootstrap:79:22)
May be it problem with ES versions or something else, idk how to google it, help pls with any proposals
I've changed my package.json from
"vuex": "^4.0.2",
"vue-cli": "^2.9.6",
"#vue/cli": "4.5.15",
"vue-loader": "^16.0.0-beta.8",
"vue-router": "^4.0.13",
"#vue/cli-plugin-babel": "^5.0.1",
"#vue/cli-service": "4.5.15",
"#vue/compiler-sfc": "^3.2.31",
to
"vue": "2.6.*",
"vue-template-compiler": "^2.0.0",
"webpack-cli": "^4.9.2",
"webpack-dev-middleware": "^5.3.1",
"#vue/cli": "^5.0.1",
"#vue/cli-plugin-babel": "^5.0.1",
"#vue/cli-service": "^5.0.1",
"babel-loader": "^8.2.3",
And app complied without this error.
Hi I am using custom components on Vuetify v2.2, which are throwing error during build.
I can't figure out, what's the problem with Vuetify v2.2
because Vuetify v2.1.15 was working well.
Thrown error message:
ERROR in ./node_modules/vuetify/src/components/VCalendar/VCalendarDaily.sass (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-1-3!./node_modules/vuetify/src/components/VCalendar/VCalendarDaily.sass)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
TypeError: Cannot read property 'type' of undefined
at /home/ubuntu/chainflix-nuxt-tar/node_modules/vuetify/src/components/VCalendar/VCalendarDaily.sass:1:257
at stringifyNode (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss-value-parser/lib/stringify.js:2:19)
at Function.stringify (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss-value-parser/lib/stringify.js:45:10)
at Gradient.colorStops (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/hacks/gradient.js:503:26)
at Gradient.oldWebkit (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/hacks/gradient.js:396:10)
at Gradient.replace (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/hacks/gradient.js:89:30)
at Gradient.add (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/value.js:148:20)
at Gradient.add (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/hacks/gradient.js:570:35)
at Gradient.process (/home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/prefixer.js:155:16)
at /home/ubuntu/chainflix-nuxt-tar/node_modules/autoprefixer/lib/processor.js:379:36
at /home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:190:18
at /home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:135:18
at Rule.each (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:101:16)
at Rule.walk (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:131:17)
at /home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:148:24
at Root.each (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:101:16)
at Root.walk (/home/ubuntu/chainflix-nuxt-tar/node_modules/postcss/lib/container.js:131:17)
# ./node_modules/vuetify/src/components/VCalendar/VCalendarDaily.sass 4:14-213
# ./node_modules/vuetify/lib/components/VCalendar/VCalendarDaily.js
# ./node_modules/vuetify/lib/components/VCalendar/index.js
# ./node_modules/vuetify/lib/components/index.js
# ./node_modules/vuetify/lib/index.js
# ./components/inc/vuetifyCustom/CTextarea/CTextarea.js
# ./components/inc/vuetifyCustom/CTextarea/index.js
# ./plugins/GlobalComponent.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi ./.nuxt/client.js
In CTextarea I imported VTextarea and VInput like this:
import { VTextarea, VInput } from 'vuetify/lib'
import 'vuetify/src/components/VTextarea/VTextarea.sass'
import { CTextField } from '../CTextField'
export default Vue.extend({
name: 'CTextarea',
extends: VTextarea.extend(),
///// etc custom codes
})
I think this error has some correlation with sass & postcss.
I hope to Build Successfully.
I must using Vue.config.optionMergeStrategies options in custom components.
My package dependencies & devDependencies
{
"dependencies": {
"#babel/runtime-corejs3": "^7.6.3",
"#nuxtjs/axios": "^5.8.0",
"#nuxtjs/moment": "^1.4.0",
"#nuxtjs/style-resources": "^1.0.0",
"base64toblob": "0.0.2",
"bigdecimal": "^0.6.1",
"camelcase-keys": "^5.2.0",
"core-js": "^3.3.6",
"cross-env": "^5.2.1",
"crypto": "^1.0.1",
"eventsource-polyfill": "^0.9.6",
"express": "^4.16.4",
"filestream": "^4.1.3",
"firebase": "^7.5.2",
"form-data": "^2.5.1",
"intersection-observer": "^0.7.0",
"ip-regex": "^4.1.0",
"morgan": "^1.9.1",
"nuxt": "^2.10.2",
"qrcode": "^1.4.3",
"snakecase-keys": "^2.1.0",
"socket.io-client": "^2.3.0",
"uuid": "^3.3.3",
"vue-clipboard2": "^0.3.1",
"vue-drag-drop": "^1.1.4",
"vue-google-charts": "^0.3.2",
"vue-i18n": "^8.15.0",
"vue-lottie": "^0.2.1",
"vue-ls": "^3.2.1",
"vue-qrcode": "^0.2.2",
"vuedraggable": "^2.23.2",
"vuejs-logger": "^1.5.3"
},
"devDependencies": {
"#babel/core": "^7.6.4",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-decorators": "^7.6.0",
"#babel/plugin-proposal-export-namespace-from": "^7.0.0",
"#babel/plugin-proposal-function-sent": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-proposal-numeric-separator": "^7.0.0",
"#babel/plugin-proposal-throw-expressions": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/plugin-syntax-jsx": "^7.0.0",
"#babel/plugin-transform-modules-commonjs": "^7.6.0",
"#babel/plugin-transform-regenerator": "^7.4.5",
"#babel/plugin-transform-runtime": "^7.6.2",
"#babel/plugin-transform-template-literals": "^7.2.0",
"#babel/preset-env": "^7.6.3",
"#babel/register": "^7.6.2",
"#babel/runtime": "^7.6.3",
"#nuxt/babel-preset-app": "^2.10.2",
"#nuxtjs/eslint-config": "^0.0.1",
"#nuxtjs/vuetify": "^1.10.1",
"babel-eslint": "^10.0.3",
"babel-loader": "^8.0.5",
"deepmerge": "^4.2.2",
"fibers": "^4.0.2",
"nodemon": "^1.19.4",
"prettier": "^1.16.4",
"regenerator-runtime": "^0.13.2",
"sass": "^1.23.3",
"vue-style-loader": "^4.1.2",
"webpack-bundle-analyzer": "^3.6.0"
},
}
If you need more informations, comment please. I really hope to fix it.
You do not have a postcss-loader package in your dependencies.
Have you tried installing it?
npm i -D postcss-loader
Personally i would prefer using the node-sass and sass-loader package as suggested in the nuxt docs: https://nuxtjs.org/faq/pre-processors/
npm install --save-dev node-sass sass-loader
Hope it helps!
I finally fixed.
This problem was my mistakes with Treeshakes.
so I fixed variable scss files and components direct import.
I hope someones are helpful with this.
In components
// wrong
import { VTextField } from 'vuetify/lib'
// Correct
import { VTextField } from 'vuetify/lib/components/VTextField'
In variable scss files. May you imported #import 'vuetify/src/styles/styles.sass';
That is need just a time in root file ( In webpack guild's options.prependData or options.data. )
#import 'vuetify/src/styles/styles.sass';
// some global values
// some components values
And... Use map-deep-merge, when you should fix color or such value in Object type(?).
$purple: ();
$purple: map-deep-merge(
(
'base': #6255c5
),
$purple
);
$shades: ();
$shades: map-deep-merge(
(
'black': #2D2935,
'white': #FFFFFF
),
$shades
);
Happy coding!
I am getting error "Module build failed: TypeError: this.setDynamic is not a function". What is wrong with my package.json?
The error appears after I update to babel 7:
npx babel-upgrade --write --install
package.json:
{
"private": true,
"scripts": {
// ...
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/plugin-proposal-class-properties": "^7.0.0",
"#babel/plugin-proposal-json-strings": "^7.0.0",
"#babel/plugin-syntax-dynamic-import": "^7.0.0",
"#babel/plugin-syntax-import-meta": "^7.0.0",
"#babel/plugin-transform-regenerator": "^7.0.0",
"#babel/plugin-transform-runtime": "^7.3.4",
"#babel/preset-env": "^7.0.0",
"axios": "^0.16.2",
"bootstrap-sass": "^3.4.1",
"cross-env": "^5.2.0",
"jquery": "^3.3.1",
"laravel-elixir": "^6.0.0-18",
"laravel-mix": "^1.7.2",
// ...
},
"dependencies": {
"#babel/runtime": "^7.3.4",
"babel-loader": "^8.0.0-beta.6",
"sass": "^1.17.3",
"vee-validate": "^2.1.7",
// ...
}
}
.babelrc :
{
"plugins": ["#babel/plugin-transform-runtime"]
}
Stack trace
ERROR in ./resources/assets/js/app-home.js
Module build failed: TypeError: this.setDynamic is not a function
at PluginPass.pre (projectpath\node_modules\babel-plugin-transform-runtime\lib\index.js:31:12)
at transformFile (projectpath\node_modules\#babel\core\lib\transformation\index.js:78:27)
at runSync (projectpath\node_modules\#babel\core\lib\transformation\index.js:45:3)
at runAsync (projectpath\node_modules\#babel\core\lib\transformation\index.js:35:14)
at process.nextTick (projectpath\node_modules\#babel\core\lib\transform.js:34:34)
at process._tickCallback (internal/process/next_tick.js:61:11)
# multi ./resources/assets/js/app-home.js ./resources/assets/sass/app.scss
ERROR in multi ./resources/assets/js/app-home.js ./resources/assets/sass/app.scss
Module not found: Error: Can't resolve 'sass-loader' in 'projectpath'
# multi ./resources/assets/js/app-home.js ./resources/assets/sass/app.scss
I got package.json:
"devDependencies": {
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"bootstrap-datepicker": "^1.7.1",
"browser-sync": "^2.24.6",
"browser-sync-webpack-plugin": "^2.0.1",
"chart.js": "^2.7.2",
"cross-env": "^5.2.0",
"datatables": "^1.10.18",
"easy-pie-chart": "^2.1.7",
"font-awesome": "4.7.0",
"fullcalendar": "^3.9.0",
"jquery": "^3.3.1",
"jquery-sparkline": "^2.4.0",
"jvectormap": "^2.0.4",
"laravel-mix": "^2.1.11",
"load-google-maps-api": "^1.2.0",
"lodash": "^4.17.10",
"masonry-layout": "^4.2.2",
"perfect-scrollbar": "^1.1.0",
"popper.js": "^1.14.3",
"skycons": "^1.0.0",
"vue": "^2.5.16"
}
with webpack.mix:
mix.sass('resources/assets/styles/index.scss', 'public/css/app.css')
.js('resources/assets/scripts/index.js', 'public/js/app.js')
.copyDirectory('resources/assets/static', 'public/static')
.version()
.sourceMaps();
and resource file:
so those files, looks like compiled properly by webpack >> npm run dev
then I load it to blade template, but then in browser it show me that: jQuery is not defined...
Uncaught ReferenceError: jQuery is not defined
what's possibly went wrong here, why It can load jQuery while i have define it in package.json?
THanks!
few mins later after I posted the question...
here is the answer...
add this to your webpack:
mix.webpackConfig(webpack => {
return {
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
})
]
};
});
Here is my package.json:
{
"name": "DFS",
"version": "1.0.0",
"description": "DFS App",
"author": "asd",
"private": true,
"nodemonConfig": {
"delay": "2500"
},
"scripts": {
"postinstall": "npm run build",
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
"e2e": "node test/e2e/runner.js",
"test": "npm run unit && npm run e2e",
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
"deploy": "git subtree push --prefix dist heroku master"
},
"dependencies": {
"axios": "^0.16.2",
"connect-history-api-fallback": "^1.5.0",
"express-sslify": "^1.2.0",
"global": "^4.3.2",
"heroku-ssl-redirect": "0.0.4",
"less": "^3.0.1",
"less-loader": "^4.0.5",
"node-sass": "^4.7.2",
"npm-watch": "^0.3.0",
"sass-loader": "^6.0.6",
"style-loader": "^0.20.2",
"vee-validate": "^2.0.0-rc.14",
"vue": "^2.3.3",
"vue-router": "^2.3.1",
"vuetify": "^1.0.3",
"vuex": "^3.0.1",
"webpack-dev-server": "^3.0.0",
"webpack-watch": "^0.2.0"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^7.1.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-istanbul": "^4.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chai": "^3.5.0",
"chalk": "^2.0.1",
"chromedriver": "^2.27.2",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"cross-env": "^5.0.1",
"cross-spawn": "^5.0.1",
"css-loader": "^0.28.0",
"cssnano": "^3.10.0",
"eslint": "^3.19.0",
"eslint-config-standard": "^6.2.1",
"eslint-friendly-formatter": "^3.0.0",
"eslint-loader": "^1.7.1",
"eslint-plugin-html": "^3.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.2.0",
"eslint-plugin-promise": "^3.4.0",
"eslint-plugin-standard": "^2.0.1",
"eslint-plugin-vue": "^4.0.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"inject-loader": "^3.0.0",
"karma": "^1.4.1",
"karma-coverage": "^1.1.1",
"karma-mocha": "^1.3.0",
"karma-phantomjs-launcher": "^1.0.2",
"karma-phantomjs-shim": "^1.4.0",
"karma-sinon-chai": "^1.3.1",
"karma-sourcemap-loader": "^0.3.7",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.2",
"lolex": "^2.0.0",
"mocha": "^3.2.0",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^2.0.0",
"ora": "^1.2.0",
"phantomjs-prebuilt": "^2.1.15",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"sinon": "^2.1.0",
"sinon-chai": "^2.8.0",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"sw-precache-webpack-plugin": "^0.11.4",
"ts-loader": "^3.5.0",
"uglify-es": "^3.0.25",
"url-loader": "^0.5.8",
"vue-loader": "^12.1.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.3.3",
"webpack": "^2.6.1",
"webpack-bundle-analyzer": "^2.2.1",
"webpack-cli": "^2.0.9",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
My main.js:
import Vue from 'vue'
import Vuetify from 'vuetify' // eslint-disable-line no-unused-vars
// import App from './App'
// import router from './router'
Vue.use(Vuetify)
// Vue.config.productionTip = false
new Vue({ // eslint-disable-line no-new
el: '#app',
// router,
template: '<div>hi there</div>'
// components: { App },
// template: '<App/>'
})
My App.vue
<template>
<div>
123
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
I am using Heroku for the app hosting. When I try to visit site with desktop browser all is okay, but when I try to load it via mobile browser it shows the blank page.
For the other hand deploying this repo: https://github.com/deepak-singh/vue-blog-pwa
is successfully done and loading via mobile or desktop browser is successful.
Also I found that this line causes blank page in my vue app:
Vue.use(Vuetify)
But! This line is present in vue-pwa-blog repo file. So I can not understand what may I doing wrong?
This is happening because when a PWA is installed and opened on a phone it rewrites the URL to /index.html whereas the vuetify app is rendered at /.
Just re-adjust your vue-router to load the component at /index.html too and it should work.
Your router.js could look something like this:
{
path: '/',
name: 'App',
component: App
},
{
path: '/index.html',
name: 'App',
component: App
}
My routers are like this:
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '#/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/index.html',
name: 'HelloWorld',
component: HelloWorld
}
]
})
Still blank page.. If i remove my Vue.use(Vuetify) from main.js works..
Package.json ->
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuetify": "^1.1.6"
},