Migration from Angular 6 to Angular 7 cause error - Can't resolve 'core-js/es7/reflect' - node.js

Global Angular CLI: 7.3.8
Node v10.15.3
NPM 6.4.1
macos
I'm getting this error on npm start
ERROR in
./node_modules/#angular-devkit/build-angular/src/angular-cli-files/models/jit-polyfills.js
Module not found: Error: Can't resolve 'core-js/es7/reflect' in
'/Users/XXX/projects/XXX/node_modules/#angular-devkit/build-angular/src/angular-cli-files/models'
ERROR in ./src/polyfills.ts Module not found: Error: Can't resolve
'core-js/es7/reflect' in '/Users/XXX/projects/XXX/src'

To solve this issue I've added the following paths to compilerOptions in tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"paths": {
"core-js/es7/reflect": [
"node_modules/core-js/proposals/reflect-metadata",
],
"core-js/es6/*": ["node_modules/core-js/es"]
},
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2017",
"dom"
]
}
}

After Migrated to new Angular version, 'core-js/es6' or 'core-js/es7' Will not work.
You have to simply replace import 'core-js/es/'
For ex. import 'core-js/es6/symbol' to import 'core-js/es/symbol'
This will work properly.

just remove the number at the end of 'es' in the path, like 'core-js/es/reflect'. It worked for me.

I just copy all from my oldest project src/polyfills to the new imported. That's help ;) .

Getting this error in "#angular/cli": "~10.1.5" project:
Cannot find module 'core-js/es7/reflect' or its corresponding type declarations.ts(2307)
Solution:
import * as Reflect from 'core-js/es';

Related

Wildcard imports not working in node14 with es2020

I'm working on an express application and I'm having trouble with wildcard imports, such as import * as E from 'fp-ts/Either';
Error message:
Error \[ERR\_MODULE\_NOT\_FOUND\]: Cannot find module '/home/adam/code/rbsports/server/node\_modules/fp-ts/Either' imported from /home/adam/code/rbsports/server/dist/controllers/bracket.js
Did you mean to import fp-ts/lib/Either.js?
Are wildcard imports not supported for a node 14 app targeting es2020?
my tsconfig.json
{
"compilerOptions": {
"module": "es2020",
"target": "es2020",
"lib": ["es2020"],
"baseUrl": "src",
"esModuleInterop": true,
"outDir": "dist",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true
}
}
and im running the app with node --experimental-specifier-resolution=node . in the folder with package.json
relevant parts of package.json
{
...
"type": "module",
"main": "dist/app.js"
...
}
followed this stack overflow post and this github repo
This may be an issue with how you are importing. I think Either lives in fp-ts/lib/Either and you’re importing from fp-ts/Either
Edit: the error message you posted says this as well I’ve just noticed

How to add shortcuts to modules in Nodejs Typescript

So we have a ReactTs project and we implemented shortcuts to things like our utils folder, So instead of calling the relative path everytime we use it in a module we just call #utils. We did this by adding path in our tsconfig.json.
This feature looks so handy and clean we decided to do the same on our Nodejs Typescript application. But when we compile the project and run the compliled js project it returns an error that seems #utils is not found. is there a way over this? How can we tell to compile the #utils to the declared relative path?
tsconfig file:
{
"compilerOptions": {
"module": "commonjs",
"outDir": "./build",
"strict": true,
"baseUrl": "./",
"paths": {
"#interface": [
"interface/index.ts"
],
"#utils":[
"src/utils/index.ts"
]
},
"types": [
"node_modules/#types"
],
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
Project directory:
So to solve this I implemented this npm: https://www.npmjs.com/package/module-alias.

Cannot find declaration file for 'autobind-decorator' in typescript

I am using Typescript and I want to import 'autobind-decorator' package inside project but ı stuck here.
I am getting this error line while compiling:
cannot find declaration file for 'autobind-decorator'. Implicitly has an 'any' type
I also tried #types/autobind-decorator npm package, but it didn't work.
Is there any option to get rid of this compile error ?
Here is my tsconfig:
{
"version": "2.1.5",
"compilerOptions": {
"module": "commonjs",
"lib": ["es2015", "es2016", "dom"],
"sourceMap": true,
"noImplicitAny": true,
"target": "es6",
"jsx": "react",
"skipLibCheck": true,
"experimentalDecorators": true
},
"include": [
"./packages/ld-web/src/**/*"
],
"exclude": [
"**/node_modules",
"**/*.d.ts"
]
}
import :
import * as autobind from "autobind-decorator";
From the type declarations here it declares and exports as module,
You need to install the #types as:
npm install #types/autobind-decorator --save-dev
and import as:
import autobind = require("autobind-decorator");
This worked, not using import at all:
const { autobind } = require('autobind-decorator');
I still had errors at runtime, so I read the doc again
https://www.npmjs.com/package/autobind-decorator
and used
const { boundMethod } = require('autobind-decorator');
that works,
I tried again using import and it failed.

How do I figure out all the global imports and from where are those imported?

when I add the following line at the beginning of app.ts
const crypto = require('crypto');
I get the following error,
Cannot redeclare block-scoped variable 'crypto'
Seems like it has been globally imported from somewhere else,
this is how my tsconfig.json looks like
{
"compilerOptions": {
"allowJs": true,
"outDir": "./dist",
"target": "ES6",
"module": "commonjs",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": false,
"strictNullChecks": true,
"noUnusedLocals": true,
"types": [
"node"
],
"typeRoots": [
"./node_modules/#types"
],
"lib": ["es2015", "dom"]
},
"include": [
"./src/"
]
}
PS:
The above error is when I try to transpile it from terminal.
I am using VisualStdioCode, in VisualStdioCode it doesn't show any error as it points to,
/path/to/VisualStdioCode/Visual Studio
Code.app/Contents/Resources/app/extensions/typescript/node_modules/typescript/lib/lib.dom.d.ts
EDIT(solved):
The problem here was slightly different than cannot redeclare block scoped variable (typescript)
The aim of this question was to detect duplicate import source than use ES6 non explicit assignment to atomatically solve it for us.
The solution here was to import either from libs or node_modules and not to scope it unlike mentioned in answers there.
crypto is already a global read-only property in the browser, so TypeScript is keeping you from trying to overwrite it.
https://developer.mozilla.org/en-US/docs/Web/API/Window/crypto
But since you're using commonJS, you may be building for Node and maybe you didn't mean to include the "dom" typings in "lib"?

Error importing node modules in TypeScript

I had a problem this morning that was driving me crazy. I'll explain the issue and then I'll provide my answer below (so that others who come across this can get to a solution sooner).
It is very easy to duplicate the issue by just issuing these commands:
tsd query react --action install
mkdir src
echo "import React = require('react');" > src/foo.ts
I also included the following tsconfig.json file in src:
{
"version": "1.6.2",
"compilerOptions": {
"outDir": "./tsdir",
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"isolatedModules": false,
"jsx": "react",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"declaration": true,
"noImplicitAny": false,
"removeComments": true,
"noLib": false,
"preserveConstEnums": true,
"suppressImplicitAnyIndexErrors": true
},
"files": [
"foo.ts"
]
}
If I try to compile this by simply running the tsc (version 1.6.2) command inside src, I get:
foo.ts(1,24): error TS2307: Cannot find module 'react'.
What I find baffling here is that I've installed the react bindings with tsd but when I run tsc, I get this error. It looks like I've done everything right, so why the error?
So what I eventually figured out was that I need to explicitly include the typings file in my list of "files", i.e.,
{
"version": "1.6.2",
"compilerOptions": {
...
},
"files": [
"foo.ts",
"../typings/react/react.d.ts"
]
}
In other words, I had to include the typings files explicitly in the "files". I don't really know why. I thought tsc was smart enough to look for them itself.
If there is a better solution that doesn't involve having to list all the .d.ts files explicitly in "files", I'm all ears. But I just wanted to point out that this is at least a workaround.

Resources