Develop Reference

Vscode Extension API: Cannot find module '#babel/preset-react'

I want to compile JSX files using '#babel/preset-react on VScode extension API. While doing this I faced an error just like below. I have tried a few ways to install but still can't get any results. It works on a basic node application but it doesn't work on VScode extension API.
Error: Cannot find module '#babel/preset-react'
at webpackEmptyContext (c:\Users\PC\Desktop\type-svg\jsx-svg\dist\extension.js:56404:10)
at resolveStandardizedName (c:\Users\PC\Desktop\type-svg\jsx-svg\dist\extension.js:57964:7)
at resolvePreset (c:\Users\PC\Desktop\type-svg\jsx-svg\dist\extension.js:57912:10)
js:120:14)
c:\Users\PC\AppData\Local\Programs\Microsoft VS C
code blocks:
try {
let output = babel.transformSync("code", {
"presets": ["#babel/preset-react"]
});
console.log(output)
} catch (e) {
console.log(e)
}
package.json file:
{
"name": "jsx-svg",
"displayName": "",
"description": "jsx-svg",
"version": "0.0.1",
"engines": {
"vscode": "^1.55.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:jsx-svg.helloWorld"
],
"main": "./dist/extension.js",
"contributes": {
"commands": [
{
"command": "jsx-svg.helloWorld",
"title": "Hello World"
}
]
},
"scripts": {
"vscode:prepublish": "yarn 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": "yarn run test-compile && yarn run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js"
},
"devDependencies": {
"#babel/core": "^7.14.0",
"#babel/plugin-syntax-jsx": "^7.12.13",
"#babel/plugin-transform-react-jsx": "^7.13.12",
"#babel/preset-react": "^7.13.13",
"#babel/template": "^7.12.13",
"#babel/traverse": "^7.14.0",
"#types/glob": "^7.1.3",
"#types/mocha": "^8.0.4",
"#types/node": "^12.11.7",
"#types/vscode": "^1.55.0",
"#typescript-eslint/eslint-plugin": "^4.14.1",
"#typescript-eslint/parser": "^4.14.1",
"eslint": "^7.19.0",
"glob": "^7.1.6",
"mocha": "^8.2.1",
"ts-loader": "^8.0.14",
"typescript": "^4.1.3",
"vscode-test": "^1.5.0",
"webpack": "^5.19.0",
"webpack-cli": "^4.4.0"
},
"dependencies": {
"#types/babel__core": "^7.1.14"
}
}

The biggest hint in that error is webpackEmptyContext. This isn't Node telling you that it failed to find #babel/preset-react" on the filesystem, it is Webpack telling you that it was unable to load #babel/preset-react" from it's bundle.
In the case of Babel, and anything with object-based config inputs, that is expected, because Webpack has no way to know that
let output = babel.transformSync("code", {
"presets": ["#babel/preset-react"]
});
will cause Babel to interally try to load "#babel/preset-react", and Babel can't preemptively tell Webpack what to bundle because it could be passed any set of options.
The way around this is to explicitly load the plugin and pass the already-loaded plugin to Babel like this:
let output = babel.transformSync("code", {
"presets": [require("#babel/preset-react")]
});

how can I run node js app when installed node js version is higher and app using old version

I am relatively new to Node js and was working on .NET MVC. When I am trying to run it using command node index its giving me an below error.
H:\Services\src>node index
H:\Services\src\index.js:1
import app from './app';
^^^^^^
SyntaxError: Cannot use import statement outside a module
?[90m at Module._compile (internal/modules/cjs/loader.js:895:18)?[39m
?[90m at Object.Module._extensions..js (internal/modules/cjs/loader.js:995:10)?[39m
?[90m at Module.load (internal/modules/cjs/loader.js:815:32)?[39m
?[90m at Function.Module._load (internal/modules/cjs/loader.js:727:14)?[39m
?[90m at Function.Module.runMain (internal/modules/cjs/loader.js:1047:10)?[39m
?[90m at internal/main/run_main_module.js:17:11?[39m
Below is my package.json file. It says it is using node version 8.0.0 and npm version 5.0.0. Bt I have installed node version is v12.14.0 and NPM installed version is 6.13.4.
{
"name": "core",
"version": "0.0.1",
"description": "Core",
"main": "dist/index.js",
"engines": {
"node": "8.0.0",
"npm": "5.0.0"
},
"scripts": {
"prestart": "npm run -s build",
"start": "node dist/index.js",
"dev": "nodemon src/index.js --exec \"node -r dotenv/config -r babel-register\" localdev",
"clean": "rimraf dist && rimraf -p",
"build": "npm run clean && mkdir -p dist && babel src -s -D -d dist",
"test": "jest --watch",
"lint": "esw -w src test"
},
"keywords": [
"express",
"babel",
"es6",
"es2015",
"es2016",
"es2017",
"eslint"
],
"author": "ABC",
"license": "UNLICENSED",
"dependencies": {
"babel-cli": "6.26.0",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-env": "1.6.1",
"cors": "2.8.5",
"express": "4.16.4",
"js-yaml": "3.12.2",
"mssql": "5.0.0",
"winston": "3.1.0",
"winston-daily-rotate-file": "3.5.1"
},
"devDependencies": {
"babel-eslint": "7.2.3",
"babel-jest": "21.0.2",
"babel-register": "6.24.1",
"dotenv": "4.0.0",
"eslint": "4.10.0",
"eslint-config-airbnb-base": "12.1.0",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jest": "21.0.2",
"eslint-watch": "3.1.0",
"nodemon": "1.18.10",
"rimraf": "2.6.3"
},
"babel": {
"presets": [
[
"env",
{
"targets": {
"node": "current"
}
}
]
],
"plugins": [
"transform-object-rest-spread"
]
},
"eslintConfig": {
"parser": "babel-eslint",
"plugins": [
"import",
"jest"
],
"parserOptions": {
"ecmaVersion": 2017,
"sourceType": "module"
},
"env": {
"node": true,
"jest": true
},
"extends": [
"eslint:recommended"
]
}
}
I have tried different google solutions for above error but each time gets a diff error depending upon steps I am doing to fix the issue. I am just looking to run this code and test it locally.
Thanks in advance.

ESLint has parsing error Unexpected token /

I have code like:
import 'app/css/normalize.css'
import 'app/css/app.css'
import React from 'react'
import ReactDOM from 'react-dom'
const App = () => {
return (
<div>
<h1>Finances</h1>
Test
</div>
)
}
ReactDOM.render(
<App />,
document.getElementById('app')
)
ESLint complains that the / in </h1> is invalid. Why is that?
My ESLint config
module.exports = {
"env": {
"browser": true,
"es6": true
},
"extends": ["eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
"rules": {
"indent": [
"error",
4
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
]
}
};
ESLint output
> finances-web#1.0.0 lint /home/jiewmeng/Dropbox/finances2019/web
> eslint scripts/**/*.js
/home/jiewmeng/Dropbox/finances2019/web/scripts/app.js
10:20 error Parsing error: Unexpected token /
✖ 1 problem (1 error, 0 warnings)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! finances-web#1.0.0 lint: `eslint scripts/**/*.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the finances-web#1.0.0 lint script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/jiewmeng/.npm/_logs/2018-12-23T04_08_42_410Z-debug.log
Could it be something to do with my react version?
{
"name": "finances-web",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"lint": "eslint scripts/**/*.js",
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server --hot --color --history-api-fallback --config webpack.config.js"
},
"author": "Jiew Meng <jiewmeng#gmail.com>",
"license": "MIT",
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/preset-env": "^7.2.0",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"copy-webpack-plugin": "^4.6.0",
"css-loader": "^2.0.1",
"eslint": "^5.10.0",
"eslint-plugin-react": "^7.11.1",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.5.0",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.5.0",
"react-hot-loader": "^4.6.1",
"style-loader": "^0.23.1",
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
},
"dependencies": {
"#babel/polyfill": "^7.0.0",
"lodash": "^4.17.11",
"react": "^16.6.3",
"react-dom": "^16.6.3"
}
}

Ok ... realized my mistake. In eslintrc I need to add
"parser": "babel-eslint",

How to run babel-node on a Lerna monorepo?

I´m building my first monorepo using Lerna.
My lerna.json:
{
"lerna": "2.9.0",
"npmClient": "yarn",
"useWorkspaces": true,
"packages": [
"packages/*"
]
}
The lerna package.json is like:
{
"name": "monorepo",
"version": "1.0.0",
"workspaces": [
"packages/*"
],
"private": true,
"scripts": {
"start": "lerna exec -- start",
"server": "lerna exec -scope #monorepo/server -- server"
},
"devDependencies": {
"lerna": "^2.9.0"
}
}
And my project has the following package.json:
{
"name": "#monorepo/server",
"version": "1.0.0",
"private": true,
"scripts": {
"start": "concurrently \"babel-node start-server\" \"babel-node start-auth-client\" \"babel-node start-editor-client\"",
"server": "nodemon --exec \"babel-node start-server.js\"",
"lint": "eslint ."
},
"dependencies": {
"#babel/cli": "^6.24.1",
"#babel/core": "^6.25.0",
"#babel/plugin-transform-runtime": "^6.23.0",
"#babel/preset-env": "^1.6.1",
"#babel/preset-es2017": "^6.24.1",
"bcryptjs": "^2.4.3",
"body-parser": "^1.17.2",
"connect-mongo": "^2.0.0",
"crypto": "^1.0.1",
"express": "^4.15.3",
"express-graphql": "^0.6.12",
"graphql": "^0.13.1",
"graphql-relay": "^0.5.4",
"jwt-simple": "^0.5.1",
"mongoose": "^5.0.10",
"morgan": "^1.8.2",
"nodemailer": "^4.6.0",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0",
"path": "^0.12.7",
"validator": "^9.1.1"
},
"devDependencies": {
"concurrently": "3.5.1",
"eslint": "^4.18.2",
"eslint-config-airbnb": "16.1.0",
"eslint-plugin-import": "2.9.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.7.0",
"fs-extra": "^5.0.0",
"node-fetch": "^2.1.1",
"nodemon": "^1.11.0"
},
"babel": {
"presets": [
"#babel/es2017",
"#babel/preset-env"
],
"plugins": [
"transform-runtime"
]
}
}
My problem is running the server application, issuing one of the following commands:
$ yarn start
yarn run v1.5.1
$ concurrently "babel-node start-server" "babel-node start-auth-client" "babel-node start-editor-client"
[0] 'babel-node' Program is not recognized as an internal or external command, operable program or batch file.
[1] 'babel-node' Program is not recognized as an internal or external command, operable program or batch file.
[2] 'babel-node' Program is not recognized as an internal or external command, operable program or batch file.
[2] babel-node start-editor-client exited with code 1
[1] babel-node start-auth-client exited with code 1
[0] babel-node start-server exited with code 1
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: C:\\WINDOWS\\system32\\cmd.exe
Arguments: /d /s /c concurrently \"babel-node start-server\" \"babel-node start-auth-client\" \"babel-node start-editor-client\"
Directory: c:\\dev\\monorepo\\packages\\server
Output:
".
info If you think this is a bug, please open a bug report with the information provided in "c:\\dev\\monorepo\\packages\\server\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
I think this is due to the fact that all packages now reside at package root/node_modules.
Any ideas how to fix that?

Eslint only working in one sublime text project?

I've duplicated a projects .eslintrc and package.json files, and only the first project gets linting. The second project doesn't show any errors.
I'm using sublime-linter, with the eslint mod.
I've set the syntax the same in both projects.
I've done an npm isntall
I've tried restarting sublime
on doing a comparison of the node_modules folders there is one descrepency, estravers-fb is installed in the project that works.
why would this not be installed in the other projects?
is there another command to properly install dev-dependancies other than npm isntall?
heres my package.json :
{
"name": "Read-hapi",
"version": "1.0.0",
"description": "learning the hapi framework",
"repository": "https://github.com/Pushplaybang/learning-hapi.git",
"main": "server.js",
"dependencies": {
"blipp": "^2.3.0",
"boom": "^3.1.2",
"cheerio": "^0.20.0",
"good": "^6.6.0",
"good-console": "^5.3.1",
"handlebars": "^4.0.5",
"hapi": "^13.0.0",
"inert": "^3.2.0",
"joi": "^8.0.3",
"reading-time": "^1.0.2",
"request-promise": "^2.0.1",
"text-stats": "0.0.3",
"valid-url": "^1.0.9",
"vision": "^4.0.1"
},
"devDependencies": {
"babel-eslint": "^5.0.0",
"eslint": "^2.3.0",
"eslint-config-airbnb": "^6.1.0",
"eslint-plugin-react": "^4.2.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Paul van Zyl",
"license": "ISC"
}
and heres my .eslintrc
{
"parser": "babel-eslint",
"extends": "airbnb",
"env": {
"browser": true,
"node": true,
},
"rules": {
"no-unused-vars": 0,
"no-undef": 0,
}
}
any help would be appreciated.

Try downgrading ESLint to ~2.2.0 in your package.json or using the default Espree parser instead of babel-eslint. There's an incompatibility right now between ESLint 2.3.0 and babel-eslint. We're tracking progress in eslint/eslint#5476, and you can subscribe to that issue for updates.