How do I solve this Apollo Control Cache error? - apollo

I am trying to set up my server side backend and I'm hitting this error:
node_modules/apollo-cache-control/dist/index.d.ts:24:9 - error TS2717: Subsequent property declarations must have the same type. Property 'cacheControl' must be of type 'ResolveInfoCacheControl', but here has type '{ setCacheHint: (hint: CacheHint) => void; cacheHint: CacheHint; }'.
24 cacheControl: {
~~~~~~~~~~~~
node_modules/#nestjs/graphql/node_modules/apollo-server-types/dist/index.d.ts:140:9
140 cacheControl: ResolveInfoCacheControl;
~~~~~~~~~~~~
'cacheControl' was also declared here.

I just found a fix for this, You have to add this to your tsconfig.json file:
"skipLibCheck": true
My tsconfig.json looks like:
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es2015",
"noImplicitAny": false,
"moduleResolution": "node",
"sourceMap": true,
"outDir": "lib",
"baseUrl": "./",
"lib": ["es6", "esnext.asynciterable"],
"types": ["node"],
"skipLibCheck": true
},
"include": ["src/**/*"]
}
And also make sure to have all apollo packages to have same exact version.

Make sure all apollo packages (apollo-server, apollo-server-express, apollo-server-core) have the exact same version

In my case it was a bad import. I was importing import { VariableValues } from 'apollo-server-types/src' instead of import { VariableValues } from 'apollo-server-types'
I swear it was the auto-importer....

Related

How do I disable AWS CDK Metadata for path and assets automatically?

There are 3 types of metadata CDK is writing to CFN. Version, Path, and Assets.
There's documentation on how to disable version metatadata and it works fine, but i'm struggling with the rest. CLI options --path-metadata false --asset-metadata false work fine, but are kind of annoying.
I've been through CDK Source code trying to figure out key words to plug into cdk.json, but they are ignored. The following is verbose cdk output where it reads my settings and seems to ignore the 2 i care about.
cdk.json: {
"app": "python app.py",
"versionReporting": false, <-- custom, works as intended
"assetMetadata": false, <-- custom, doesn't seem to do anything
"pathMetadata": false, <-- custom, doesn't seem to do anything
"context": {
"#aws-cdk/aws-apigateway:usagePlanKeyOrderInsensitiveId": true,
"#aws-cdk/core:stackRelativeExports": "true",
"#aws-cdk/aws-rds:lowercaseDbIdentifier": true,
"#aws-cdk/aws-lambda:recognizeVersionProps": true,
"#aws-cdk/core:bootstrapQualifier": "myQualifier",
"aws:cdk:enable-path-metadata": false, <-- custom, produces namespace warnings
"aws:cdk:enable-asset-metadata": false, <-- custom, produces namespace warnings
}
}
merged settings: { <------------results of combined settings
versionReporting: false, <-- worked
pathMetadata: true, <--didn't work
output: 'cdk.out',
app: 'python app.py',
assetMetadata: true, <--didn't work
context: {
'#aws-cdk/aws-apigateway:usagePlanKeyOrderInsensitiveId': true,
'#aws-cdk/core:stackRelativeExports': 'true',
'#aws-cdk/aws-rds:lowercaseDbIdentifier': true,
'#aws-cdk/aws-lambda:recognizeVersionProps': true,
'#aws-cdk/core:bootstrapQualifier': 'myQualifier',
'aws:cdk:enable-path-metadata': false, <-- seems like a dud
'aws:cdk:enable-asset-metadata': false,<-- seems like a dud
},
debug: false,
profile: 'mycdkIAMUser',
toolkitBucket: {},
staging: true,
bundlingStacks: [ 'my-cdk-policies' ],
lookups: true
}
Looking at the CDK source code, it seems as if the CLI options are currently the only viable option.
Have a look at execProgram() lines 23 to 31:
const pathMetadata: boolean = config.settings.get(['pathMetadata']) ?? true;
if (pathMetadata) {
context[cxapi.PATH_METADATA_ENABLE_CONTEXT] = true;
}
const assetMetadata: boolean = config.settings.get(['assetMetadata']) ?? true;
if (assetMetadata) {
context[cxapi.ASSET_RESOURCE_METADATA_ENABLED_CONTEXT] = true;
}
The CLI options both default to true, which then override their respective context variables. Might warrant a bug report.

Polymer 2.x Build Error - Multiple global declarations of class with identifier Polymer.Element

For every element that I have defined in a Polymer 2.x project I get the following warning:
Multiple global declarations of class with identifier Polymer.Element
The build ultimately fails with a Promise rejection at ...\node_modules\polymer-build\lib\analyzer.js
Are these components improperly defined?
How can I properly build the project?
My polymer.json file is
{
"entrypoint": "index.html",
"shell": "src/shop-app.html",
"fragments": [
"src/lazy-resources.html"
],
"sources": [
"src/**/*",
"data/**/*",
"images/**/*",
"app.yaml",
"bower.json",
"manifest.json",
"sw-precache-config.js",
"Web.config"
],
"extraDependencies": [
"manifest.json",
"bower_components/webcomponentsjs/webcomponents-lite.js"
],
"lint": {
"rules": ["polymer-2-hybrid"]
},
"builds": [{
"js": {"minify": true},
"css": {"minify": true},
"html": {"minify": true}
}]
}
This error means that you load the same dependency from two different urls. For instance
myStuff/myApp.html
myOtherStuff/myApp.html
I had the same warning while building my Polymer 2 app. Probably because some of my elements import the same other elements and all of them extend Polymer.Element. I have checked all my elements for duplicate imports. Maybe some third party elements have duplicates, but my elements didn't.
So I added the warning to the ignore list in polymer.json:
{
"lint": {
"rules": [
"polymer-2"
],
"ignoreWarnings": ["multiple-global-declarations"]
},
...
}
I too had same warning and it was gone after cleaning bower_components and node_modules.

React+Typescript+Webpack4: Cannot find module '***.json'

I am trying to import the data from a .json file in a .tsx using following:
import data from "data/mockup.json"
but I got the error
Cannot find module 'data/mockup.json'
My webpack config looks like this:
const babelLoader = {
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: [
["#babel/preset-env", {
"targets": {
"browsers": ["last 2 versions", "safari >= 7"]
},
"modules": true
}]
]
}
};
module.exports = {
entry: {...},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json'],
alias: {
data: path.resolve(__dirname, 'src/app/data')
}
},
output: {...},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: /node_modules/,
use: [
babelLoader,
{
loader: 'ts-loader'
}
]
},
{
test: /\.js$/,
exclude: /node_modules\/(?!(dom7|swiper)\/).*/,
use: [
babelLoader
]
}
]
},
...
}
enter code here
I think the .json is built in webpack4 by default so there may be something wrong with my webpack config?
Version used:
webpack: v4.4.1
typescript: 2.7.2
declare module in d.ts file
declare module "*.json"
Add a field in tsconfig.json in compiler options
"typeRoots": [ "node_modules/#types", "./typings.d.ts" ],
Now import into file (.tsx)
import * as data from "./dat/data.json";
Webpack#4.4.1 and Typescript#2.7.2
Hope this helps!!!
Ref1: https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
Ref2: https://github.com/Microsoft/TypeScript-React-Starter/issues/12
Although answers are helpful to load the JSON file as a module, they are limited in many aspects
First: the typescript can load by default JSON files, you only need to add into tsconfig.json below line:
{
...
"resolveJsonModule": true,
...
}
second: the suggested solution will enable implicitly for type check and auto-completion
P.S. the attached image is from a tutorial that talks about the same subject click here to check more
Personnaly, uncommenting :
"allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
in the file tsconfig.json did the trick.
I found the hint here.

Debug bundled JavaScript file in Visual Studio 2017 with gulp-sourcemaps

I have an asp.Net Core application with AngularJS code with the following task in gulpfile.js:
gulp.task("concat_app:js", function () {
return gulp.src(js_app, { base: 'wwwroot/' })
.pipe(sourcemaps.init({
loadMaps: true,
identityMap: true,
largeFile: true
}))
.pipe(concat(paths.js_app_dest))
.pipe(sourcemaps.write('.', {
includeContent: false,
mapSources: function (sourcePath, file) {
return '../' + sourcePath;
}
}))
.pipe(gulp.dest("."));
});
If I try to debug in chrome everything is working fine and also my folder structure is correct:
structure in chrome developer tools
But when I try to debug in Visual Studio 2017, it seems not to be correctly mapped, because when I set a breakpoint, it appears in other files. I have tried the same using a tsconfig.json:
{
"compileOnSave": true,
"compilerOptions": {
"allowJs": true,
"sourceMap": true,
"target": "es5",
"jsx": "react",
"outFile": "wwwroot/js/app.js"
},
"include": [
"wwwroot/ngApp/*.js",
"wwwroot/ngApp/**/*.js"
],
"exclude": []
}
This generates a mapfile like this:
{
"version": 3,
"file": "app.js",
"sourceRoot": "",
"sources": [ "../ngApp/_app.js", "../ngApp/_config/appConfig.js" "..." ],
"names": [],
"mappings": "AAAA,CAAC;IACG,YAAY,..."
}
Here also it seems to be mapped somehow wrong, I set a breakpoint, it appears somewhere else. Also my webapplication is stopped, but I can't continue in Visual Studio.
I would prefer to use gulp-sourcemaps, but I had a hard time setting the right directory. Can this be a part of the problem, because my gulpfile.js is not located in the wwwroot-folder? project in visual studio
EDIT: It seems when using tsconfig the breakpoint is always set in the first file (_app.js). What am I missing here?

Custom build for Dojo 1.7.1 with Layer and CSS Optimization

With Dojo 1.6.x it was quite easy to create a custom build. In the end I only needed to include a dojo.js file, my application layer file and an optimized css file with all the styles. Simple and easy.
But with Dojo 1.7.x I don't get it. My goal is just to include an opmtimized dojo.js file, my application layer file with all my widgets and stuff and an optmized css file.
Here is my profile.js
var profile = {
releaseDir: "./release",
basePath: "..",
action: "release",
cssOptimize: "comments",
mini: true,
optimize: "closure",
layerOptimize: "closure",
stripConsole: "all",
selectorEngine: "acme",
packages:[
{
name: "dojo",
location: "./sources/dojo"
},
{
name: "dijit",
location: "./sources/dijit"
},
{
name: "dojox",
location: "./sources/dojox"
}
],
layers: {
"dojo/dojo": {
name: "myDojo.js",
include: [ "dojo/dojo" ],
boot: true,
dependencies: [ "dojo/parser", "dojo/data/ItemFileReadStore", "dijit/themes/tundra", "dijit/Dialog", "dijit/form/Form", "dijit/form/Button", "dijit/form/CheckBox", "dijit/form/ComboBox", "dijit/form/DateTextBox", "dijit/form/FilteringSelect", "dijit/form/NumberSpinner", "dijit/form/Textarea", "dijit/form/TextBox", "dijit/form/TimeTextBox", "dijit/form/ValidationTextBox", "dijit/layout/ContentPane", "dijit/layout/TabContainer", "dijit/Tooltip", "dojox/widget/ColorPicker" ]
}
},
resourceTags: {
amd: function (filename, mid) {
return /\.js$/.test(filename);
}
}
};
When I run the build a release is created. I found the dojo.js which has the size of about 580 KB uncompressed. But I did not fond my application file and the compressed css file with all styles.
What am I doing wrong?
Thanks, Ralf
Your layer specification seems to be incorrect. Try this instead:
layers: {
"dojo/myDojo": {
include: [ "dojo/parser", "dojo/data/ItemFileReadStore",
"dijit/themes/tundra", "dijit/Dialog", "dijit/form/Form",
"dijit/form/Button", "dijit/form/CheckBox",
"dijit/form/ComboBox", "dijit/form/DateTextBox",
"dijit/form/FilteringSelect", "dijit/form/NumberSpinner",
"dijit/form/Textarea", "dijit/form/TextBox",
"dijit/form/TimeTextBox", "dijit/form/ValidationTextBox",
"dijit/layout/ContentPane", "dijit/layout/TabContainer",
"dijit/Tooltip", "dojox/widget/ColorPicker"
],
boot: true
}
},
References
http://dojotoolkit.org/reference-guide/1.7/build/
http://dojotoolkit.org/documentation/tutorials/1.7/build/