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.
Related
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....
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.
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?
I am new to JavaScript unit testing. I am trying to test typescript classes and my tests are also written in typescript, which somewhat looks like below:
/// <reference path="../../typings/qunit/qunit.d.ts" />
import Utility1 = require("../utility");//This is script I want to test.
test("utility_test",function() {
...
var result = ...;
var expected = ...;
equal(result, expected, "Test failed");
})
I am using VS 2015 with chutzpah test adapter installed as shown here. To be clear I have installed this to extension to vs 2015: Chutzpah Test Runner Context Menu Extension, and Chutzpah Test Adapter for the Test Explorer and also added Chutzpah NuGet package.
Yet when I build my project, the test doesn't appear in the Test Explorer. And when I tried to run the test from context menu, it fails with this error: Error: Error: Called start() outside of a test context while already started.
Can anyone please let me know where I am going wrong?
EDIT
For the one looking for the solution with require.js, this here worked for me. Now my Chutzpah.json looks like below:
{
"Framework": "qunit",
"CodeCoverageExcludes": [ "*/require.config.js" ],
"TestHarnessReferenceMode": "AMD",
"TestHarnessLocationMode": "SettingsFileAdjacent",
"TypeScriptModuleKind": "AMD",
"AMDBaseUrl": "",
"EnableTestFileBatching": true,
"Compile": {
"Mode": "External",
"Extensions": [ ".ts" ],
"ExtensionsWithNoOutput": [ ".d.ts" ]
},
"References": [
{ "Path": "require.js" },
{ "Path": "require.config.js" },
],
"Tests": [
{ "Path": "jsTests" }
]
}
Chutzpah no longer bundles the Typescript compiler inside of it (as of version 4). You must tell Chutzpah where to find your generated .js files (or/and how to compile them if you want it to).
See the documentation for the Compile setting
as well as these code samples.
Most people will use the external compile mode when working with Visual Studio since VS can compile the .ts files for you and you just need to tell Chutzpah where to find them. That will look like this:
{
"Compile": {
"Mode": "External",
"Extensions": [".ts"],
"ExtensionsWithNoOutput": [".d.ts"]
},
"References": [
{"Includes": ["*/src/*.ts"], "Excludes": ["*/src/*.d.ts"] }
],
"Tests": [
{ "Includes": ["*/test/*.ts"], "Excludes": ["*/test/*.d.ts"] }
]
}
Here's my Ember-Data model:
Lrt.Option = DS.Model.extend({
option_relation_value: hasMany('option')
});
Here is an example of the JSON: (Shortened for the sake of this question)
{
"optionGroups": [],
"optionSubGroups": [
{
"id": "3",
"optionType": [
"80",
"81",
"82",
"83",
"84",
"248",
"278"
],
"title": "Option Group for 80"
}
],
"options": [
{
"id": "45",
"option_relation_value": [
"80"
]
},
{
"id": "80",
"option_relation_value": []
}
]
}
There are also "OptionGroup" and "OptionSubGroup" models which are sideloading options in.
The issue I'm having is that after adding in the 'hasMany' into the model, I can no longer do query the store for Options like this:
this.get('store').find('option')
It simply returns "0", however in the Ember Inspector, I get 400+ entries so I know the data loaded.
When using the chrome inspector and break on ALL Exceptions, it breaks on line 2246 of Ember-Data at the following line:
2246: Ember.assert('The id ' + id + ' has already been used with another record of type ' + type.toString() + '.', !id || !idToRecord[id]);
The error is:
"Cannot call method 'toString' of undefined"
"type" in this line is 'undefined'.
What am I doing wrong with this hasMany relationship?
I am using Ember-Data 1.0 Beta 2.
Technically, this is not side loading, it's really more like nested loading. That may have something to do with it.
For true side loading you'd want a structure like this as your outer SON response :
{
"option" : {
"id" : 3,
...
"options" : [45,80]
}
"options" : [
{ "id":45 , ... },
{ "id":80 , ... }
]
}
Here are the docs about JSON conventions : http://emberjs.com/guides/models/connecting-to-an-http-server/#toc_json-conventions The comments are an example of side loading.
I know that this works for separate model structures (post -> comment), but I'm not sure about self referential tree type structures.