TypeScript Cannot find name 'Promise' intellisense error - typescript2.0

I am getting a red squiggly intellisense error in TypeScript 2.1.4, Visual Studio 2015 Update 3 saying Cannot find name 'Promise', for example the following code shows the error on both uses of Promise:
/// <reference path="../typings/index.d.ts" />
import 'fetch';
import {HttpClient, json} from 'aurelia-fetch-client';
import {inject} from 'aurelia-framework';
import {BearerToken} from './common/bearer-token';
export class ApiToken
{
....
public getTokenSimplified(): Promise<BearerToken>
{
let tokenResult: BearerToken;
let p = new Promise<BearerToken>(function (resolve, reject)
{
// my code ommited
});
return p;
}
....
}
The TypeScript does compile without an error so I can get by with this, but I'd like to find a solution. Does anyone know how to solve this? Having researched StackOverflow and Github I have tried the following:
npm install es6-promise --save, and import {Promise} from 'es6-promise' added to the top of the source file
This does cause the red squiggly to disappear but leads to the build error "Type Promise is not assignable to type Promise. Two different types with this name exist but they are unrelated."
Installing and referencing npm's ts-promise incurs the same "Two different types with this name exist" error.
typings install dt~es6-shim --save --global
This causes duplicate definitions, e.g. Duplicate identifier 'PropertyKey' in lib.es2015.core.d.ts
typings install dt~es6-promise --save --global
This causes error Duplicate identifier 'Promise' in lib.es2015.iterable.d.ts
typings install bluebird --source npm --save
This fails with the compile time error "Type Promise is not assignable to type 'Bluebird'" because HttpClient returns Javascript Promises, not Bluebird promises.
npm install es6-shim --save and npm install #types/es6-shim --save-dev
This causes duplicate definitions, e.g. Duplicate identifier 'PropertyKey' in lib.es2015.core.d.ts
npm install es6-promise --save and npm install #types/es6-promise --save-dev
causes error Duplicate identifier 'Promise' in lib.es2015.iterable.d.ts
in tsconfig.json, modifying "lib": ["es2015", "dom"] to "lib": ["es2015", "es2015.promise", "dom"] did not fix the problem.
tscconfig.json as follows :
{
"compileOnSave": false,
"compilerOptions": {
"rootDir": "src",
"outDir": "dist",
"sourceMap": true,
"target": "es5",
"module": "amd",
"declaration": false,
"noImplicitAny": false,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"lib": ["es2015", "dom"],
"baseUrl": "./",
"paths": {
"src/*": ["src/*"]
}
},
"filesGlob": [
"./src/**/*.ts",
"./test/**/*.ts",
"./typings/index.d.ts",
"./custom_typings/**/*.d.ts",
"./jspm_packages/**/*.d.ts"
],
"exclude": [
"node_modules",
"jspm_packages",
"dist",
"build",
"test"
],
"atom": {
"rewriteTsconfig": false
}
}
Perhaps I am not referencing the required library correctly so if someone can point out the error I'd appreciate it.

Try this config for libs
"lib": ["es2015", "dom", "es6"]
If other types are missing (Request, Response, BufferSource URLSearchParams,...) please send your typings.json file.

Related

How to setup SASS/SCSS/sass-loader in Nuxt

I have a Nuxt app and I want to use the CSS pre-processor.
I installed the sass-loader fibers dependencies, but after installation, a message appears in the application console, which I presented in the image and in the code
This is code err:
WARN webpack#5.49.0 is installed but ^4.46.0 is expected 17:22:44
WARN sass-loader#12.1.0 is installed but ^10.1.1 is expected
Rule can only have one resource source (provided resource and test + include + exclude) in { 17:22:46
"use": [
{
"loader": "/home/sergey/all_project/pro_projects_all_language/empty/node_modules/babel-loader/lib/index.js",
"options": {
"configFile": false,
"babelrc": false,
"cacheDirectory": true,
"envName": "server",
"presets": [
[
"/home/sergey/all_project/pro_projects_all_language/empty/node_modules/#nuxt/babel-preset-app/src/index.js",
{
"corejs": {
"version": 3
}
}
]
]
},
"ident": "clonedRuleSet-29[0].rules[0].use[0]"
}
]
}
"use": [
{
"loader": "node_modules/babel-loader/lib/index.js",
"options": {
"configFile": false,
"babelrc": false,
"cacheDirectory": true,
"envName": "server",
"presets": [
[
"node_modules/#nuxt/babel-preset-app/src/index.js",
{
"corejs": {
"version": 3
}
}
]
]
},
"ident": "clonedRuleSet-29[0].rules[0].use[0]"
}
]
}
at checkResourceSource (node_modules/#nuxt/webpack/node_modules/webpack/lib/RuleSet.js:167:11)
at Function.normalizeRule (node_modules/#nuxt/webpack/node_modules/webpack/lib/RuleSet.js:198:4)
at node_modules/#nuxt/webpack/node_modules/webpack/lib/RuleSet.js:110:20
at Array.map (<anonymous>)
at Function.normalizeRules (node_modules/#nuxt/webpack/node_modules/webpack/lib/RuleSet.js:109:17)
at new RuleSet (node_modules/#nuxt/webpack/node_modules/webpack/lib/RuleSet.js:104:24)
at new NormalModuleFactory (node_modules/#nuxt/webpack/node_modules/webpack/lib/NormalModuleFactory.js:115:18)
at Compiler.createNormalModuleFactory (node_modules/#nuxt/webpack/node_modules/webpack/lib/Compiler.js:636:31)
at Compiler.newCompilationParams (node_modules/#nuxt/webpack/node_modules/webpack/lib/Compiler.js:653:30)
at Compiler.compile (node_modules/#nuxt/webpack/node_modules/webpack/lib/Compiler.js:661:23)
at node_modules/#nuxt/webpack/node_modules/webpack/lib/Watching.js:77:18
at AsyncSeriesHook.eval [as callAsync] (eval at create (node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:24:1)
at AsyncSeriesHook.lazyCompileHook (node_modules/tapable/lib/Hook.js:154:20)
at Watching._go (node_modules/#nuxt/webpack/node_modules/webpack/lib/Watching.js:41:32)
at node_modules/#nuxt/webpack/node_modules/webpack/lib/Watching.js:33:9
at Compiler.readRecords (node_modules/#nuxt/webpack/node_modules/webpack/lib/Compiler.js:529:11)
I tried reinstalling dependencies, reinstalling a completely clean Nuxt application, and still the problem remains.
To install SASS in Nuxt, you have to run yarn add -D sass sass-loader#10.1.1 (or npm i -D sass-loader#10.1.1 --save-exact && npm i -D sass).
The version of sass-loader needs to be exact and set at the latest 10.x.x because the next one (11.0.0) is using Webpack5, hence being a breaking change because Nuxt2 is only running on Webpack4 as shown here: https://github.com/webpack-contrib/sass-loader/releases
IF then, you still cannot use <style lang="sass"> in your .vue components, then proceed.
Add this to your nuxt.config.js file
export default {
build: {
loaders: {
sass: {
implementation: require('sass'),
},
scss: {
implementation: require('sass'),
},
},
}
}
Here is a working repo with the latest recommended sass (dart-sass) setup working properly with this kind of code
<template>
<div>
<span class="test">
Hello there
</span>
</div>
</template>
<style lang="sass" scoped>
div
.test
color: red
</style>
PS: if SASS is properly installed, then SCSS is working as good because it's basically the same thing.
If you have some warning on some things being deprecated like / for divison or any listed here: https://sass-lang.com/documentation/breaking-changes
You can refer to this answer for a fix: https://stackoverflow.com/a/68648204/8816585
kissu's answer worked for me, but not right away. Finally I managed to fix the problem by downgrading the loader also followed by removing and installing again nuxt.

How to workaround the "Unexpected Token Operator (>)" error when packaging a React app?

I am having some problems building the distributable package for a React app.
I'm trying to execute the following sentence:
rimraf dist && env-cmd .env cross-env NODE_ENV=production webpack -p --config ./config/webpack/prod.js
And receiving this error:
ERROR in a86e50ffd4893c44fdfd.app.js from UglifyJs Unexpected token:
operator (>) [a86e50ffd4893c44fdfd.app.js:10679,43]
The line indicated in that trace corresponds to one of the libraries being loaded as dependencies, and not to the actual code of my app. This is the line itself (line 10679 corresponds to the declaration of the const method with the arrow function):
const DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES = '';
/* unused harmony export DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES */
const getAllColumnLabels = (columnLabels) => {
const columnNames = [];
columnLabels.forEach((value) => {
columnNames.push(value.label);
});
return columnNames;
};
At first I thought it could be related to Babel config, but it is identical to another project which is building correctly. The content of my .babelrc file is shown below, loaded using babel-preset-env:
{
"presets": [
[
"env", {
"modules": false,
"targets": {
"browsers": [
"Chrome >= 52",
"FireFox >= 44",
"Safari >= 7",
"Explorer 11",
"last 4 Edge versions"
]
},
"useBuiltIns": true
}
]
]
}
An additional test to rule out some possibilities has been done using the default presets for Babel, though no success was achieved with this test.
{
"presets": [
[
"env",
{
"modules": false
}
]
]
}
The settings in tsconfig.json could also be of interest, so i'm showing them here even though they also are identical to the ones in this another project mentioned above, which builds correctly:
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"lib": ["dom", "es2017"],
"moduleResolution": "node",
"declaration": false,
"noImplicitAny": false,
"sourceMap": true,
"jsx": "react",
"noLib": false,
"allowJs": true,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
},
"compileOnSave": true,
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
I've tried to delete node_modules and re-install the dependencies, also played setting uglify to false in the env for Babelrc, but surprisingly (at least, to me!) it didnt help.
There is a thread in the webpack-contrib Github site which is marked as closed but I didnt find anything that helped me.
Any ideas? I have some experience with npm but this issue certainly is blocking me.
Thanks!
Updating webpack to version 4 (currently 4.17) solved the problem. A few other dependencies needed to be updated to work properly with webpack 4, most importantly the Extract Text Webpack Plugin hasn't at this moment a stable release that works with webpack4, but the 4.0.0-beta works around the issue and may be used until a better replacement is found.

Module build failed: Error: index.ts is missing from the TypeScript compilation

Description of the project: My project is downloading to node_module via package.json
Package.json
....
dependencies:{
....
"#myllc/application-core": "git+ssh://git#bitbucket.org/myllc/application-core.git",
"#myllc/application-shared":"git+ssh://git#bitbucket.org/myllc/application-shared.git",
}
....
Gotting error when doing "npm build":
ERROR in ./node_modules/#myllc/application-core/index.ts Module
build failed: Error:
/var/www/frontend-skeleton/node_modules/#myllc/application-core/index.ts is missing from the TypeScript compilation. Please make sure it is in
your tsconfig via the 'files' or 'include' property. The missing file
seems to be part of a third party library. TS files in published
libraries are often a sign of a badly packaged library. Please open an
issue in the library repository to alert its author and ask them to
package the library using the Angular Package Form at
(https:// goo.gl/jB3GVv).
This appear after upgrade from Angular4 to Angular5:
Tsconfig:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"lib": [
"es2016",
"dom"
],
"typeRoots": [
"node_modules/#types"
]
}
}
I tried to add
"include": [
"./node_modules/#myllc/**/*"
]
but there appear same error at deeper folder .ts file. Also founding
https://github.com/angular/angular-cli/issues/8284
but nothing solved this error.
What is the solution?
The solution is found in index.ts is not part of the compilation. #8284 by tapaz1 :
2 tsconfig.json files, one at the root of the app, and the other inside the src folder (one level down from the root) named tsconfig.app.json that extends the main tsconfig.json. I explicitly added the package that I needed that wasn't being transpiled by Typescript in the "include" array, and like a lot of people here I was getting the *.spec.ts files included despite having them in "exclude" option, so I removed it from the tsconfig.json. The fix was adding the "exclude" option to the second (extended) tsconfig.app.json file.
tsconfig.app.json:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../dist",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"exclude": [
"../node_modules/your_package/**/*.spec.ts"
]
}

Can't get Express #types working

I'm trying to get the Express #types working but without any success. I'm using Visual Studio Code and I'd really love to have the autocompletition working. So far I've seen that installing the #types it gives the autocompletition too.
Things that I've done:
Installed express with npm: npm i -g express
Installed express-generator with npm: npm i -g express-generator
Generated the project with express-generator
cd into the project
Ran npm i
Installed types with npm: npm i --save-dev #types/express
// Top of the file:
var express = require('express');
app.use(function (req, res: Express.Response, next) {
var err: any = new Error('Not Found');
//if I try to use res.end() it gets underlined in red
res.end('some text');
});
As you can see the Express.Response was suggested by vscode, so this kinda confuses me. How can you find the Express.Response type but not it's methods?
The 'funny' fact is that in plain js everything works. Am I missing something or doing something wrong?
Here's my tsconfig.json file if it can help:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"lib": [
"es2016",
"dom"
]
}
}
Any help will be really appreciated!
Solved by myself
For some reason now import * as express from 'express' now gives me the correct completition and type checking. However trying this before didn't worked. That's odd, however closing it as solved.

TypeScript bundling not working for External Modules

I've a sample TypeScript code and I'm trying to bundle multiple ts/tsx files using typescript compiler (tsc).
Here is the code:
File: ISample.ts
class ISample{
constructor(public value:string){
}
}
export = ISample;
File: Sample.ts
import ISample = require('./ISample');
class SampleImpl{
value: ISample;
constructor(sample:number){
this.value = new ISample(sample+'');
}
}
File: tsconfig.json
{
"compilerOptions": {
"module": "amd",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"jsx": "react",
"outFile": "./dist/bundle.js",
"target": "es3",
"listFiles": true,
"sourceMap": false
},
"files": [
"./src/Sample.ts",
"./src/ISample.ts"
]
}
When I run the command:
tsc
bundle.js is generated but it is completely blank.
Observations:
The problem doesn't occur when I move the code to Internal Modules
The problem also doesn't occur when I omit the import/require statement and use a declaration for ISample class, but in that case bundle.js does not contain the code of ISample class
Any ideas why this is happening?
This is not supported for now: Suggestion: multi-file external modules.
There are a set of workarounds, e.g. Compile TypeScript with modules and bundle to one file