Can't run vscode extension app in certain vscode versions - visual-studio-code

I created a vscode extension app and it works perfectly for some versions of vscode and not for others. So far, I've noticed this issue only in mac, but doesn't mean the same issue might happen for other versions of windows. In mac, when I try my extension app on version 1.40.2 it doesn't seem to work. There is no option to run my app in command palette or context menu. It's missing. But if I try it on version 1.55.2 (Universal) then the extension app appears and runs successfully in context menu and command palette no problem.
When I run it on my mac on version 1.40.2, I get the dialog message Extension is not compatible with Code 1.40.2. Extension requires: ^1.55.0.
Another error I've seen is in the console it come up with this error, which I created a new project by running yo code in that problem vscode version and hit F5 on a fresh template and I still got this error so not sure if it's related or not.
Error: Invalid problemMatcher reference: $ts-webpack-watch
Error: Invalid problemMatcher reference: $tslint-webpack-watch
I've also seen this error too
Why am I having a version compatibility issue? I don't think it's something in my extension.ts file because if I remove all my code ie
'use strict';
import * as vscode from 'vscode';
const ncp = require("copy-paste");
const os = require('os');
let folderOutput: string;
let fileOutput: vscode.Uri;
export function activate(context: vscode.ExtensionContext) {
let disposable = vscode.commands.registerCommand('my-app.startApp', async (uri: vscode.Uri) => {
});
context.subscriptions.push(disposable);
}
then the issue is still there so that eliminates that file from being the issue. I appreciate any help!
Package.json
{
"name": "my-app",
"displayName": "my app",
"description": "does something interesting",
"version": "0.0.1",
"engines": {
"vscode": "^1.55.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:my-app.startApp"
],
"main": "./dist/extension.js",
"contributes": {
"commands": [
{
"command": "my-app.startApp",
"title": "Start My App"
}
],
"menus": {
"editor/context": [
{
"command": "my-app.startApp"
}
]
}
},
"scripts": {
"vscode:prepublish": "npm run package",
"compile": "webpack",
"watch": "webpack --watch",
"package": "webpack --mode production --devtool hidden-source-map",
"test-compile": "tsc -p ./",
"test-watch": "tsc -watch -p ./",
"pretest": "npm run test-compile && npm run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js"
},
"devDependencies": {
"#types/vscode": "^1.55.0",
"#types/glob": "^7.1.3",
"#types/mocha": "^8.0.4",
"#types/node": "^12.11.7",
"eslint": "^7.19.0",
"#typescript-eslint/eslint-plugin": "^4.14.1",
"#typescript-eslint/parser": "^4.14.1",
"glob": "^7.1.6",
"mocha": "^8.2.1",
"typescript": "^4.1.3",
"vscode-test": "^1.5.0",
"ts-loader": "^8.0.14",
"webpack": "^5.19.0",
"webpack-cli": "^4.4.0"
},
"dependencies": {
"copy-paste": "^1.3.0",
"simple-git": "^2.38.0"
}
}

Related

Sanity Deployment on Vercel Issue: Cannot find module 'sanity' even though package is installed

So i'm trying to deploy sanity/nextjs on vercel. It runs fine locally but for the production build I keep getting the same error.
Here's the main error:
> build
> next build
info - Linting and checking validity of types...
Failed to compile.
./sanity/sanity.config.ts:1:28
Type error: Cannot find module 'sanity' or its corresponding type declarations.
> 1 | import {defineConfig} from 'sanity'
| ^
2 | import {deskTool} from 'sanity/desk'
3 | import {visionTool} from '#sanity/vision'
4 | import {schemaTypes} from './schemas'
Error: Command "npm run build" exited with 1
My sanity package.json:
{
"name": "nft-drop",
"private": true,
"version": "1.0.0",
"main": "package.json",
"license": "UNLICENSED",
"scripts": {
"dev": "sanity dev",
"start": "sanity start",
"build": "sanity build",
"deploy": "sanity deploy",
"deploy-graphql": "sanity graphql deploy"
},
"keywords": [
"sanity"
],
"dependencies": {
"#sanity/vision": "^3.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-is": "^18.2.0",
"sanity": "^3.0.0",
"styled-components": "^5.2.0"
},
"devDependencies": {
"#sanity/cli": "^3.2.3",
"#sanity/eslint-config-studio": "^2.0.1",
"eslint": "^8.6.0",
"prettier": "^2.8.3",
"typescript": "^4.0.0"
},
"prettier": {
"semi": false,
"printWidth": 100,
"bracketSpacing": false,
"singleQuote": true
}
}
My main folder package.json:
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#next/font": "^13.1.2",
"#sanity/image-url": "^1.0.1",
"#thirdweb-dev/react": "^3.6.9",
"#thirdweb-dev/sdk": "^3.6.9",
"ethers": "^5.7.2",
"next": "latest",
"next-sanity": "^4.0.6",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"#sanity/cli": "^3.2.3",
"#types/node": "18.11.3",
"#types/react": "18.0.21",
"#types/react-dom": "18.0.6",
"autoprefixer": "^10.4.12",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.4",
"typescript": "4.9.4"
}
}
Thanks for your help.
I've checked that I have the 'sanity' package installed. I've added the recommended 'vercel.json' file and I also have the #sanity/cli installed. I've checked my local env setup to make sure that was also on vercel.
Maybe i've overinstalled the sanity packages in trying to solve it?
This is my first time using sanity, nextjs, and vercel so I've run out of ideas and haven't found the same issue answered elsewhere yet.
I had this issue as well, and it seems to be related to Sanity v3 which only came out a month ago - I rolled back to sanity v2 and it fixed the deployment issue
You can try to add .vercelignore in the root file and add sanity in there to ignore the whole folder
The fix is to move your sanity client config file (aka wherever you have your .env variables setup - in my case: sanity.ts) into a lib folder in the root directory. If the file itself is in the root directory, it will not build.
Updating the import statement from
import {defineConfig} from 'sanity'
to
import {defineConfig} from 'sanity/lib/exports'
worked for me.

Why No Matching Commands when I init my first vscode extension?

I init my first vscode extension following this page.
Here is my steps:
npm install -g yo generator-code
yo code
And here is the package.json generated:
{
"name": "helloworld",
"displayName": "helloworld",
"description": "description helloworld",
"version": "0.0.1",
"engines": {
"vscode": "^1.72.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:helloworld.helloWorld"
],
"main": "./out/extension.js",
"contributes": {
"commands": [
{
"command": "helloworld.helloWorld",
"title": "Hello World"
}
]
},
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "tsc -p ./",
"watch": "tsc -watch -p ./",
"pretest": "npm run compile && npm run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js"
},
"devDependencies": {
"#types/glob": "^8.0.0",
"#types/mocha": "^10.0.0",
"#types/node": "16.x",
"#types/vscode": "^1.72.0",
"#typescript-eslint/eslint-plugin": "^5.38.1",
"#typescript-eslint/parser": "^5.38.1",
"#vscode/test-electron": "^2.1.5",
"eslint": "^8.24.0",
"glob": "^8.0.3",
"mocha": "^10.0.0",
"typescript": "^4.8.4"
}
}
When I press H5 to debug, I got no command matched here:
I was stuck here for a while, where is my command??
I've encountered this just now as well. Make sure that engines.vscode in package.json matches the version of vscode you are running:
"engines": {
"vscode": "^1.73.0"
},
I guess the generator will use the latest version available, but you might not have upgraded yet. That was the case for me.
#tacospice pointed out exactly. in package.json, engines.vscode determines minimum version of VSCode. In my case, yo created extension template which set minimum VSCode version(1.74.0) newer than working VSCode(1.70.0). Check Help -> About -> version with package.json.

Prettier throwing error in VScode fresh CRA app installation

I installed a fresh install of CRA and also installed eslint and prettier and as well as two packages to make them work smoothly with each other.
Eslint is working and active but prettier is not formatting. I get the following error in the terminal:
Error: Failed to load plugin 'react' declared in 'CLIOptions': The argument 'filename' must be a file URL object, file URL string, or absolute path string. Received ''
Package.json:
{
"name": "test-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.3.0",
"#testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest",
"prettier"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"eslint": "^8.20.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-react": "^7.30.1",
"prettier": "^2.7.1"
}
}

build and install word officejs add ins

i have developed a task pane word addin with yo and js
the thing is when i built it i have html files and manifest.xml file but i don't know how to install these files inside word (windows)
i used this command from package.json:
npm run build
my package.json
{
"name": "office-addin-taskpane-js",
"version": "0.0.1",
"repository": {
"type": "git",
"url": "https://github.com/OfficeDev/Office-Addin-TaskPane-JS.git"
},
"license": "MIT",
"config": {
"app_to_debug": "word",
"app_type_to_debug": "desktop",
"dev_server_port": 3000
},
"scripts": {
"build": "webpack --mode production",
"build:dev": "webpack --mode development",
"dev-server": "webpack serve --mode development",
"lint": "office-addin-lint check",
"lint:fix": "office-addin-lint fix",
"prettier": "office-addin-lint prettier",
"start": "office-addin-debugging start manifest.xml",
"start:desktop": "office-addin-debugging start manifest.xml desktop",
"start:web": "office-addin-debugging start manifest.xml web",
"stop": "office-addin-debugging stop manifest.xml",
"validate": "office-addin-manifest validate manifest.xml",
"watch": "webpack --mode development --watch"
},
"dependencies": {
"core-js": "^3.9.1",
"regenerator-runtime": "^0.13.7"
},
"devDependencies": {
"#babel/core": "^7.13.10",
"#babel/preset-env": "^7.12.11",
"#babel/preset-typescript": "^7.13.0",
"#types/office-js": "^1.0.180",
"#types/office-runtime": "^1.0.17",
"acorn": "^8.5.0",
"babel-loader": "^8.2.2",
"copy-webpack-plugin": "^9.0.1",
"eslint-plugin-office-addins": "^2.0.0",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.2",
"office-addin-cli": "^1.3.5",
"office-addin-debugging": "^4.3.8",
"office-addin-dev-certs": "^1.7.7",
"office-addin-lint": "^2.0.0",
"office-addin-manifest": "^1.7.7",
"office-addin-prettier-config": "^1.1.4",
"os-browserify": "^0.3.0",
"process": "^0.11.10",
"source-map-loader": "^3.0.0",
"ts-loader": "^9.2.5",
"typescript": "^4.3.5",
"webpack": "^5.50.0",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "4.7.3"
},
"prettier": "office-addin-prettier-config",
"browserslist": [
"ie 11"
]
}
can anyone help me build it the right way then install it?
thanks
First of all, you need to run the dev server. The scripts section lists available commands you could use for that:
"dev-server": "webpack serve --mode development",
So, you could use the following command line:
npm run dev-server
Then you can launch the host application, the scripts section defines the following entries for that:
"start": "office-addin-debugging start manifest.xml",
"start:desktop": "office-addin-debugging start manifest.xml desktop",
"start:web": "office-addin-debugging start manifest.xml web",
Depending on your choice (whether it is a desktop application or browser) you could choose one to run. For example:
npm run start:desktop
In that case the desktop edition of Excel will be run and the add-in sideloaded.
You can read more about that in the Overview of debugging Office Add-ins article.

Set up testing-library/react with mocha got SyntaxError: Unexpected token

I am setting up testing-library/react with mocha. Faced a lot of problems on the setup that were resolved by installing babel libraries and configuring them in .babelrc file as explained on the bottom most part of this question. Now, I am stuck on this error:
> mocha --exit --require #babel/register --require jsdom-global/register
D:\projects\demo_app\node_modules\antd\es\row\index.js:1
(function (exports, require, module, __filename, __dirname) { import { Row } from '../grid';
^
SyntaxError: Unexpected token {
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
This comes from ant.design component which uses the syntax above. I have tried to test a dummy component like below:
const component = () => (<div>hello</div>)
And it has no problem. But whenever I import my real component that I need to test that is using ant design, I get the error above.
Is it setup part for babel not configured properly? I have no idea how to fix the error. Somehow have a guess that it might be related to babel presets or plugins.
P.S. My project is using Create React App, the exact same test runs smoothly with Jest, but for some reason I don't want to use jest.
Below is .babelrc
{
"presets": [
["#babel/preset-env",
{
"targets": {
"esmodules": true,
"node": "current"
}
}
],
["#babel/preset-react"]
],
"plugins": [
["#babel/plugin-proposal-class-properties"],
["module-resolver", {
"root": ["./src"],
"alias": {
"underscore": "lodash"
}
}]
]
}
Below is package.json
{
"dependencies": {
"antd": "^4.4.2",
"axios": "^0.19.2",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-google-oauth": "^1.0.0",
"react-icons": "^3.10.0",
"react-redux": "^7.1.3",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.1",
"recompose": "^0.30.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"styled-components": "^5.0.1",
"validator": "^13.1.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "mocha --exit --require #babel/register --require jsdom-global/register",
"test:jest": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "7.12.9",
"#babel/plugin-proposal-class-properties": "7.12.1",
"#babel/preset-env": "^7.12.7",
"#babel/preset-react": "7.12.7",
"#babel/register": "7.12.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"babel-eslint": "10.1.0",
"babel-plugin-module-resolver": "^4.0.0",
"chai": "4.2.0",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.2",
"eslint-plugin-flowtype": "^3.13.0",
"eslint-plugin-import": "^2.20.1",
"husky": "^4.2.1",
"jsdom": "^16.4.0",
"jsdom-global": "^3.0.2",
"mocha": "8.2.1",
"msw": "^0.19.5",
"react-test-renderer": "^16.13.1",
"redux-mock-store": "^1.5.4",
"standard": "^14.3.1"
},
"optionalDependencies": {
"fsevents": "^2.1.2"
},
"standard": {
"parser": "babel-eslint",
"ignore": [
"/public"
]
},
"jest": {
"transformIgnorePatterns": [
"node_modules/?!(react)/"
]
},
"extends": [
"eslint:recommended",
"plugin:react/recommended"
]
}
Any help would be appreciated.
You have "esmodules": true which forces Babel to use ES modules. That means that if you're using Node, it needs to support ES modules, and you either need to have your tests in .mjs files or have "type": "module" in package.json. If this isn't supported or you want to support older Node versions, remove "esmodules": true from your Babel config to enable compatibility with CJS modules.