I've this error, I'm using WebStorm.
/src/Component/Professori.tsx
Type error: Cannot compile namespaces when the '--isolatedModules' flag is provided. TS1208
I've also added the flag marked as false into tsconfig.json in this way
"isolatedModules": false
You should use the export keyword post to your component declaration, that in order to be aligned to the ECMAScript standards when declaring a public component. so it should look like that:
const professori = (props: any) => (
...
);
export default professori;
this will resolve the error.
Related
Hello Polymer Community:
New user here having a bit of trouble with lit-element with TS, and not sure why.
I have TS setup and working fine (compiled other TS examples).
Did npm install lit-element per Getting Started page.
https://lit-element.polymer-project.org/guide/start
Trying the TS example under the section: "Use LitElement TypeScript decorators" and getting all kinds of bad happening.
tsc my-element.ts results in complete fail:
my-element.ts:14:14 - error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.
14 export class MyElement extends LitElement {
my-element.ts:20:3 - error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option in your 'tsconfig' or 'jsconfig' to remove this warning.
20 foo = 'foo';
node_modules/lit-element/lib/updating-element.d.ts:102:38 - error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
102 export declare type PropertyValues = Map<PropertyKey, unknown>;
node_modules/lit-html/lib/parts.d.ts:18:63 - error TS2304: Cannot find name 'Iterable'.
18 export declare const isIterable: (value: unknown) => value is Iterable<unknown>;
node_modules/lit-html/lib/render.d.ts:16:29 - error TS2583: Cannot find name 'WeakMap'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
16 export declare const parts: WeakMap<Node, NodePart>;
node_modules/lit-html/lib/template-factory.d.ts:56:28 - error TS2583: Cannot find name 'WeakMap'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
56 readonly stringsArray: WeakMap<TemplateStringsArray, Template>;
node_modules/lit-html/lib/template-factory.d.ts:57:25 - error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
57 readonly keyString: Map<string, Template>;
node_modules/lit-html/lib/template-factory.d.ts:59:38 - error TS2583: Cannot find name 'Map'. Do you need to change your target library? Try changing the `lib` compiler option to es2015 or later.
59 export declare const templateCaches: Map<string, templateCache>;
Found 8 errors.
I have no idea how to press forward and really want to work with web components and TS for a new project.
My tsconfig.json is:
{
"compilerOptions": {
"target": "es6",
"module": "es6"
}
}
I have also tried with no tsconfig file. Same results.
Please kind people help point me in the right direction.
Thank you.
David
I had a similar problem, using version 3.9.3 of the TypeScript compiler, which I managed to solve by having this tsconfig.json:
{
"compilerOptions": {
"target": "es2015",
"lib": ["es2015"],
"module": "commonjs",
"experimentalDecorators": true
}
}
You need to include the dom library in tsconfig.json:
{
"compilerOptions": {
...,
"lib": [
...,
"dom"
]
}
}
I am trying to learn react redux api call
so I took an example and implemented in stackblitz but I am getting the below error when I select some channel and hit top news button
can you tell me how to fix it
providing my code and stackblitz below
https://medium.com/#lavitr01051977/basic-react-redux-app-with-async-call-to-api-e478e6e0c48b
https://stackblitz.com/edit/react-redux-realworld-j95tpu?file=actions/index.js
code
export function fetchPosts(channel) {
return function (dispatch) {
dispatch(requestPosts());
return fetch(`https://newsapi.org/v1/articles?source=${channel}&apiKey=${MY_API_KEY}`)
.then(response => response.json(),
error => console.log('An error occurred.', error),
)
.then((json) => {
dispatch(receivedPosts(json));
}, );
};
}
error
VM1672:37 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `TopNews`.
in TopNews (created by Connect(TopNews))
in Connect(TopNews) (created by App)
in div (created by App)
in App
in Provider
Uncaught (in promise) Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `TopNews`.
at invariant (invariant.js:42)
at instantiateReactComponent (instantiateReactComponent.js:74)
at instantiateChild (ReactChildReconciler.js:44)
at eval (ReactChildReconciler.js:71)
at traverseAllChildrenImpl (traverseAllChildren.js:77)
at traverseAllChildren (traverseAllChildren.js:172)
at Object.instantiateChildren (ReactChildReconciler.js:70)
at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:185)
at ReactDOMComponent.mountChildren (ReactMultiChild.js:224)
at ReactDOMComponent._createInitialChildren (ReactDOMComponent.js:703)
The actual problem is an import/export syntax issue. I'll walk you through how to find it.
The problem's real location is shown by the component stack trace:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `TopNews`.
in TopNews (created by Connect(TopNews))
in Connect(TopNews) (created by App)
in div (created by App)
in App
in Provider
If we look in TopNews.js, it only renders <h3>, <div>, and <NewsItem>. h3 and div are just basic tags, so it's probably NewsItem that's the problem.
At the top of TopNews.js, you have:
import { NewsItem } from '../components/NewsItem';
However, in NewsItem.js, you have:
export default NewsItem ;
So, you're doing a default export, but a named import, and so NewsItem is undefined in TopNews.js.
Try changing it to be import NewsItem from "../components/NewsItem" and it should work.
I found the following example in the Function.name documentation
const o = {
foo(){}
};
o.foo.name; // "foo";
The problem in typescript (typed here):
const o: { foo: () => void } = {
foo: () => {
}
};
o.foo.name;
comes when I want to retrieve
o.foo.name, where I will get an error
TS2339 (property "name" does not exist)
How can I deal with it, keeping the object typing?
I want to avoid having to cast the property "foo" like (<any>o.foo).name
PS: The use case is to keep the typing for further refactoring. For instance the following is safe to be refactored:
spyOn(o, (<any>o.foo).name)
While this one is not
spyOn(o, "foo")
PS 2: It seems retrieving function name could be problematic on ts: Get name of function in typescript
The problem is that this code only works for newer versions of Javascript. If you change the target on the typescript compiler settings to es2015 the problem goes away. If you target es5 the definitions for that version do not include the name property because it might not work on older Javascript runtimes.
If you are ok with targeting es2015, that is ok, if not you should come up with a different solution that works for es5.
If you are targeting an environment that supports this property but you don't yet trust the es2015 implementation for all features, you could just add the the Function interface the missing property. At the top level in one of your files you can redefine the Function interface, and this will be merged into the default definition, adding the extra property:
interface Function {
/**
* Returns the name of the function. Function names are read-only and can not be changed.
*/
readonly name: string;
}
Post ES2015, this:
const o: { foo: () => void } = {
foo: () => { }
};
console.log(o.foo.name);
should work just fine.
Check it in the Typescript Playground, and observe the produced JavaScript. You will see the common sections with the foo example you mentioned.
Here is the console, nice and clean:
Pre-ES2015, this wouldn't work and I think you would have to cast it, if targeting post-ES2015 is not an option.
I think what I am asking for is not possible OOB, but I want to confirm.
We are in a process of upgrading to ES6 (using Babel). Project is a web-site, using AMD (requirejs). I would like to turn a utility module (foolib) into ES6, but consume it from either ES6 (using import) or existing ES5/AMD module.
// foolib.es6
export { // as expected, this doesn't work
method1: function () { ... },
value1: 123.456
};
// consumer1.es6
import foolib from "foolib";
// consumer2.js
define(["foolib"], function (foolib) {});
I understand that the solution is to change foolib.es6 as follows:
export function method1() { ... };
export let value1 = 123.456;
However in reality number of entries returned from foolib is ridiculous. So I was hoping there is a way to export existing object literal without rewriting every line.
Furthermore, I realize that this is most likely impossible, due to the differences between AMD import (using define) and import mechanism (later works with exports object that has values hanging off of it, including default value, while former expects a single value to be returned).
One possible solution that I think might work is to export my object as default from foolib.es6, and then tweak requirejs default loader to inspect imported value for being an esModule and return default value: value && value.__esModule && value.default || value. Should this work? (I'm still hoping there is an easier solution).
The syntax you are using to export the object is invalid because you are not giving the object a name, so it cannot be a named export, and you are not specifying that it is the default export, so it cannot be the default export. Change it to be the default export:
// foolib.es6
export default {
method1: function () {},
value1: 123.456
}
// consumer.es6
import foolib from "foolib";
console.log(foolib.value) //=> 123.456
You can use the babel-plugin-add-module-exports Babel plugin to reinstate a default export as the value of module.exports in Node-land.
And as you discovered, make sure you include this plugin before any other -modules- plugins, for example transform-es2015-modules-amd.
This might be late but alternatively you can use the named export as well which is a little different from the default approach that #sdgluck mentioned.
const method1 = function () {};
const value1 = 123.456;
export { method1, value1 };
I like this approach because you can import them directly like
import { method1, value1 } from 'foolib';
without reaching out to the default variable.
I am using babel to transpile.
I have class BaseComponent which is extended by class Logger.
When I run new Logger() in the browser, I am getting this error
Class constructor BaseComponent cannot be invoked without 'new'
the code that throws this is:
var Logger = function (_BaseComponent) {
_inherits(Logger, _BaseComponent);
function Logger() {
_classCallCheck(this, Logger);
return _possibleConstructorReturn(this, Object.getPrototypeOf(Logger).call(this, "n")); //throws here
}
Due to the way ES6 classes work, you cannot extend a native class with a transpiled class. If your platform supports native classes, my recommendation would be, instead of using the preset es2015, use es2015-node5, assuming you're on Node 5. That will cause Babel to skip compiling of classes so that your code uses native classes, and native classes can extend other native classes.
Another solution is to include { exclude: ["transform-es2015-classes"] } in .babelrc
presets: [
["env", { exclude: ["transform-es2015-classes"] }]
]
UPDATE: In the latest version of "env" preset plugin names have changed (e.g. it's now "transform-classes"). Use the "debug" option to inspect which plugins are included.