We Keep Coding

ERROR Extension entrypoint(s) missing while I'm trying to package a developed vscode extension with vsce

I'm developing a VSCode extension to automate some edit & search processes. Everything runs Ok! in the Extension Development Host but when I try to package the extension with vsce inside the extension's folder the app responds with this error:
ERROR Extension entrypoint(s) missing. Make sure these files exist and aren't ignored by '.vscodeignore':
extension/extension.js
At the extension's manifest(package.json) the entrypoint to the extension code is defined in the "main" key:
...
"activationEvents": [
"onCommand:extension.findBlock"
],
"main": "./extension.js",
"contributes": {
"commands": [
{
"command": "extension.findBlock",
"title": "Find Block"
}
],
...
In the extension's folder everything is as the visual studio extension generator(yo) left it.
.
├── block_finder.code-workspace
├── CHANGELOG.md
├── extension.js
├── findBlock.png
├── jsconfig.json
├── node_modules
├── package.json
├── package-lock.json
├── prueba.txt
├── README.md
├── test
└── vsc-extension-quickstart.md
Am I missing something? I don't understand what could be happening. My VSCode version is 1.65.2 and vsce is 2.7.0. Thanks!

I came back to say that I solved the problem by uninstalling the npm manager. The version I had installed was old and I noticed that in the installation of the extension requirements it installed packages with warnings of deprecated versions. I uninstalled npm and did a clean install and my extension started working as expected. Sorry for leaving this post open and thanks for all the help you have given me.

How to structure a simple yarn package for local sharing

I want to create a simple yarn package that can be installed by multiple local yarn projects using yarn add link:/path/to/package. Imagine the package of the package to be shared looks like this
├── package.json
├── tsconfig.json
└── src
├── generated
│   ├── abc.js
│   ├── abc.d.ts
│   └── def.js
│   └── def.d.ts
My goal is that abc and def should be accessible like this
import * from "myPackage/abc"
Currently if I install the above package with yarn add link:/path/to/package then I have to do
import * from "myPackage/src/generated/abc"
I'm a rookie on making typescript packages so forgive me. Can someone point me in the right direction here?
I've tried the suggestion here but it doesn't make a difference.

So it seems I need to set exports and typesVersions in package.json
"exports": {
"./": "./src/generated/"
},
"typesVersions": {
"*": {
"abc": [
"./src/generated/abc.d.ts"
],
"def": [
"./src/generated/def.d.ts"
],
}
},

Imported class in angular is undefined

I have an npm project with the following structure:
app-dep
├── dist
│ ├── bundle.js
│ └── bundle.js.map
├── node_modules/
├── package.json
├── package-lock.json
├── src
│ ├── base-component.ts
│ ├── factory.ts
│ ├── app.ts
│ └── modules/
├── tsconfig.json
└── webpack.config.js
My app.ts code has an App class that utilizes all .ts files inside src/
export default class App extends HTMLElement { //some-content }
I use webpack to build a bundle.js inside the dist/ folder.
I have another angular project where I install this app-dep project using
npm install --save ../app-dep
When I try to use it in my angular component:
import App from 'app-renderer/dist/bundle';
ngOnInit() {
window.customElements.define('micro-app', App);
}
I get this error:
Failed to execute 'define' on 'CustomElementRegistry': parameter 2 is not of type 'Function'
When I try to log it on console, all I can see is undefined.
It seems that I can't import basic functions even.
Can you tell me what's wrong?

I think the problem has to do with the import or the pack, I ellaborate below with the steps to follow.
Also, make sure that you are exporting all the classes that you want to make available from the outside.
For TypeScript libraries
You can simply use "tsc" and then pack the generated code inside the dist folder with "npm pack" and install the dependency in your application with "npm install ".
This may get complicated due to the different module systems and bundlers, check this links for more info on Webpack:
https://marcobotto.com/blog/compiling-and-bundling-typescript-libraries-with-webpack/
https://webpack.js.org/guides/author-libraries/
For CSS libraries
The "npm pack" has to be executed in the root folder. You may want to process your styles with sass before and only pack the result.
For Angular libraries
By default with Angular CLI when you build a library project the code is generated in /dist/mylibrary folder.
If you want to use that code in other project, the steps are:
Build your library with "ng build mylibrary" (add --prod for production).
From your library, move into /dist/mylibrary folder and then execute a "npm pack", that will generate a tgz package.
From your application in which you want to use the library execute "npm install " to install the dependency.
To import code from the library use "import * from 'mylibrary'"
Other option would be using "npm link", that creates a link between your node_nodules and the library code as explained here:
https://www.willtaylor.blog/complete-guide-to-angular-libraries/
That would be the way to go with local libraries, usually these libraries are published into Npm repository (public or private) and installed remotely with "npm install ". These steps are only for local usage.

React Native 'unable to resolve module `moment-timezone`' despite it being in node_modules

I'm trying to run a React Native project, lucy-app, which manages its packages through Yarn. In the src directory there is a utils.js:
Kurts-MacBook-Pro-2:lucy kurtpeek$ tree lucy-app/src -L 1
lucy-app/src
├── actions.js
├── api.js
├── app.js
├── components
├── containers
└── utils.js
Both moment and moment-timezone appear in package.json:
{
"name": "app",
"version": "0.0.1",
"private": true,
"scripts": {
},
"dependencies": {
"moment": "^2.19.0",
"moment-timezone": "^0.5.14",
There is a moment-timezone directory in node_modules:
/Users/kurtpeek/Documents/dev/lucy/lucy-app/node_modules
Kurts-MacBook-Pro-2:node_modules kurtpeek$ find . -name 'moment-timezone'
./moment-timezone
The utils.js file imports moment-timezone as follows:
import moment from 'moment-timezone';
However, when I try to run react-native run-ios, I get the following error:
error: bundling failed: Error: Unable to resolve module `moment-timezone` from `/Users/kurtpeek/Documents/Dev/lucy/lucy-app/src/utils.js`: Module does not exist in the module map or in these directories:
/Users/kurtpeek/Documents/Dev/lucy/lucy-app/node_modules
This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
1. Clear watchman watches: `watchman watch-del-all`.
2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
3. Reset Metro Bundler cache: `rm -rf $TMPDIR/react-*` or `npm start -- --reset-cache`. 4. Remove haste cache: `rm -rf $TMPDIR/haste-map-react-native-packager-*`.
at ModuleResolver.resolveDependency (/Users/kurtpeek/Documents/Dev/lucy/lucy-app/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:311:1719)
at ResolutionRequest.resolveDependency (/Users/kurtpeek/Documents/Dev/lucy/lucy-app/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:96:16)
at DependencyGraph.resolveDependency (/Users/kurtpeek/Documents/Dev/lucy/lucy-app/node_modules/metro/src/node-haste/DependencyGraph.js:269:4352)
at /Users/kurtpeek/Documents/Dev/lucy/lucy-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:201:36
at Generator.next (<anonymous>)
at step (/Users/kurtpeek/Documents/Dev/lucy/lucy-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:256:306)
at /Users/kurtpeek/Documents/Dev/lucy/lucy-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:256:536
at new Promise (<anonymous>)
at /Users/kurtpeek/Documents/Dev/lucy/lucy-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:256:217
at addDependency (/Users/kurtpeek/Documents/Dev/lucy/lucy-app/node_modules/metro/src/DeltaBundler/traverseDependencies.js:256:92)
BUNDLE [ios, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
Following the suggestions, I've tried rm -rf node_modules followed by yarn install, but I'm still getting the same error. Any ideas what is going wrong here?

ESLint configuration woes

I am trying to use an eslint workflow. I have installed Node via nvm and the nessary plugins globally:
├── babel-eslint#6.0.2
├── eslint#2.7.0
├── eslint-config-angular#0.5.0
├── eslint-config-semistandard#6.0.1
├── eslint-config-standard#5.1.0
├── eslint-plugin-angular#1.0.0
├── eslint-plugin-promise#1.1.0
├── eslint-plugin-standard#1.3.2
├── npm#3.8.3
├── standard#6.0.8
And locally in my project:
"devDependencies": {
"eslint": "2.7.0",
"eslint-config-angular": "0.5.0",
"eslint-config-standard": "5.1.0",
"eslint-config-semistandard": "6.0.1",
"eslint-plugin-angular": "1.0.0",
"eslint-plugin-promise": "1.1.0",
"eslint-plugin-standard": "1.3.2"
},
And I have set up an .eslintrc.json file in my project root:
{
"env": {
"browser": 1
},
"extends": "semistandard",
"plugins": [
"standard","angular"
],
"globals": {
"angular": 1,
"$": 1,
"angularDragula": 1
}
}
The Atom ESlint and standard-formatter plugins find and respect my config file, but it not the command line or the Sublime Linter. It does not read the config, so I get errors flagged:
Which make it obvious it's not reading the settings. What am I doing wrong here? As I said, it works in Atom but not command line or Sublime (which uses the command-line options).

I'd recommend against using a global installation of ESLint. If you want to run it to lint the files in your project, you can use:
node_modules/.bin/eslint feedback-alerts.controller.js
Or, better yet, create an npm script for the task. In your package.json, you can add:
"scripts": {
"lint": "eslint feedback-alerts.controller.js"
}
Furthermore, it looks like you are using a config file that is not in your project root (~/.eslintrc.json is in your user root, not project root). ESLint will do its own config resolution, so you should not have to specify the path to the config file except in advanced cases.