How to use get-port package from a VS Code extension? - node.js

How can I use the get-port package from a VS Code extension? I was able to use get-port in a standalone typescript sample project here, but when I try to use the same tsconfig.json with a VS Code extension I get the following error in the developer extension host log file:
[2022-04-19 15:42:18.314] [exthost] [error] Activating extension undefined_publisher.vscode-test-getport failed due to an error:
[2022-04-19 15:42:18.314] [exthost] [error] Error [ERR_REQUIRE_ESM]: require() of ES Module /home/hakon/test/vscode/vscode-test-getport/out/extension.js from /usr/share/code/resources/app/out/vs/loader.js not supported.
Instead change the require of extension.js in /usr/share/code/resources/app/out/vs/loader.js to a dynamic import() which is available in all CommonJS modules.
at Function.<anonymous> (node:electron/js2c/asar_bundle:5:13331)
at Function.<anonymous> (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:104:32156)
The code can be found in the tsconfig branch here. The above failure happens when I execute the command "View Port" which the extension contributes.
The code uses the following tsconfig.json:
{
"compilerOptions": {
"module": "es6",
"target": "es6",
"outDir": "out",
"moduleResolution": "node",
"lib": [
"ES2020"
],
"sourceMap": true,
"rootDir": "src",
"strict": true
}
}
I first tried the original tsconfig.json that comes with the yo code generated "Hello world" template (see the main branch):
{
"compilerOptions": {
"module": "commonjs",
"target": "ES2020",
"outDir": "out",
"lib": [
"ES2020"
],
"sourceMap": true,
"rootDir": "src",
"strict": true
}
}
which fails at activation (not when executing the "Show Port" command as the first example above did):
Activating extension 'undefined_publisher.vscode-test-getport' failed: require() of ES Module /home/hakon/test/vscode/vscode-test-getport/out/extension.js from /usr/share/code/resources/app/out/vs/loader.js not supported.
Instead change the require of extension.js in /usr/share/code/resources/app/out/vs/loader.js to a dynamic import() which is available in all CommonJS modules..
Any idea how I can fix this?

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.

TypeScript compilation error, importing non default interface with curly braces

When compiling my TypeScript project, the compiler is throwing the following error:
node_modules/#types/domutils/index.d.ts:6:10 - error TS2614: Module '"../../domhandler/lib"' has no exported member 'DomElement'. Did you mean to use 'import DomElement from "../../domhandler/lib"' instead?
The offending line is:
import { DomElement } from "domhandler";
The problem is, in the typing file it is trying to import from, the DomElement interface is a non default exported interface as follows:
export interface DomElement {
attribs?: {[s: string]: string};
children?: DomElement[];
data?: any;
name?: string;
next?: DomElement;
parent?: DomElement;
prev?: DomElement;
type?: string;
}
If I remove the curly braces it does in fact work, but that seems problematic to me:
I was under the impression that only default exports can be imported without curly braces. Why is this import required without curly braces?
This issue is occurring in type definitions in the node-modules folder as provided by DefinitelyTyped. I do not want to change a dependency file. There are no related open issues in Github, so I assume it does work. In fact it works for a colleague with an older version of Node (v8) but that doesn't seem like it should make a difference.
Versions:
Node.js - 12.14.0
List item
TypeScript 3.7.2 (also tested not working on 3.7.4)
Type definitions for domhandler 2.4 (https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/domhandler)
Type definitions for domutils 1.7 (https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/domutils)
UPDATE
Here is my tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"target": "es6",
"noImplicitAny": true,
"moduleResolution": "node",
"sourceMap": true,
"outDir": "dist",
"baseUrl": ".",
"paths": {
"*": [
"node_modules/*"
]
}
},
"include": [
"src/**/*"
]
}
Based on info from aluanhaddad at GitHub I managed to get it compiling (and working), though I don't like the solution (because it's actually turning any checking for that module off).
I have removed typings to sanitize-html (and related domhandler etc.). TSC cries that it doesn't know "sanitize-html" module, so I've added a dummy module declaration inside my src folder.
src/sanitize-html.d.ts
declare module 'sanitize-html';
tsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
},
"lib": [
"es6",
"dom"
],
"include": [
"src/**/*",
"index.ts"
],
"exclude": [
"**/*.spec.ts"
]
}
build command:
tsc

Typescript Configuration to disable strict mode check for node_modules content

I am using protractor and typescript to write automation test script using "core-framework" node module which is also implemented in protractor and typescript. My automation test scripts are located under "Projects" folder.
Using below typescript configuration I want to perform typescript strict mode check on my project. But it is also performing strict-mode check for used "core-framework" node module.
My requirement is, how to exclude "core-framework" node module from strict mode check.
tsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"inlineSourceMap": true,
"declaration": false,
"noImplicitAny": false,
"rootDir": "Projects"
"strict": true,
"noUnusedLocals": true, /* Report errors on unused locals. */
"noUnusedParameters": true /* Report errors on unused parameters. */
},
"include": [
".\\Projects"
],
"exclude": [
".\\node_modules\\core-framework"
]
}
Compile with --noImplicitUseStrict compiler option
Add below line
"noImplicitUseStrict": true
 to "compilerOptions" in tsconfig.json.

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

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';

Resources